메가 메뉴는 인기 있는 디자인 요소로 사이트 웹 제공하면서 우아함의 폭발 방문자 추가 탐색 계층. Divi에 메가 메뉴를 추가하는 방법에는 여러 가지가 있습니다. 내가 사용한 가장 쉬운 방법 중 하나는Divi Mega Pro라는 타사 플러그인 .

Divi Mega Pro를 사용하면 Divi Builder를 사용하여 메가 메뉴를 쉽게 만들 수 있습니다. 각 메뉴는 CSS 클래스를 사용하여 모든 요소에 추가할 수 있습니다. 즉, 메뉴의 모든 링크에 Divi 레이아웃을 추가할 수 있지만 더 나아가 CSS 클래스를 추가하기만 하면 Divi 레이아웃의 모든 요소에 추가할 수 있습니다.

상점 모듈, 이미지, 슬라이더, 포트폴리오, 아이콘, 광고 문구, 동영상, 블로그 등으로 메뉴 및 팝업을 만드는 데 적합합니다. Extra와도 작동합니다.

Mega Pro 메가 메뉴 만들기

Divi Mega Pro 메뉴가 대시보드 메뉴에 추가됩니다. 여기에서 라이센스 키를 입력하고 생성한 메뉴를 보고 새 메뉴를 생성할 수 있습니다. 새 메뉴 추가를 클릭하면 메뉴 게시 유형에 대한 편집기가 표시됩니다. 화면은 단순하지만 여기에서 진행되는 일이 많습니다.

발행자 – Divi Builder를 사용하여 메가 메뉴 또는 툴팁을 만들 수 있습니다.

메가 프로 배경 – 배경 및 글꼴 색상을 선택할 수 있습니다.

위치 표시 – 모든 페이지를 선택하거나 특정 페이지의 이름을 지정한 다음 예외를 입력합니다.

메가 프로 애니메이션 – 애니메이션을 선택합니다. 오프셋, 이동, 원근감, 페이드 또는 배율 조정 중에서 선택합니다.

메가 프로 트리거 – CSS 선택기로 트리거를 추가합니다. 저장하면 메뉴 항목, 모듈, 행 또는 섹션의 CSS 클래스 필드에 붙여넣을 CSS 클래스가 표시됩니다. 이것은 메뉴를 표시하기 위해 클릭하거나 마우스를 가져가는 것입니다. 메뉴 항목뿐만 아니라 무엇이든 트리거로 사용할 수 있습니다. 즉, Divi Mega Pro를 사용하여 팝업이나 툴팁을 만들 수도 있습니다.

메가 프로 디스플레이 설정 : 표시 방향(위쪽 또는 아래쪽)을 선택하고 위쪽 및 아래쪽 여백을 픽셀 단위로 입력하고 너비 백분율을 선택한 다음 화살표를 활성화합니다. 화살표를 활성화하면 화살표 유형(삼각형 또는 원형)을 선택하고, 색상을 선택하고, 너비와 높이를 설정하고, 화살표를 미리 볼 수 있는 더 많은 사용자 정의가 표시됩니다.

사용자 정의 닫기 버튼: 데스크톱 또는 모바일에서 닫기 버튼을 활성화하고 닫기 버튼을 사용자 지정합니다. 활성화하면 텍스트 색상, 배경색, 글꼴 크기, 테두리 반경, 패딩 및 표시에 대한 사용자 정의가 미리보기됩니다.

메가 프로 추가 설정 – 트리거 유형(호버 또는 클릭), 종료 유형(호버 또는 클릭)을 선택하고 종료 지연을 입력합니다.

Divi Mega Pro 모델

개발자는 Divi Mega Pro에 대한 여러 템플릿을 제공했습니다. 플러그인을 구매하면 플러그인 레이아웃 템플릿 탭 아래 계정에서 이러한 템플릿을 사용할 수 있습니다. 메가 메뉴 디자인을 시작하는 데 유용합니다. 나는 내 예제에서 그들 중 몇 가지를 사용할 것입니다.

디비 메가 프로 메뉴

메가 메뉴를 생성하면 목록에 나타납니다. 여기에서 메뉴를 편집, 빠른 편집 또는 삭제할 수 있습니다. 또한 검색, 날짜별 필터링, 상태별 보기 등을 할 수 있습니다. 또한 고유한 Mega Pro 클래스를 제공하므로 클래스를 얻기 위해 각 클래스를 여는 대신 여기에서 복사할 수 있습니다.

클래스를 복사할 때 공백 없이 붙여넣으십시오. 그렇지 않으면 페이지의 모든 메가 메뉴가 더 이상 작동하지 않습니다.

추가하기 쉽지는 않겠지만 복사 및 편집 기능이 있으면 편리할 것입니다. 재사용을 위해 Divi 레이아웃을 라이브러리에 저장할 수 있지만 여기에는 주변 설정이 포함되지 않습니다.

트리거 추가

Mega Pro Triggers 필드에서 고유한 Mega Pro 클래스를 볼 수 있습니다. 트리거로 사용하려는 요소의 CSS 클래스 필드에 복사하여 붙여넣습니다.

메뉴 항목에 CSS 클래스 필드를 추가하려면 CSS 클래스를 활성화해야 합니다. 메뉴 화면에서 선택 화면 옵션 CSS 클래스를 활성화합니다.

CSS 클래스를 메뉴 필드에 붙여넣습니다. 이제 이 메뉴 항목은 가리키면 메가 메뉴를 표시하고 클릭하면 페이지로 이동합니다.

Divi Mega Pro는 메뉴 링크 옵션의 옵션이기도 합니다. 아무데도 가지 않는 메뉴 항목을 메뉴에 추가하는 데 좋습니다. 다른 메뉴 항목과 마찬가지로 CSS 클래스를 추가합니다.

메가 메뉴의 연락처 섹션

마우스를 올리면 메뉴가 열립니다. 원하는 경우 언제든지 연락처 링크를 클릭하여 연락처 페이지를 열 수 있습니다. 메가 메뉴만 표시하려면 Contact Main Menu 링크를 사용하고 이름을 바꿀 수 있습니다(위의 예와 같이).

이번에는 Divi Builder를 사용하지 않고 배경 및 디스플레이 설정을 사용하여 색상을 약간 조정했습니다. 메뉴 하단에 막대를 추가합니다.

메뉴 열이 있는 간단한 클릭 유도 문안

이것은 여러 열을 추가하는 템플릿 중 하나입니다. 배경색과 글자색을 조정합니다. 나는 또한 화살표를 추가하고 너비를 75%로 만들었습니다.

배경 및 글꼴 색상 옵션은 눈에 띄게 만들기 위해 조금 더 추가됩니다. 메뉴를 화면 오른쪽에 배치하는 기본 정렬을 그대로 두었습니다. 설정에서 위치를 조정할 수 있습니다.

탭

탭 템플릿에는 호버 효과를 만드는 jQuery가 있는 코드 모듈이 포함되어 있습니다.

탭에 콘텐츠를 추가하고 사이트에 맞게 조정했습니다. 왼쪽의 각 링크는 메뉴의 더 큰 부분 내에서 다른 탭을 보여줍니다.

정보 풍선 구성

이를 위해 호버에서 작은 팝업이 열리도록 설명에 CSS 클래스를 추가했습니다. 팝업은 아래에 그림자가 있는 이미지일 뿐입니다.

위의 이미지에서 내 마우스는 LIVE WEBSITE라는 단어 위에 있습니다. 아직 위치를 조정하지는 않았지만 원하는 위치에 나타나게 하기 쉽습니다.

이를 위해 일부 텍스트가 있는 이미지를 표시하는 팝업을 만들었습니다. 표시 방향을 아래쪽으로 설정하고 추가하려는 이미지 옆에 표시되도록 -300의 여백을 추가했습니다.

마우스를 가져가면 이미지의 왼쪽과 상단에 팝업이 나타납니다. 투명 배경색, 테두리색, 채우기, 둥근 윤곽선을 추가했습니다.

라이센스 및 문서

선택할 수 있는 XNUMX가지 라이선스가 있습니다.

• 단일 사이트 – 연간 $15
• 29개 사이트 – 연간 $XNUMX
• 무제한 사이트 – 연간 $59
• 평생 무제한 – 129회 $XNUMX

문서 기능에 대해 알려주고 플러그인 사용 방법을 단계별로 설명하는 사이트의 기사와 비디오 데모로 제공됩니다.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”플랫” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI 테마 다운로드 [/vcex_button][/vc_column][vc_column 너비=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” 레이아웃=”확장” align=”center” font_family = ”Raleway” font_weight=”700″ style=”플랫” ​​custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]다운로드 TEMPLATES DIVI[/vcex_버튼][/vc_열][/vc_row]

다른 Divi 자습서

• 레스토랑 이용 디비 테마 5 웹 사이트
• Divi WooCommerce 제품에 텍스트를 추가하는 방법
• Divi 페이지 간의 메뉴 색상을 변경하는 방법
• Divi로 블로그 그리드를 개인화하는 방법
• 어떻게 워드 프레스의 역할 디비 편집기를 사용하는
• 전체 화면 Divi 슬라이더를 만드는 방법
• Divi 페이지 간의 메뉴 색상을 변경하는 방법
• Divi에 대해 잘 모르는 기능
• WordPress에 Divi Builder를 사용하는 방법
• Divi 비디오 스크롤 모듈을 사용하는 방법
• Divi Builder Flip 모듈을 사용하는 방법
• Divi Builder에서 회원 평가 모듈을 추가하는 방법
• Divi 텍스트 모듈을 사용하는 방법
• Divi에서 슬라이더를 만드는 방법
• Divi 사용자 역할을 편집하는 방법
• Divi Social Media 모듈 사용 방법
• 테마 WordPress Divi에서 상점 모듈을 사용하는 방법
• Divi 사이드 바 모듈을 사용하는 방법
• Divi Price 테이블 모듈을 사용하는 방법
• Divi 발행물의 제목 모듈을 사용하는 방법
• Divi의 비디오 모듈을 추가하는 방법
• 기사 탐색 모듈을 사용하는 방법
• Divi 검색 모듈 사용 방법
• Divi 지갑 모듈 사용 방법
• Divi Builder에서 person 모듈을 사용하는 방법
• Divi 필터와 함께 Wallet 모듈을 사용하는 방법
• 전체 너비 슬라이더 모듈을 사용하는 방법
• Divi Builder 이미지 모듈을 사용하는 방법
• Divi Builder의 전체 너비 탐색 모듈을 사용하는 방법
• 이미지 갤러리 모듈을 사용하는 방법
• Divi Builder Full-Width Module을 사용하는 방법
• Divi Full Width 포트폴리오 모듈을 사용하는 방법
• Divi 전폭 헤더 모듈 사용 방법
• Divi Counter Module 사용 방법
• Divi Builder에서 아티클 슬라이더를 사용하는 방법
• Divi Email Optin 모듈을 사용하는 방법