워드프레스 아바다 테마에서 메가 메뉴 사용하기

워드프레스 베스트셀링 테마인 아바다에는 메가 메뉴 기능이 탑재되어 있습니다. 아바다 테마에서 제공되는 데모 중 하나인 University 데모를 로드하고 Events 메뉴에 마우스를 올려보면 그림과 같이 메가 메뉴로 표시됩니다.

위의 그림에서 Events 아래에 4개의 하위 메뉴 항목이 있으며, 각 하위 메뉴 항목에 별도의 위젯 영역이 할당되어 있습니다.

[ 이 글은 2022년 11월 1일에 최종 업데이트되었습니다. ]

Avada 테마에서 메가 메뉴를 구성하는 방법

아바다에서 메가 메뉴를 구성하려면 하려면 먼저 외모 > 메뉴에서 다음과 비슷하게 메뉴 구조를 만들도록 합니다.

상위 메뉴 항목(위의 그림에서는 COURSES)을 클릭하고 Avada Mega Options(아바다 메가 옵션) 아이콘을 클릭합니다.

그러면 아바다 메가 메뉴 옵션 창이 표시됩니다.

Avada Mega Menu(구 명칭 "Fusion Mega Menu")의 옵션을 Off(끄기)에서 On(켜기)으로 설정하면 숨겨진 옵션이 표시됩니다.

전체 폭으로 메가 메뉴를 표시하려는 경우 이전 버전에서는 Full Width Mega Menu(전체 너비 메가 메뉴)라는 옵션이 제공되었지만 현재 버전에서는 이 옵션이 없습니다. 대신 Mega Menu Wrapper Width 설정과 전역 옵션을 지정하여 메가 메뉴 컨테이너 너비를 조정할 수 있습니다. 자세한 정보는 별도의 글에서 다루도록 하겠습니다.

그리고 원하는 경우 Mega Menu Number of Columns(메가 메뉴 칼럼 수)를 조정할 수도 있습니다. 기본적으로 자동으로 설정되어 있습니다.

이제 하위 메뉴 항목 각각에 대하여 위젯 영역을 배정합니다. 이 작업을 수행하기 전에 먼저 각 위젯 영역에 위젯을 배치하도록 합니다. 가령 이미지나 텍스트 등을 적절히 배치할 수 있습니다.

위젯 영역이 추가로 필요한 경우 외모 > 위젯에서 Add New Widget Section(새 위젯 섹션 추가)을 클릭하여 새로운 위젯 영역을 하나 만들도록 합니다.

메가 메뉴에 표시할 위젯 영역에 적절한 위젯을 추가했다면, 각 하위 메뉴 항목에 해당 위젯 영역을 배정합니다.

하위 메뉴 항목(예: Business Seminar)에서 Avada Menu Options를 클릭합니다.

아바다 메가 옵션에서 다양한 옵션을 설정할 수 있습니다. 예를 들어, 아이콘을 선택하거나 Menu Highlight Label(강조 표시 레이블)을 추가할 수 있습니다.

아래로 내려서 Mega Menu Widget Area(메가 메뉴 위젯 영역)로 이동합니다.

Mega Menu Widget Area에서 원하는 위젯 영역을 선택하도록 합니다. 이외에 Mega Menu Thumbnail(메가 메뉴 썸네일)과 Mega Menu Background Image(메가 메뉴 배경 이미지) 등도 지정할 수 있습니다.

각 하위 메뉴에 대하여 이 작업을 수행하면 메뉴 메뉴 구성이 완료됩니다. 이제 확인해보면 구성한 대로 메가 메뉴가 표시될 것입니다.

개인적으로는 심플한 메뉴 구조를 선호합니다. 이 블로그에 적용된 GeneratePress 테마에서는 메가 메뉴 옵션을 제공하지 않지만 CSS를 사용하여 심플한 메가 메뉴를 구성할 수 있습니다. (Enfold, Newspaper 등 인기 유료 테마에서도 메가 메뉴 기능을 제공합니다.)

• 워드프레스 GeneratePress 테마 메가 메뉴 만드는 방법

메뉴와 SEO에 대한 내용은 다음 글을 참고해보시기 바랍니다.

• SEO(검색엔진최적화)에 유리한 웹사이트 메뉴 구조

참고로 부분적으로 번역된 아바다 언어 파일을 여기에서 다운로드할 수 있습니다.

참고

• 워드프레스 Divi 테마용 포케 레스토랑 레이아웃 팩 무료 다운로드
• 아바다 테마의 Avada Form 살펴보기 (컨택트 폼)