엘리멘터(Elementor) 메가 메뉴 만들기

메가 메뉴(Mega Menu)를 사용하면 홈페이지에 멋진 메뉴를 유연하게 추가할 수 있습니다. 메가 메뉴가 SEO적인 측면에서는 그리 바람직하지 않지만 많이 사용되고 있기 때문에 아바다, 뉴스페이퍼 등 인기 워드프레스 테마에 메가 메뉴 기능이 탑재되어 있습니다. 엘리멘터 프로(Elementor Pro)에도 메가 메뉴 기능이 제공되므로 별도의 메가 메뉴 플러그인을 설치할 필요가 없이 이 기능을 사용할 수 있습니다.

이 글에서는 Elementor Pro에서 제공하는 메가 메뉴 기능에 대하여 살펴보겠습니다. 테마나 플러그인에서 제공하는 메가 메뉴 기능은 우리나라에서 많이 사용되는 한국형 메가 메뉴와는 약간 차이가 있습니다. 한국형 메가 메뉴를 구현하는 방법에 대해서도 간단히 다루어보겠습니다.

엘리멘터 프로를 사용하는 경우 테마 빌더의 헤더 템플릿에서 메가 메뉴 기능을 적용할 수 있습니다.

메가 메뉴 기능을 사용하기 위해서는 워드프레스 관리자 페이지 » Elementor » 설정 » 기능 탭에서 다음 기능을 활성화해야 합니다.

플렉스박스 컨테이너 (Flexbox Containers)
중첩된 요소 (Nested Elements)
메뉴 (Menu)

1 워드프레스 관리자 페이지 » 템플릿 » Theme Builder로 이동하여 헤더(Header) 템플릿을 만들도록 합니다.

이미 만든 기존의 헤더 템플릿을 사용하려면 해당 템플릿의 오른쪽 맨 끝에 있는 Edit을 눌러 편집합니다.

2 두 가지 메뉴 위젯이 있습니다: WordPress Menu & Menu. 메가 메뉴 기능을 구현하려면 Menu 위젯을 사용합니다. Menu 요소를 원하는 위치로 드래그합니다.

3 Menu 편집에서 아이템 추가 버튼을 눌러 최상위 메뉴 항목으로 사용할 항목을 추가합니다.

4 각 메뉴 항목에 대하여 Title (메뉴 제목), Link (링크 설정) 등을 적절히 지정합니다. 최상위 메뉴에는 링크를 적용하지 않는 경우가 많으므로 링크를 설정하지 않아도 됩니다. 아이콘 등도 설정할 수 있습니다.

개별 메뉴 항목에 대하여 메가 메뉴 기능을 활성화할 수 있습니다. 메가 메뉴로 작동하도록 하려면 Dropdown Content 옵션을 활성화하도록 합니다.

5 Dropdown Content 옵션을 활성화하면 해당 메뉴 항목 옆에 화살표 기호가 표시됩니다. 화살표를 클릭하면 아래에 콘텐츠 영역이 표시됩니다. Drag widgets here에 표시된 영역에 원하는 위젯을 추가하여 콘텐츠를 만들 수 있습니다.

6 콘텐츠 영역에는 해당 최상위 메뉴에 대한 서브메뉴를 추가하거나 이미지 등을 자유롭게 추가할 수 있습니다.

예를 들어, 아래와 같이 컬럼으로 나누고 각 컬럼에 워드프레스 메뉴를 추가할 수 있습니다.

WordPress Menu 위젯을 추가한 경우 메뉴를 지정하고 레이아웃 등을 설정합니다. 스타일 탭에서 메뉴의 스타일을 커스텀할 수 있습니다.

여기부터는 엘리멘터 사용법과 관련이 되어 있습니다. 엘리멘터에 익숙한 경우 원하는 대로 스타일을 만들 수 있습니다.

7 완료되면 저장하고 표시 조건에 헤더 템플릿을 표시할 페이지 등을 지정합니다. Entire Site를 선택하면 해당 메뉴가 전체 사이트에 표시됩니다.

사이트를 새로 고침하면 헤더가 메가 메뉴로 작동할 것입니다. (변경 사항이 적용되지 않으면 캐시를 삭제하세요.)

해당 메뉴에 마우스를 올리면 콘텐츠가 아래로 펼쳐집니다. 배경색을 변경하거나 배경에 투명도를 적용할 수도 있습니다.

엘리멘터에서 한국형 메가 메뉴 만들기

우리나라에서는 최상위 메뉴에 마우스를 올리면 전체 소메뉴(서브 메뉴)가 표시되도록 하는 형식의 메뉴가 많이 사용됩니다.

위와 같은 모양으로 메뉴가 작동하도록 하고 싶은 경우, 엘리메터에서는 ElementsKit(엘리먼츠킷)이라는 추가 플러그인을 사용할 수 있습니다.

하지만 생각처럼 간단하지 않고 원하는 식으로 작동하도록 하려면 추가적인 코딩 작업이 필요할 수 있습니다. 이런 플러그인으로 만든 메가 메뉴를 제어하는 것은 조금 어려울 수 있습니다.

ElementsKit과 같은 추가적인 애드온 플러그인을 사용할 경우 장단점이 있습니다.

엘리멘터의 기능을 확장하여 사이트 제작 시간과 비용을 절감할 수 있습니다.
사이트 속도에 영향을 미칠 수 있습니다.
다른 플러그인과 충돌을 야기할 수 있습니다.

플러그인 간 충돌은 다른 플러그인들에게도 해당되므로 이 부분은 큰 문제가 안 될 수 있을 것입니다. 엘리멘터에서 더 많은 기능을 사용하여 사이트 제작 시간과 비용을 절감할 수 있지만, 한편으로는 사이트 속도에 영향을 미칠 수 있으므로 사용 여부를 신중하게 결정하시기 바랍니다.

엘리멘터 프로의 헤더 템플릿에서 직접 기능을 구현하는 것을 고려할 수 있습니다. 가능한 경우 엘리멘터 자체의 기능을 사용하여 구현하는 것이 추후 유지 관리 시에 유리할 수 있고, 사이트 속도에 대한 영향도 최소화할 수 있을 것입니다. (추가 플러그인을 사용하는 경우 추후에 해당 플러그인이 충돌이나 업데이트 문제 등으로 사용할 수 없게 될 수도 있습니다.)

💡Elementor Pro 플러그인에 대한 자세한 정보

그림과 같이 최상위 메뉴와 콘텐츠(서브메뉴) 영역을 만들고, 최상위 메뉴의 어느 항목에 마우스를 올리더라도 동일한 콘텐츠가 표시되도록 코드를 추가할 수 있을 것입니다.

최상위 메뉴에는 Menu 위젯이나 워드프레스 메뉴 위젯 중에서 원하는 것을 사용할 수 있습니다. Menu 위젯을 사용하는 경우 Dropdown Content 옵션은 비활성화합니다.

콘텐츠 영역에는 워드프레스 메뉴나 이미지, Posts 등 원하는 위젯을 배치할 수 있습니다. 위에서는 예시로 워드프레스 메뉴만 배치했습니다.

디자인 » 메뉴에서 각 서브 메뉴를 개별적으로 만들어 지정할 수 있습니다. 예를 들어, 상기 영상에서는 예시로 최상위 메뉴에 Top Menu를 배치하고, 각 컬럼에 서브메뉴(SubMenu1 ~ Submenu6)를 배치했습니다.

최상위 메뉴와 아래의 소메뉴들의 위치가 동일하도록 조정하는 것도 가능합니다. 이 부분은 엘리멘터 사용법과 관련됩니다. 아래 그림과 같이 각 서브메뉴에 대하여 고급 탭 » 레이아웃 섹션에서 여백(Margin)과 패딩(Padding)을 설정하여 위치를 조정합니다.

맨 오른쪽의 사슬 모양의 아이콘을 해제하면 상단, 오른쪽, 하단, 왼쪽 여백/패딩을 개별적으로 지정할 수 있습니다. 이 아이콘이 활성화되어 있으면 상하좌우 여백/패딩이 동일한 값을 지정됩니다.

또한, 헤더가 스크롤 시 상단에 고정(Sticky)로 되도록 하는지 여부에 따라 코드를 적절히 작성해야 합니다. 헤더를 상단에 고정하면 고려할 사항이 많아져서 코드가 조금 더 복잡해질 것입니다.

저는 클라이언트의 요청으로 한국형(?) 메가 메뉴 구현을 부탁 받아서 진행했습니다. 처음에는 단순하게 생각했지만, 헤더를 고정하는 등 추가적인 사항을 고려하다 보니 코드가 조금 복잡해지네요.

챗GPT에 원하는 사항을 요청하면 기본적인 코드를 만들 수 있을 것입니다.

📍엘리멘터나 Astra, GeneratePress 테마 등에서 한국형 메가 메뉴를 구성하는 데 어려움을 겪거나 워드프레스 또는 웹호스팅 관련 문제 해결이 필요한 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다.

유용한 메뉴 관련 플러그인

전체 메뉴 항목(최상위 메뉴 및 소메뉴)이 포함된 메뉴를 사용하는 경우, 위의 유튜브 영상과 같이 작동하도록 하려면 최상위 메뉴와 소메뉴를 분리하여 별도로 만들어야 할 수 있습니다.

메뉴 항목이 많은 경우 다음과 같은 두 가지 메뉴 플러그인이 유용합니다.

1 메뉴 복제 플러그인 Duplicate Menu

Duplicate Menu는 기존 메뉴를 복제하여 새로운 메뉴를 만들어 줍니다.

2 메뉴 항목 제거 플러그인 Easy remove item menu

Easy remove item menu는 메뉴 항목을 삭제하는 플러그인입니다. 메뉴 항목을 삭제하려면 조금 번거로울 수 있습니다. 이 플러그인을 사용하면 개별 메뉴 항목 또는 서브 메뉴 항목을 포함한 메뉴 항목을 쉽게 제거할 수 있습니다. 메뉴 제거 작업이 한결 수월해집니다.

아래 그림에서 X를 클릭하면 하나의 메뉴 항목이 삭제되고, XX를 누르면 해당 메뉴 항목과 함께 하위 메뉴 항목까지 함께 삭제됩니다. 하위 메뉴 항목이 많은 경우에 쉽게 삭제가 가능합니다.

이 플러그인은 4년 넘게 업데이트가 안 되고 있지만, 최신 워드프레스와 PHP 버전(PHP 8.3)에서 잘 작동합니다.

이러한 플러그인은 사용 시에만 잠깐 설치하여 사용하고, 평소에는 삭제하는 것을 고려하세요.