아바다(Avada) 메가 메뉴 설정

아바다 메가 메뉴(Avada Mega Menu)는 여러 열과 다양한 콘텐츠를 가질 수 있는 주 메뉴의 서브 메뉴입니다.

글로만 표현되는 메뉴와 달리 이미지를 통하여 시각적이고 역동적인 느낌을 전달할 수 있어서 방문자들에게 진한 인상을 남길 수 있습니다.

주의할 점은 기본 헤더를 사용할 때에는 메가 메뉴 빌더를 사용할 수 없기 때문에 메가 메뉴를 설정할 수 없습니다.

메가 메뉴를 사용하려면 기본 헤더 대신에 사용자 정의 헤더를 활용하여야 합니다.

메가 메뉴 빌더는 라이브러리에서 액세스할 수 있으며 페이지 빌더를 통하여 사용자 정의 메가 메뉴를 만들 수 있습니다.

이러한 메가 메뉴는 옵션을 통하여 항목에 적용되며 메가 메뉴 빌더에서 사용할 수 있는 전용 서브 메뉴 요소도 있습니다.

사용자 정의 헤더 만들기

기본 헤더 대신에 사용자 정의 헤더를 만들려면 워드프레스 메뉴 항목에서 Avada – Layout을 선택하고 Global Layout – Defualt Header로 들어가서 콘텐츠를 작성할 수 있는 인터페이스를 접하면 됩니다.

처음에는 빈 공간이지만 페이지 빌더를 사용하므로 컨테이너를 추가하고 꾸미고 싶은 디자인을 바탕으로 열과 요소들을 추가하여 사용자 정의 헤더를 만들 수 있습니다.

예시에서 사용자 정의 헤더에 추가된 콘텐츠 요소는 메뉴 위쪽에 날짜가 표시되고 소셜 링크 아이콘을 위치하였습니다.

메뉴 왼쪽에는 로고가, 오른쪽에는 검색 아이콘과 플라이 아웃 메뉴가 배치되도록 하였습니다.

이렇게 만들어진 사용자 정의 헤더는 기본 헤더를 대체함과 동시에 사용자 정의 헤더에는 메뉴 요소가 추가 되었기 때문에 기본 메뉴도 대체합니다.

아바다 메가 메뉴 만들기

Avada – Library에서 메가 메뉴를 새로 생성한 다음 사용자 정의 헤더를 만들 때와 마찬가지로 페이지 빌더를 통하여 콘텐츠를 작성하면 됩니다.

우선, 첫 번째 드롭 다운 박스 목록에서 메가 메뉴를 선택하고 아래 항목에 메가 메뉴의 이름(기입한 이름이 Categories)을 기입한 다음 Create Library Element를 클릭하여 새로운 메가 메뉴를 생성합니다.

이 작업이 완료되면 메가 메뉴 생성 시 기입한 이름으로 메가 메뉴 라이브러리 항목이 생성되고 이를 클릭하면 콘텐츠를 작성할 수 있는 인터페이스가 열립니다.

이 환경에서 원하는 열과 요소를 추가하여 콘텐츠를 작성합니다.

메가 메뉴는 유연성을 포함하고 있으며 하나 또는 여러 개의 열을 가질 수 있습니다.

Avada Studio에 있는 기존 디자인을 불러오기를 하거나 처음부터 완전히 새로 만들 수 있는 여러 메가 메뉴가 있습니다.

열을 선택하고 페이지 빌더를 사용하여 요소를 추가하는 것으로 콘텐츠를 작성하면 됩니다.

이때 메가 메뉴에서 추가할 수 있는 콘텐츠 요소 중 하나가 서브 메뉴입니다.

예시에서 작성된 메가 메뉴는 왼쪽에 서브 메뉴의 제목과 서브 메뉴가, 오른쪽에 인기 게시물 제목과 인기 게시물을 표시할 포스트 카드가 배치되어 있습니다.

서브 메뉴는 기본 메뉴와 거의 동일하지만 메가 메뉴 전용으로만 사용할 수 있습니다.

아바다 메가 메뉴 할당

메가 메뉴를 완성하면 Avada 메뉴 옵션을 통하여 메뉴를 할당합니다.

메가 메뉴를 할당할 메뉴에 서브 메뉴가 이미 있다면 굳이 삭제할 필요는 없습니다.

기존 서브 메뉴는 메가 메뉴가 할당되면 메뉴에 설정된 모바일 중단점으로  표시되기 때문입니다.

또는 중간 화면(태블릿)과 작은 화면(모바일)에 대하여 별도의 메뉴를 만들 수 있습니다.

메가 메뉴를 할당하려면 불러오려고 하는 서브 메뉴가 작성되어 있어야 합니다.

예시에서 작성된 서브 메뉴는 카테고리를 불러오기를 한 후 작성하였습니다.

이때 메뉴 설정 – 위치 표시에서 항목은 선택하지 않습니다.

Avada-Library에 생성된 메가 메뉴 인터페이스 환경 하에서 Submemu-menu 드롭 다운 박스 목록에서 서브 메뉴(작성된 서브 메뉴 이름이 Magazine Footer – Categories)를 선택합니다.

메뉴로 가서 주 메뉴의 항목 중에서 Categories 메뉴에 메가 메뉴를 할당할 것입니다.

주 메뉴에서 Categories-Avada menu Options를 클릭한 후 메뉴 설정 인터페이스 환경으로 들어가면 맨 위쪽에 메가 메뉴를 선택할 수 있는 드롭 다운 박스가 있습니다.

여기서 메가 메뉴인 Categories를 선택합니다.

메가 메뉴 할당 후 최종 결과물은 다음과 같습니다.

결과에 이를 때까지 과정은 복잡하였지만 카테고리의 특징을 잘 나타낸 메가 메뉴가 완성되었습니다.

의도한 대로 메뉴 위쪽에 날짜와 소셜 아이콘이 위치하고 메뉴 왼쪽은 로고가, 오른쪽에는 검색 아이콘과 플라이 아웃 메뉴가 정확하게 배치되어 있습니다.

또한, 카테고리 항목들이 서브 메뉴가 되었고 인기 게시물도 표현되어 있습니다.

마치며．．．

자체적으로 메가 메뉴를 구현할 수 있는 테마는 그리 많지 않습니다.

상용 플러그인이나 상용 페이지 빌더를 통해서 구현할 수 있는 고급 기능입니다.

하지만 아바다 테마는 테마 내에서 쉽게 구현할 수 있습니다.

소개한 과정은 기본 메뉴를 배제한 Global Layout 환경에서 구현되었으나 기본 메뉴 환경에서도 충분히 동일한 기능을 구현할 수 있습니다.

본 웹사이트도 Products와 Categories 메뉴는 Global Layout 환경이 아닌 기본 메뉴 환경에서 구현된 메가 메뉴입니다.

전자는 사용자 정의 하에서 다양한 디자인과 레이아웃이 가능하고 후자는 테마가 제공하는 다양한 옵션을 편하게 이용할 수 있다는 장점이 있습니다.

다만, 기본 메뉴 환경 하에서는 라이브러리에서 생성된 메가 메뉴를 불러올 수가 없기 때문에 위젯을 이용하여 구현하여야 합니다.

메가 메뉴는 웹사이트나 블로그에 신선한 느낌을 방문자들에게 선사할 수 있는 방법인 것은 맞지만 너무 지나치면 로딩 속도에 영향을 주기 때문에 주의를 기울여야 합니다.