이 튜토리얼에서는 Divi의 전체 너비 메뉴 모듈을 사용하여 드롭 다운 메뉴 버튼을 만드는 방법을 보여줍니다. 이를 위해 먼저 WordPress에서 메뉴를 생성합니다. 그런 다음 Divi의 전체 너비 메뉴 모듈을 사용하여 Divi 빌더와 약간의 사용자 지정 CSS를 사용하여 사용자 지정 스타일로이 메뉴를 표시합니다. 그 결과 실용적이고 세련된 드롭 다운 메뉴 버튼이 생겼습니다.
시작하자.
측량
다음은이 튜토리얼에 통합 할 드롭 다운 메뉴 버튼에 대한 개요입니다.
시작하려면 무엇이 필요합니까?
시작하려면 아직 설치하지 않았다면 설치하고 활성화하십시오. 디비 테마 설치(또는 사용하지 않는 경우 Divi Builder 플러그인 디비 테마). 처음에 Divi 빌더를 사용하여 드롭다운 메뉴 버튼을 디자인합니다.
그게 다야!
워드 프레스에서 메뉴 만들기
Divi Builder로 드롭 다운 메뉴를 만들기 전에 먼저 전체 너비 메뉴 모듈에 사용할 WordPress 메뉴를 만들어야합니다. 이렇게하려면 WordPress 대시 보드로 이동하여 Appearance> Menus로 이동합니다. 그런 다음 새 메뉴 만들기 링크를 클릭하고 메뉴 이름을 입력 한 다음 "메뉴 만들기"버튼을 클릭하여 새 메뉴를 만듭니다.
지금은 링크 텍스트와 함께 URL의 자리 표시 자로 "#"을 사용하여 사용자 정의 링크를 만들 수 있습니다.
최상위 메뉴 항목에 세 개의 하위 메뉴 항목이있는 "자세히 알아보기"링크가 있도록 메뉴 항목을 구성합니다.
그런 다음 메뉴를 저장하십시오.
Divi 전폭 메뉴 모듈로 드롭 다운 메뉴 버튼을 만드는 방법
메뉴가 생성되면 Divi로 드롭 다운 메뉴 버튼 디자인을 시작할 수 있습니다. 프로젝트를 시작하려면 WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드 (비주얼 빌더)에서 페이지를 편집합니다.
그 후에 Divi에서 디자인을 시작할 빈 캔버스가 생깁니다.
가짜 콘텐츠 만들기
먼저 기본 표준 섹션에 한 열의 행을 추가합니다.
텍스트 모듈 추가
그런 다음 다음 내용이 포함 된 줄에 텍스트 모듈을 추가하십시오.
Divi 메뉴 콘텐츠가 여기에 표시됩니다. 이 텍스트를 인라인 또는 모듈 콘텐츠 설정에서 편집하거나 제거합니다. 또한 모듈 디자인 설정에서이 콘텐츠의 모든 측면의 스타일을 지정할 수 있으며 모듈 고급 설정에서이 텍스트에 사용자 정의 CSS를 적용 할 수도 있습니다.
그런 다음 다음과 같이 디자인 매개 변수를 업데이트하십시오.
패딩 섹션
그런 다음 다음 항목으로 섹션 설정을 업데이트하십시오.
- 패딩 : 0px 다운
줄 간격과 테두리
단면 채우기가 업데이트 된 후 선 설정을 열고 채우기 및 약간의 테두리를 지정하십시오.
- 실내 장식품 : 상단에 10vw, 하단에 10vw, 왼쪽에 5vw, 오른쪽에 5vw
- 테두리의 너비 : 1px
드롭 다운 메뉴 버튼 만들기
드롭 다운 메뉴 버튼을 만들기 위해 전체 너비 메뉴 모듈을 사용합니다. 이렇게하면 이전에 만든 메뉴를 추가 할 수 있습니다.
전각 메뉴 추가
전각 메뉴 모듈을 작성하려면 현재 표준 섹션 아래에 새로운 전각 섹션을 추가하십시오.
그런 다음 전각 메뉴 모듈을 라인에 추가하십시오.
전체 너비 메뉴 설정 팝업 창 (콘텐츠 아래)에서 드롭 다운 메뉴를 사용하여 표시 할 메뉴를 선택합니다. 이전에 만든 "드롭 다운 버튼 메뉴"라는 메뉴와 동일해야합니다.
그런 다음 메뉴의 기본 흰색 배경색을 제거하십시오.
전각 메뉴 모듈이있는 메뉴를 추가했으면 설정을 저장하십시오. 디자인을 마치기 위해 잠시 후에이 모듈로 돌아올 것입니다. 그러나 지금은 전체 너비 섹션에 배경을 추가합니다.
전체 너비 섹션의 디자인 업데이트
전각 섹션의 설정을 열고 다음을 업데이트하십시오.
- 왼쪽 배경 그라데이션 : # 0047d6
- 오른쪽 배경 그라데이션 색 : # 45b2ff
- 최대 너비 : 240px
- 섹션 정렬 : 중심
Divi의 기본 드롭 다운 메뉴 너비와 일치하므로 최대 섹션 너비를 240px로 설정했습니다. 또한 데스크톱 및 모바일의 버튼에 적합한 크기입니다.
- 둥근 모서리 : 5px
고급 탭에서 다음 CSS 클래스, 오버플로 및 Z 인덱스를 추가합니다.
- CSS 클래스 : 드롭 다운 버튼
- 수평 오버플로 : 표시
- 수직 오버플로 : 표시
- Z 색인 : 14
나중에이 섹션에서 외부 CSS를 대상으로 할 수 있도록 CSS 클래스가 필요합니다. 드롭 다운 메뉴를 볼 수 있도록 오버플로를 표시하도록 설정해야합니다. Z 색인은 페이지의 다른 모든 콘텐츠 위에 드롭 다운을 유지하는 데 도움이됩니다.
풀폭 메뉴 디자인
이제 Fulwidth 메뉴 모듈을 디자인 할 준비가되었습니다. 전각 메뉴 모듈 설정을 열고 다음을 업데이트하십시오.
- 전각 메뉴 링크 만들기 : 예
- 드롭 다운 텍스트 색상 : #ffffff
- 모바일 메뉴 텍스트의 색상 : #ffffff
- 텍스트의 정렬 : 중심
- 드롭 다운 메뉴의 배경색 : # 45b2ff
- 드롭 다운 메뉴 줄의 색상 : #ffffff
- 메뉴 배경색 : #45b2ff
- 글꼴 메뉴 : 반응 축없이 인코딩
- 폰트 메뉴 무게 : 세미 볼드
- 메뉴 텍스트 색상 : #ffffff
- 메뉴 텍스트 크기 : 16px
- 메뉴 간격 : 2px
- 드롭 다운 메뉴의 애니메이션 : 확장
드롭 다운 버튼 배치
버튼이 아래쪽 테두리와 겹치려면 버튼 높이의 정확히 절반 인 음의 위쪽 여백을 추가해야합니다.
- 여백 : -40.5px 높음
보시다시피, 호버 공간은 아직 전체 버튼 영역을 차지하지 않으며 드롭 다운 메뉴는 여전히 오른쪽에 있습니다. 이 문제를 해결하기 위해 사용자 정의 CSS를 추가 할 수 있습니다.
사용자 정의 CSS 추가
사용자 정의 CSS를 추가하기 전에 CSS ID "드롭 다운"을 모듈이 아닌 전체 너비 섹션에 추가하십시오.
CSS ID가 없으면 아래 CSS가 작동하지 않습니다.
사용자 정의 CSS를 추가하려면 페이지 설정을 열고 다음 코드를 사용자 정의 CSS 입력 상자에 붙여 넣으십시오.
.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top : 0px! Important; } .dropdown-button .fullwidth-menu li> a {padding-bottom : 0px; 라인 높이 : 81px; } .dropdown-button .fullwidth-menu li a {padding : 6px 0px; 라인 높이 : 1.6em; } .dropdown-button .et_mobile_menu li a : hover, .nav ul li a : hover, .dropdown-button .fullwidth-menu a : hover {opacity : 1; } .dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {패딩 : 0 0! 중요; } .dropdown-button .fullwidth-menu li {디스플레이 : 블록; } .dropdown-button .fullwidth-menu .menu-item-has-children> a : first-child : after {right : 20px; }
최종 결과는 다음과 같습니다
마지막 생각
Divi의 전체 너비 메뉴 모듈을 사용하여 드롭 다운 메뉴 버튼을 만드는 데 몇 가지 주요 단계가 필요합니다. 먼저 모듈에 통합 할 메뉴를 WordPress에서 만듭니다. 그런 다음 Divi 빌더를 사용하여 원하는대로 전체 너비 메뉴 모듈의 스타일을 지정합니다. 그런 다음 사용자 지정 CSS를 추가하여 데스크톱과 모바일 모두에서 디자인을 다듬습니다. 그 결과 데스크톱 마우스 오버 및 모바일 클릭을 위해 펼쳐진 멋진 (유용한) 드롭 다운 메뉴가 생겼습니다. 이것이 여러분의 디자인 툴킷에 유용한 추가 기능이되기를 바랍니다.
