섹션 구분선으로 탐색 메뉴를 구성하는 방법

탐색 메뉴는 방문자가 사이트를 방문할 때 가장 먼저 찾는 것 중 하나입니다. 이 때문에 웹사이트는 그에 합당한 기본 부동산(페이지 상단)을 제공해야 합니다. 그러나 탐색 메뉴를 좀 더 눈에 띄게 만들고 싶다면 사용자 정의 배경 디자인으로 장식할 수 있습니다. Divi의 Visual Builder를 사용하면 페이지의 모든 섹션에서 사용할 수 있는 Divider 배경 옵션으로 멋진 배경 디자인을 만들 수 있습니다. 그리고 약간의 창의성으로 구분선 배경을 탐색 메뉴의 고유한 프레임으로 사용할 수 있습니다. 웹사이트의 각 페이지에 고유한 메뉴 배경을 만들 수도 있습니다.

이 튜토리얼에서는 섹션 구분선 배경을 사용하여 아름다운 배경 디자인으로 탐색 메뉴를 구성하는 것이 얼마나 쉬운지 보여 드리겠습니다. 이러한 디자인을 만들기 위한 예제 사이트로 약국 레이아웃 팩을 사용하겠습니다.

시작하자!

엿보기

다음은 이 디자인 기술로 달성할 수 있는 작업에 대한 간략한 설명입니다.

필요한 것

이 튜토리얼에서 정말로 필요한 것은 다음과 같습니다.

• Divi 테마(설치 및 활성)
• The Pharmacy Layout Pack(Divi Builder 내에서 사용할 수 있는 무료 사전 제작 레이아웃 팩)

테마 커스터마이저에서 기본 메뉴 설정하기

이 튜토리얼에서는 약국 레이아웃 팩의 6페이지가 포함된 기본 메뉴와 함께 Divi를 새로 설치했습니다. 기본적으로 메뉴가 어떻게 생겼는지 보여줍니다.

보시다시피 헤더는 흰색 배경을 가지고 있으며 페이지의 첫 번째 섹션 위에 있습니다. 아래로 스크롤하면 머리글이 고정 탐색 메뉴 모음으로 변환됩니다.

하지만 이 튜토리얼에서는 헤더 배경을 투명하게 만들어 나만의 배경을 추가할 수 있습니다. 이렇게 하려면 테마 사용자 지정 프로그램으로 이동해야 합니다. WordPress 대시보드에서 Divi > Theme Customizer로 이동합니다. 그런 다음 사용자 지정 메뉴에서 머리글 및 탐색 > 기본 메뉴 모음으로 이동합니다.

투명도 슬라이더를 완전히 아래로 끌어 배경색을 완전히 투명하게 변경하거나 색상 코드 rgba(255,255,255,0)를 입력합니다.

보시다시피 흰색 헤더 배경이 사라지고 첫 번째 섹션이 페이지 상단으로 이동하여 헤더와 기본 메뉴의 배경으로 사용됩니다.

탐색 메뉴의 테두리에 색상 배경을 추가할 것이므로 다음 메뉴 텍스트 옵션도 업데이트하겠습니다.

글꼴: 몬세라트
글꼴 스타일: 굵게(B)
텍스트 색상: 흰색
활성 링크 색상: 흰색

사용자 지정 메뉴에서 한 수준 뒤로 돌아가서 고정 탐색 탭을 클릭합니다. 고정 탐색 기능을 유지하려는 경우 비주얼 빌더에서 구축할 사용자 정의 배경 색상을 보완하는 사용자 정의 색상을 지정할 수 있습니다. 또는 페이지별로 다른 색상으로 기본 메뉴를 구성할 수 있도록 보다 일반적인 색상을 지정할 수 있습니다. 지금은 고정 탐색에 보다 일반적인 색 구성표를 사용하겠습니다. 다음을 업데이트합니다.

기본 메뉴 배경색: #ffffff
기본 메뉴 링크 색상: rgba(0,0,0,0.61)
활성 기본 메뉴 링크 색상: #ff5473

이제 준비가 되었습니다! 변경 사항을 게시해야 합니다.

섹션 구분선 배경으로 탐색 메뉴 구성하기

예 #1

약국 홈페이지로 이동하여 비주얼 빌더를 배포합니다. 그런 다음 행, 열 또는 모듈이 없는 새 일반 섹션을 추가하고(필요하지 않음) 섹션을 페이지 상단으로 드래그합니다(와이어프레임 모드에서는 더 큰 블록이기 때문에 섹션을 재정렬하는 것이 더 쉽습니다).

이제 데스크탑 모드로 돌아가서 디자인을 완료하십시오.

섹션 설정을 열고 다음을 업데이트합니다.

상단 구분선 스타일: 스크린샷 참조
디바이더 색상: #ff5473
디바이더 높이: 150px
디바이더 수평 반복: 0.8x
맞춤 여백: -80px 하단
맞춤 패딩: 상단 0px, 하단 0px

구분선 색상은 레이아웃에 사용된 것과 동일한 분홍색입니다. 디바이더를 약간 평평하게 하기 위해 디바이더 수평 반복을 0.8x로 설정했습니다. -80px 하단 여백은 섹션의 흰색 배경을 숨기기 위해 페이지 아래로 섹션을 가져옵니다. 그 결과 오른쪽의 탐색 프레임에 구분선이 표시됩니다. 구분선이 왼쪽으로 확장되어 로고에도 멋진 배경을 추가할 수 있습니다.

다음은 라이브 사이트에서 본 모습입니다.

예 #2

이 다음 예에서는 구분선 배경이 로고로 확장되는 대신 탐색 메뉴의 프레임만 표시하도록 섹션을 배치하겠습니다. 이렇게 하려면 섹션에 사용자 정의 너비를 지정하고 탐색 메뉴 주위에 맞도록 오른쪽으로 정렬해야 합니다.

섹션 설정으로 이동하여 다음을 업데이트합니다.

(참고: 섹션의 사용자 지정 여백으로 인해 섹션 메뉴를 클릭할 수 없게 될 수 있으므로 와이어프레임 모드에서 설정을 열어야 할 수도 있습니다. 와이어프레임 모드에서 설정을 열면 데스크탑 보기 모드로 다시 전환할 수 있습니다.)

폭: 75%
섹션 정렬: 오른쪽
구분선 스타일: 스크린샷 참조
디바이더 수평 반복: 1x

다음과 같습니다.

고정 탐색이 활성화되면 메뉴가 프레임을 떠나기 시작할 때 고정 메뉴 헤더가 어떻게 활성화되는지 확인할 수 있습니다.

고정 탐색을 비활성화하려면 Divi > 테마 옵션으로 이동하고 일반 설정에서 고정 탐색 모음 옵션을 비활성화합니다.

고정 탐색이 활성화되지 않으면 스크롤할 때 메뉴가 프레임 디자인 내에서 잠긴 상태로 유지됩니다.

반응형

프레임은 모바일에서도 잘 보입니다.

그러나 섹션에 데스크톱 및 모바일용 맞춤 구분선 높이를 0으로 지정하여 언제든지 프레임을 숨기도록 선택할 수 있습니다. 그런 다음 테마 사용자 정의 도구에서 모바일 메뉴를 사용자 정의하십시오.

페이지마다 다른 색상 프레임 사용

원하는 경우 페이지별로 다른 색상과 디자인을 추가할 수 있습니다. 섹션을 Divi 라이브러리에 저장하고 웹사이트의 다른 페이지에 추가하기만 하면 됩니다. 그런 다음 원하는 대로 색상이나 디자인을 조정할 수 있습니다. 가능성은 무한합니다.

최종 생각

탐색 메뉴에 사용자 정의 배경을 추가하는 것은 실제로 Divi Builder를 사용하면 매우 쉽습니다. 메뉴의 배경 역할을 하도록 섹션을 배치하는 방법만 알면 됩니다. 이 설정을 사용하면 다양한 구분선 스타일을 테스트하여 탐색 메뉴에 대한 모든 종류의 고유한 프레임을 만들 수 있습니다. 그리고 섹션을 사용하고 있기 때문에 섹션의 모든 디자인 옵션을 사용하여 프레임을 디자인할 수 있습니다. 간단한 섹션 배경이나 그라디언트를 사용하고 원하는 곳에서 섹션의 위치를 ​​조정할 수도 있습니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!