5개의 글로벌 사전 설정으로 Divi의 메뉴 모듈을 최적화하는 방법(무료 다운로드)

메뉴는 모든 사이트의 중요한 부분이므로 제대로 표시되도록 약간의 추가 시간과 노력을 들이는 것이 좋습니다. Divi에서는 필요한 많은 스타일 옵션을 제공하는 Divi의 메뉴 모듈을 사용하여 사용자 정의 메뉴를 빠르게 구축할 수 있습니다. 그러나 사전에 일부 메뉴 전역 사전 설정을 준비하여 웹 사이트 헤더를 디자인하는 프로세스를 간소화하는 데 항상 도움이 됩니다. 이렇게 하면 버튼 클릭으로 사용자 정의 메뉴 스타일 프레임워크를 배포할 수 있으므로 웹사이트 브랜딩과 일치하도록 디자인을 조정하는 데 더 많은 시간을 할애할 수 있습니다. 예를 들어 버튼처럼 보이는 로고와 링크가 있는 중앙 메뉴를 원하는 경우 글로벌 사전 설정을 사용하여 한 번의 클릭으로 해당 프레임워크를 배포할 수 있습니다. 이렇게 하면 귀중한 시간과 에너지를 절약할 수 있습니다.

이 튜토리얼에서는 사용자 정의 Divi 헤더를 만들 때 사용할 수 있는 5가지 메뉴 모듈 전역 사전 설정을 공유합니다. 5가지 사전 설정이 모두 포함된 무료 다운로드 외에도 이러한 사전 설정을 처음부터 만드는 과정을 안내해 드립니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.

무료로 레이아웃 다운로드

이 튜토리얼의 디자인을 손에 넣으려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 ​​금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

다운로드

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

전역 헤더에서 이러한 메뉴 전역 사전 설정을 사용하려면 먼저 레이아웃(사전 설정 포함)을 다음과 같이 Divi 라이브러리로 가져와야 합니다.

1. Divi > Divi 라이브러리로 이동합니다.
2. 페이지 상단의 가져오기/내보내기 버튼을 클릭합니다.
3. 이식성 팝업에서 가져오기 탭 선택
4. 가져올 레이아웃 JSON 파일 선택
5. 가져오기 사전 설정 선택
6. 가져오기 버튼 클릭

그런 다음 테마 빌더로 이동하여 전역 헤더를 편집합니다. 로고를 넣을 메뉴 모듈을 추가하고 사전 설정을 사용하여 그에 따라 메뉴의 스타일을 지정하고 배치합니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. "처음부터 빌드" 옵션을 선택합니다.

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

Divi에서 5개의 메뉴 모듈 전역 사전 설정 만들기

#1 – 로고가 있는 중앙 버튼 링크

첫 번째 메뉴 스타일 전역 사전 설정의 경우 메뉴가 대칭적으로 보이도록 동일한 너비의 버튼 링크가 있는 메뉴를 디자인할 것입니다. 메뉴 버튼 링크의 활성 상태와 일치하는 호버 상태도 포함됩니다.

이 첫 번째 메뉴 전역 사전 설정을 만들려면 일반 섹션에 1열 행을 추가합니다.

그런 다음 행에 메뉴 모듈을 추가합니다.

메뉴 설정을 열고 모듈에 메뉴를 추가합니다.

그런 다음 사이트 로고도 모듈에 동적 콘텐츠로 추가합니다.

디자인 탭에서 다음을 업데이트합니다.

• 스타일: 중앙

• 메뉴 글꼴: Poppins
• 메뉴 글꼴 두께: 굵게
• 메뉴 글꼴 스타일: TT
• 메뉴 텍스트 크기: 14px(데스크톱), 24px(태블릿 및 휴대폰)
• 메뉴 문자 간격: 0.15em
• 메뉴 줄 높이: 1.3em(데스크톱), 1.8em(태블릿 및 휴대폰)

• 로고 최대 높이: 60px

• 여백: 0px 하단

고급 탭에서 버튼으로 표시되도록 몇 가지 사용자 정의 메뉴 링크 스타일을 추가할 것입니다.

메뉴 링크 CSS

메뉴 링크에 다음 사용자 정의 CSS를 추가합니다.

데스크탑에서…

min-width: 10em;
padding: 1em !important;
justify-content:center;
background: #f8f8f8;
border-radius: 10px;

호버에…

background: #333333;
color: #ffffff;
opacity: 1;

활성 메뉴 링크 CSS

background: #333333;
color: #ffffff;
opacity: 1;

메뉴 로고 CSS

margin-bottom: 10px;

스타일 1 결과

최종 결과는 다음과 같습니다.

메뉴 스타일 1을 글로벌 프리셋으로 추가하기

중복 섹션

메뉴 스타일을 전역 사전 설정으로 추가하기 전에 메뉴 스타일을 사용하여 다음 디자인을 바로 시작할 수 있도록 메뉴 모듈이 포함된 전체 섹션을 복제합니다.

현재 스타일에서 새 사전 설정 만들기

전역 사전 설정을 추가하려면 우리가 만든 원래 메뉴 모듈의 설정을 열고 사전 설정 드롭다운 링크를 클릭합니다.

현재 스타일에서 새 사전 설정 만들기를 선택합니다.

새 사전 설정에 이름을 지정한 다음("로고가 있는 중앙 버튼 링크") 사전 설정을 저장합니다.

#2 – 버튼 링크가 있는 인라인 센터 로고

두 번째 메뉴 전역 사전 설정을 만들려면 이전 디자인에서 복제 메뉴 모듈의 설정을 엽니다.

디자인 탭에서 스타일을 업데이트합니다.

• 스타일: 인라인 중심 로고

이전 모듈 스타일에서 상속된 사용자 정의 CSS로 인해 메뉴 링크는 버튼 디자인을 유지하면서 로고는 중앙에 완벽하게 위치합니다. 사용자 정의 버튼 링크 스타일을 사용하면 메뉴 링크가 멋진 대칭 디자인을 유지할 수 있습니다.

고급 탭에서 메뉴 로고 CSS를 다음과 같이 업데이트합니다.

margin-bottom: 0px;

스타일 2 결과

다음은 최종 결과입니다.

메뉴 스타일 2를 글로벌 프리셋으로 추가하기

중복 섹션

메뉴 스타일을 전역 사전 설정으로 추가하기 전에 메뉴 모듈(스타일 2)이 포함된 전체 섹션을 복제하여 메뉴 스타일을 사용하여 다음 디자인을 바로 시작할 수 있도록 합니다.

현재 스타일에서 새 사전 설정 만들기

전역 사전 설정을 추가하려면 우리가 만든 스타일 2에 대한 원래 메뉴 모듈의 설정을 열고 사전 설정 드롭다운 링크를 클릭합니다.

현재 스타일에서 새 사전 설정 만들기를 선택합니다.

사전 설정에 이름을 지정하고("Inline Centered Logo w/ Button Links") 사전 설정을 저장합니다.

#3 – 모바일 레이블이 있는 전체 중앙 VW 간격 메뉴

이 다음 메뉴 스타일의 경우 브라우저 너비에 맞게 크기가 조정되고 vw 길이 단위로 간격이 지정된 메뉴 텍스트가 있는 로고가 없는 전폭 중앙 메뉴를 디자인할 것입니다. 또한 모바일의 햄버거 아이콘 위에 "메뉴" 레이블이 있습니다.

세 번째 메뉴 전역 사전 설정을 만들려면 전체 너비 행이 필요합니다. 중복 메뉴가 있는 행 설정을 열고 다음을 업데이트합니다.

• 거터 폭: 1
• 폭: 100%
• 최대 너비: 100%

메뉴 모듈의 설정을 열고 로고를 삭제하십시오.

디자인 탭에서 스타일을 업데이트합니다.

• 스타일: 중앙

그런 다음 텍스트 크기가 브라우저 너비에 맞게 조정되도록 다음 VW 길이 단위로 텍스트 크기를 업데이트합니다.

• 메뉴 텍스트 크기: 1.5vw(데스크톱)

모바일 메뉴에 대한 "메뉴" 레이블을 생성하기 위해 다음과 같이 태블릿 디스플레이의 Before Psuedo Element에 사용자 정의 CSS를 추가할 수 있습니다.

CSS 이전

content: "MENU";
font-family: poppins;
font-size:12px;
position: absolute;
top:0;
left:50%;
transform: translate(-50%, -100%);

글꼴 패밀리는 메뉴 링크에서 사용되는 글꼴과 일치하도록 "팝핀"으로 설정되어 있습니다. 다른 글꼴을 사용하는 경우 이를 업데이트해야 합니다.

참고: 이것은 비주얼 빌더에 표시되거나 표시되지 않을 수 있습니다. 결과를 보려면 라이브 페이지를 로드해야 할 수도 있습니다.

다음으로, 마우스 오버 시 추가 간격과 메뉴 링크 테두리를 추가할 것입니다. 다음 사용자 정의 CSS를 계속 추가하십시오.

메뉴 링크 CSS(데스크톱):

min-width: 10em;
justify-content:center;
text-align:center;
padding: .3em;
margin-bottom: 8px;
border: 1px solid transparent;

메뉴 링크 CSS(마우스 오버):

color: #333;
border: 1px solid #333;
opacity:1;

활성 메뉴 링크 CSS:

color: #333;
border: 1px solid #333;
opacity:1;

스타일 3 결과

메뉴 스타일 3을 글로벌 프리셋으로 추가하기

중복 섹션

메뉴 스타일을 전역 사전 설정으로 추가하기 전에 메뉴 모듈(스타일 3)이 포함된 전체 섹션을 복제하여 메뉴 스타일을 사용하여 다음 디자인을 바로 시작할 수 있도록 합니다.

현재 스타일에서 새 사전 설정 만들기

스타일 3을 전역 사전 설정으로 추가하려면 우리가 만든 스타일 3에 대한 원래 메뉴 모듈의 설정을 열고 사전 설정 드롭다운 링크를 클릭합니다.

현재 스타일에서 새 사전 설정 만들기를 선택합니다.

사전 설정에 이름을 지정하고("모바일 레이블이 있는 전체 중앙 VW 간격 메뉴") 사전 설정을 저장합니다.

#4 – 모바일 레이블이 있는 오른쪽 간격 메뉴

네 번째 메뉴 전역 사전 설정을 만들려면 행의 열 레이아웃을 0ne-fourth three-fourth 레이아웃으로 업데이트해야 합니다. 이것은 오른쪽에 메뉴 모듈을 포함하고 왼쪽 열에 로고 이미지를 위한 별도의 지점을 포함하는 사용자 정의 헤더 레이아웃을 모방합니다.

메뉴가 오른쪽 열에 있는지 확인하십시오. 그런 다음 메뉴 설정을 열고 요소 옵션을 업데이트하여 장바구니 아이콘과 검색 아이콘을 표시합니다.

디자인 탭에서 스타일을 업데이트합니다.

• 스타일: 왼쪽 정렬

다음으로 다음 링크 스타일 및 텍스트 정렬을 업데이트합니다.

• 활성 링크 색상: #ac3cf7
• 메뉴 텍스트 크기(데스크톱): 14px
• 텍스트 정렬: 오른쪽

이제 모바일의 햄버거 아이콘이 오른쪽에 있으므로 모바일에서 메뉴 레이블의 위치를 ​​조정해야 합니다. 그런 다음 몇 가지 메뉴 링크 CSS를 추가하여 링크가 간격을 두고 열/행의 오른쪽에 같은 높이로 배치되도록 합니다.

다음 사용자 정의 CSS를 추가하십시오.

CSS 이전(태블릿)

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
right:6px;
transform: translateY(-100%);

메뉴 링크 CSS:

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

스타일 4 결과

다음은 오른쪽 정렬 메뉴의 최종 결과입니다. 정렬을 더 잘 볼 수 있도록 행에 밝은 회색 배경을 추가했습니다.

메뉴 스타일 4를 글로벌 프리셋으로 추가하기

중복 섹션

메뉴 스타일을 전역 사전 설정으로 추가하기 전에 메뉴 모듈(스타일 4)이 포함된 전체 섹션을 복제하여 메뉴 스타일을 사용하여 다음 디자인을 바로 시작할 수 있도록 합니다.

현재 스타일에서 새 사전 설정 만들기

스타일 4를 전역 사전 설정으로 추가하려면 우리가 만든 스타일 4에 대한 원래 메뉴 모듈의 설정을 열고 사전 설정 드롭다운 링크를 클릭합니다.

현재 스타일에서 새 사전 설정 만들기를 선택합니다.

사전 설정에 이름을 지정하고("모바일 레이블이 있는 오른쪽 간격 메뉴") 사전 설정을 저장합니다.

#4 – 모바일 레이블이 있는 왼쪽 간격 메뉴

이 네 번째 메뉴 전역 사전 설정을 만들려면 행의 열 레이아웃을 0ne-fourth three-fourth 레이아웃으로 업데이트해야 합니다. 이것은 왼쪽에 메뉴 모듈을 포함하고 오른쪽 열에 로고 이미지(또는 CTA)를 위한 별도의 지점을 포함하는 사용자 정의 헤더 레이아웃을 모방합니다.

메뉴에 대한 설정을 열고 메뉴 링크에 대한 텍스트 정렬을 업데이트합니다.

• 텍스트 정렬: 왼쪽

그런 다음 모바일 메뉴 레이블을 조정하여 왼쪽의 햄버거 탐색 메뉴 위에 놓이도록 해야 합니다. 그리고 태블릿에 "direction:rtl"을 추가하여 모바일 아이콘이 모바일에서도 왼쪽에 정렬되도록 할 것입니다.

고급 탭에서 다음 사용자 지정 CSS를 업데이트합니다.

CSS 이전(태블릿):

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
left:6px;
transform: translateY(-100%);

주요 요소(태블릿):

direction:rtl;

메뉴 링크 CSS:

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

다음은 최종 결과입니다.

최종 결과

마지막 생각들

이러한 메뉴 모듈의 외부 스타일은 기본이지만 메뉴 레이아웃의 내부 프레임워크 디자인은 창의적인 프로세스를 시작하는 데 매우 유용합니다. 또한 이러한 프레임워크로 전역 사전 설정을 하면 프로세스 속도가 훨씬 빨라집니다. 메뉴 모듈을 사용자 정의하고 다음 프로젝트를 위한 고유한 사전 설정을 추가하는 더 많은 방법을 자유롭게 탐색하십시오.

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

건배!