엘리멘터(Elementor)로 한국형 메가 메뉴 만들기

메가 메뉴는 SEO적인 측면에서 그리 바람직하지 않지만 많이 사용되고 있어 아바다 등 인기 테마에서는 메가 메뉴 기능을 기본적으로 제공합니다. 그리고 엘리멘터 프로에서도 메가 메뉴 기능이 제공됩니다. 하지만 일반적인 메가 메뉴와 달리 우리나라에서는 모든 최상단 메뉴에 대하여 동일한 하위 메뉴 항목(메가 메뉴 항목)이 표시되도록 하는 방식이 널리 사용되고 있습니다.

엘리멘터를 사용할 경우 ElementsKit(엘리먼츠킷)을 사용하면 비슷하게 구현이 가능하지만, 원하는 대로 구현하려면 약간의 조정이 필요합니다.

고객의 요청에 따라 Elementor Pro 외의 다른 추가적인 플러그 없이 한국형 메가 메뉴를 구현하는 작업을 맡았습니다. 가급적 쉽게 응용할 수 있도록 만들려고 합니다. 구글링 해보면 ElementsKit 플러그인을 사용하여 구현하는 방법이 나오지만 다소 복잡한 편이네요.

엘리멘터(Elementor)로 한국형 메가 메뉴 만들기

우선 엘리멘터 프로의 테마 빌더에서 헤더 템플릿을 만들어 대강 뼈대를 구성해 보았습니다.

메뉴 레이아웃은 엘리멘터 내에서 제어할 수 있고, 최상단 메뉴에 마우스를 올리면 메가 메뉴가 펼쳐지도록만 우선 구현했습니다.

메뉴가 펼쳐지는 속도가 너무 느리다는 피드백이 있어서 그런 세부적인 부분은 클라이언트 요구사항을 반영하여 수정할 생각입니다.

구현하는 방법은 다양하겠지만 해당 기능을 제공하는 플러그인이 있다면 가장 간단할 것입니다. 일반적인 메가 메뉴 기능을 제공하는 플러그인들이 있고, Elementor Pro 내에서도 메가 메뉴 기능을 제공하지만 고객이 원하는 방식이 아니라서 커스텀이 필요할 수 있습니다.

플러그인 중에서는 그나마 한국형 메가 메뉴에 가까운 기능을 제공하는 것으로 ElementsKit이라는 플러그인이 있습니다. 이 플러그인은 현재 100만 개 이상 설치되어 있고, 유료 버전도 있습니다.

이런 플러그인을 사용하면 작업이 수월해지고 시간을 단축할 수 있다는 장점이 있습니다. 하지만 추가로 설치되는 플러그인이기 때문에 사이트 속도를 느리게 할 우려가 있습니다. 또, 간혹 플러그인간 충돌을 일으키기도 합니다. 지금은 해결된 것으로 알고 있지만, 며칠 전까지 이 플러그인이 설치된 사이트에서 "gutenkit-template-library" 플러그인이 오류가 발생했으며 실행할 수 없습니다 문제가 발생하기도 했습니다.

"gutenkit-template-library" 플러그인이 오류가 발생했으며 실행할 수 없습니다 문제 - 워드프레스 기본

또한, 미리 만들어진 기능을 뜯어 고치는 것이 경우에 따라 새로 만드는 것보다 어려울 수도 있습니다.

엘리멘터 프로의 기능만으로 만들고 싶은 경우 헤더 템플릿 편집 화면에서 메뉴 부분(①)과 콘텐츠 부분(②)으로 나누고, 메뉴 부분에 마우스가 올라가면 콘텐츠 섹션이 표시되는 형식으로 시도하면 비교적 수월할 것입니다.

메뉴가 펼쳐지거나 접히는 방식 등 세부적인 사항은 클라이언트의 요구 사항에 따라 구현해야 할 것입니다.

위의 그림과 같이 시도하면 메뉴 부분과 콘텐츠 부분을 모두 엘리멘터로 만들어서 제어할 수 있으므로 추후 유지 관리가 수월할 것입니다.

요즘은 챗GPT를 사용하면 기능 추가가 예전보다는 수월할 것입니다. 요구 사항을 자세히 설명해 주면 챗GPT에서 알아서 코드를 만들어줍니다. 다만, 튜닝하는 것이 쉽지 않을 수 있습니다. 그런 부분은 생성된 코드를 분석하여 문제가 되는 부분을 직접 수정하거나 수정을 요구할 수 있을 것입니다.

워드프레스나 웹호스팅과 관련하여 문제 해결에 어려움을 겪고 있는 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다.

2024년 7월 28일 업데이트

엘리멘터 프로에서 스크롤 시 헤더를 상단에 고정하도록 설정하여 메가 메뉴 코드를 변경된 설정에 맞게 수정하는 작업을 진행했습니다.😄

엘리멘터의 메가 메뉴 기능 사용 방법에 대하여 다음 글을 참고하세요.

엘리멘터(Elementor) 메가 메뉴 만들기 - 워드프레스 기본 - 워드크래커

이를 응용하여 아스트라 테마 등에서도 한국형 메가 메뉴를 구성할 수 있습니다.

https://avada.tistory.com/3418

워드프레스 아스트라(Astra) 테마: 한국형 메가 메뉴 만들기

참고

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 vs. 카페24 비교 (Cloudways vs. Bluehost vs. Cafe24)

https://avada.tistory.com/3409

Divi 테마 스타터 사이트 비영리기관/스파용 템플릿 공개 - 데모 템플릿 로드하기