Divi에서 전체 화면 메뉴 모듈로 전역 헤더를 생성하시겠습니까?
헤더는 가장 중요한 요소 중 하나입니다. 사이트 웹 그리고 의 중심에 있다 사용자 경험. 탐색 메뉴는 사용자가 웹사이트에서 무엇을 찾을 수 있는지에 대한 아이디어를 제공합니다. 사이트 웹 필요한 정보를 찾는 데 도움이 됩니다.
또한 보조 메뉴 표시줄은 클릭 유도 문구를 강조하거나 홍보 제안. 헤더가 귀하의 가장 중요한 부분 중 하나라는 것은 말할 것도 없습니다. 사이트 웹, 일반적으로 모든 페이지에 표시되기 때문입니다. 이는 귀하의 브랜드를 선보이고 웹사이트의 나머지 부분 디자인과 일치하는 헤더를 만들 수 있는 좋은 기회입니다.
Divi의 테마 빌더 옵션을 사용하면 사용자 정의 글로벌 헤더를 만들고 전체 웹사이트에서 헤더 및 메뉴 모듈의 모양을 사용자 정의할 수 있습니다.
이 튜토리얼에서는 Divi의 전체 화면 메뉴 모듈을 사용하여 전역 헤더를 만드는 방법을 보여줍니다.
시작하자!
측량
다음은 우리가 디자인할 전역 헤더의 미리보기입니다.
테마 빌더 열기
이 예에서는 전역 헤더를 작성 중이므로 WordPress Divi 메뉴에서 찾을 수 있는 "테마 빌더"로 이동해 보겠습니다. 전역 머리글 추가를 선택한 다음 전역 머리글 생성을 선택합니다.
보조 메뉴 모음 만들기
전역 헤더 레이아웃을 처음 열면 일반 섹션이 미리 로드되어 제공됩니다. 이것을 전체 너비 메뉴 위에 놓고 클릭 유도문안 텍스트와 버튼을 포함하는 보조 메뉴 표시줄로 수정합니다.
먼저 섹션 설정을 열고 배경색을 추가합니다.
- 배경: #92A8A1
다음으로 섹션 여백입니다.
- 내부 여백 정점: 0px
- 하단 내부 여백: 0px
이제 행을 삽입하십시오. 이 예에서는 아래 표시된 레이아웃을 사용합니다.
행 설정에서 스타일 탭의 크기 조정에서 열 높이를 조정합니다.
- 기둥 높이 조화: 예
다음으로 위쪽 및 아래쪽 여백을 다음과 같이 설정합니다.
- 상단 내부 여백: 5px
- 하단 내부 여백: 5px
보조 헤더 요소가 수직으로 정렬되기를 원하기 때문에 기본 행 요소에 일부 사용자 정의 CSS를 추가합니다.
1.
align-items:center;
이제 라인이 구성되었으므로 다음 모듈을 삽입할 수 있습니다. 내용. 먼저 왼쪽에 텍스트 모듈을 삽입합니다.
수정 내용 텍스트. 이는 행동 촉구를 포함하거나 홍보 제안.
- 텍스트: "메일링 리스트에 가입하여 주문 시 10% 할인을 받으세요!" »
텍스트 모듈의 스타일 탭에 액세스하고 다음과 같이 매개변수를 수정합니다.
- 글꼴 "텍스트": Poppins
- "텍스트" 흐릿한 조명: 중간
- "텍스트" 텍스트 색상: #FFFFFF
다음으로 오른쪽에 Button 모듈을 추가합니다.
버튼 텍스트를 추가합니다.
- 텍스트: "무료 견적 받기"
스타일 탭에서 버튼을 중앙에 맞춥니다.
- 버튼 정렬: 중앙
이제 버튼의 모양을 사용자 지정해 보겠습니다.
- "버튼"에 대한 사용자 정의 스타일 사용: 예
- 버튼 텍스트 크기: 14px
- 버튼 텍스트 색상: #FFFFFF
- 배경 버튼: #2F5349
- 버튼 테두리 너비: 0px
- 테두리 반경 버튼: 50px
- 버튼 문자 간격: 1px
- 버튼 글꼴: Poppins
전체 화면 메뉴 모듈 추가
이제 보조 메뉴가 설계되었으므로 주 메뉴로 이동할 수 있습니다. 전체 화면 메뉴 모듈을 사용하여 메뉴를 빌드합니다. 전체 헤더에 새 전체 화면 섹션을 추가합니다.
전체 화면 메뉴 모듈 선택 및 삽입
다음으로 전체 화면 메뉴 설정을 사용자 지정합니다.
- 활성 링크 색상: #2F5349
- 글꼴 메뉴: Poppins
- 희미한 조명 메뉴: 반 굵게
- 복사 스타일 메뉴: TT
- 메뉴 텍스트 색상: #000000
- 호버 메뉴 텍스트 색상: #2F5349
- 메뉴 텍스트 크기: 15px
- 메뉴 문자 간격: 2px
햄버거 메뉴 아이콘 색상을 검정색으로 변경합니다.
- 햄버거 메뉴 아이콘 색상: #000000
메뉴에 로고를 추가하기 전에 크기 조정 옵션을 변경해 보겠습니다. Divi에 내장된 반응형 옵션을 사용하여 PC와 모바일에 대해 다른 최대 높이를 설정합니다.
- PC의 최대 로고 높이: 3vw
- 모바일에서 최대 로고 높이: 6vw
이제 전체 화면 메뉴에 로고를 추가하십시오.
마지막으로 사용자가 웹 사이트를 스크롤할 때 기본 메뉴가 화면 상단에 유지되기를 원하므로 Divi의 내장 고정 고정 설정을 사용합니다.
- 고정 위치: 위에 고정
이것으로 글로벌 헤더 디자인이 완성되었습니다.
미리 정의된 레이아웃으로 새 페이지 만들기
전체 너비 헤더와 메뉴가 작동하는지 확인하려면 Divi 라이브러리에서 미리 정의된 레이아웃으로 새 페이지를 생성해 보겠습니다. 이 예에서는 패키지의 바닥재 홈페이지를 사용합니다. 바닥 레이아웃.
웹 사이트에 새 페이지를 추가하고 제목을 지정한 다음 Divi Builder 사용 옵션을 선택합니다.
이 예에서는 Divi 라이브러리에서 미리 만들어진 레이아웃을 사용하고 있으므로 레이아웃 선택을 선택합니다.
"바닥재 홈페이지" 레이아웃을 찾아 선택합니다.
"레이아웃 선택"을 선택하여 페이지에 레이아웃을 추가합니다.
이제 디자인이 완성되었습니다!
최종 결과
결론
위에서 말했듯이 헤더와 탐색 메뉴는 웹사이트 사용자 경험의 핵심입니다. 이제 Divi의 "전체 화면 메뉴" 모듈로 멋진 전체 헤더를 디자인하는 것이 얼마나 쉬운지 확인했습니다.
운 좋게도 Divi의 테마 빌더를 사용하면 웹사이트 메뉴와 헤더의 모든 측면을 제어할 수 있으며 몇 번의 클릭만으로 완전히 맞춤화된 고유한 디자인을 만들 수 있습니다.
Divi의 글로벌 헤더 옵션을 사용하여 헤더와 탐색 메뉴를 사용자 정의해 보셨습니까? 의견에 어떻게 생각하는지 알려주십시오!
