엘리멘터에서 한국어 메가 메뉴를 구현하는 방법에 대하여 살펴본 적이 있습니다. 최상위 메뉴 위에 마우스를 올리면 전체 메뉴가 펼쳐지도록 하는 메뉴가 우리나라에서 많이 이용되고 있습니다.
상기 영상과 같이 구현하려면 ElementsKit라는 엘리멘터 애드온을 사용할 수 있습니다. 이 플러그인을 사용하면 엘리멘터의 기능을 확장할 수 있기 때문에 편리하지만, 한편으로는 덩치가 큰 추가적인 플러그인을 사용하기 때문에 사이트 속도에 영향을 미칠 수 있습니다. 또한, 입맛대로 커스텀하기에 쉽지 않을 수 있습니다.
개별 메뉴 항목 위에 마우스를 올렸을 때 각 메뉴 항목에 따라 다른 메가 메뉴 콘텐츠가 펼쳐지도록 하고 싶은 경우 엘리멘터 프로의 Menu 엘리먼트를 사용할 수 있습니다. 자세한 방법은 다음 글을 참고하시기 바랍니다.
엘리멘터(Elementor) 메가 메뉴 만들기 - 워드프레스 정보꾸러미
메가 메뉴(Mega Menu)를 사용하면 홈페이지에 멋진 메뉴를 유연하게 추가할 수 있습니다. 메가 메뉴가 SEO적인 측면에서는 그리 바람직하지 않지만 많이 사용되고 있기 때문에 아바다, 뉴스페이퍼
www.thewordcracker.com
코드를 사용하여 엘리멘터로 개별 메뉴 항목에 대하여 한국형 메가 메뉴 구현하기
엘리멘터 프로(Elementor Pro)의 Menu 엘리먼트를 사용할 경우 최상위 메뉴에는 드롭다운 메뉴 항목을 추가할 수 없고, 대신 메가 메뉴 콘텐츠로 드롭다운을 추가할 수 있습니다.
엘리멘터 프로에서는 메뉴 엘리멘트에 대하여 아래 그림과 같이 Menu 엘리멘트와 WordPress Menu 엘리멘트가 제공됩니다.
Menu 엘리멘트를 사용하고 메가 메뉴 콘텐츠를 표시하고 싶은 메뉴 항목에 대하여 Dropdown Content를 활성화하면 됩니다.
하지만 메뉴 메뉴 기능을 사용하지 않고 단순한 드롭다운 메뉴 항목을 추가할 수 없다는 단점이 있습니다.
클라이언트께서 모양 » 메뉴에서 추가한 메뉴에서 두 개 메뉴 항목에만 메가 메뉴 기능을 추가하고 나머지 메뉴는 메가 메뉴 기능 없이 일반적인 메뉴(드롭다운 메뉴 항목 포함)로 작동하기를 원하셨습니다.
이전에 최상위 메뉴 항목 중 아무 항목에 마우스를 올리면 동일한 메가 메뉴 콘텐츠가 펼쳐지도록 구현하는 작업을 한 적이 있었습니다.
위의 그림과 같이 최상위 메뉴 영역(①) 위에 마우스를 올리면 전체 세부 메뉴 콘텐츠(②)가 펼쳐지는 형식이었습니다. 메가 메뉴 드롭다운 콘텐츠에서 세부 메뉴 항목들은 각 열마다 별도의 메뉴를 만들어 추가했습니다.
Layout을 Vertical로 설정하면 위의 그림과 같이 메뉴가 세로로 표시됩니다.
엘리멘터(Elementor)로 한국형 메가 메뉴 만들기
메가 메뉴는 SEO적인 측면에서 그리 바람직하지 않지만 많이 사용되고 있어 아바다 등 인기 테마에서는 메가 메뉴 기능을 기본적으로 제공합니다. 그리고 엘리멘터 프로에서도 메가 메뉴 기능이
avada.tistory.com
기존 작업에 사용한 코드를 응용하여 두 개의 메뉴 항목에 대해서는 각각 다른 메가 메뉴 드롭다운 콘텐츠가 표시되도록 했습니다.
메가 메뉴 기능은 PC 해상도에서만 적용되도록 하고 모바일 기기에서는 작동하지 않도록 코드를 추가했습니다. 이 작업을 실제로 해보면 예상치 못한 동작이 나타날 수 있습니다. 예를 들어, 메뉴 위에 마우스를 올리면 메뉴 항목의 배경색이 바뀌는데, 마우스를 다른 곳으로 이동하면 배경색이 본래 컬러로 되돌아가야 합니다. 그러나 마우스를 이동시켜도 메뉴 항목의 배경색이 원래 색상대로 되돌아가지 않아서 이 문제를 해결하느라 조금 시간이 걸렸습니다.😥
메가 메뉴는 SEO에 그리 바람직하지 않기 때문에 개인적으로 그리 권장하지는 않습니다. 하지만 한국형 메가 메뉴를 원하시는 분들이 많기 때문에 워드프레스로 홈페이지를 제작하시는 경우 방법을 익히시면 많은 도움이 될 것이라 생각됩니다.
엘리멘터나 아바다 테마, Astra 테마 등에서 한국형 메가 메뉴 기능 구현에 어려움을 겪는 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다.
마치며
워드프레스에는 메가 메뉴 플러그인이나 아바다 등의 테마에서 제공하는 메가 메뉴 기능을 사용하여 메가 메뉴 레이아웃을 구현할 수 있습니다. 하지만 우리나라에서 요구하는 메가 메뉴와는 조금 다를 수 있습니다. 그런 경우에는 코드를 사용하여 원하는 기능을 구현할 수 있습니다.
요즘은 챗GPT를 많이 이용하므로 챗GPT에 엘리멘터 등에서 한국형 엘리멘터를 구현하는 방법에 대하여 요청하여 구현해 볼 수 있을 것입니다.
메가 메뉴는 SEO에 좋지 않을 수 있으므로 가급적 이용하지 않는 것이 바람직할 수 있습니다. 꼭 메가 메뉴 기능을 구현하려는 경우 가능한 한 SEO에 영향을 덜 미치는 방법과 사이트 속도를 저하시키지 않는 방법에 대하여 고민해보시기 바랍니다.
참고
워드프레스로 쉽게 랜딩 페이지 만들기 (feat. 엘리멘터, GeneratePress, Divi) - 워드프레스 정보꾸러미
워드프레스에서 쉽고 빠르게 랜딩 페이지로 만들고 싶은 경우 미리 만들어진 템플릿을 활용하는 것을 고려할 수 있습니다. 많은 사용자들이 엘리멘터 빌더를 활용하여 랜딩 페이지를 만들고 있
www.thewordcracker.com
https://avada.tistory.com/2335
워드프레스 GeneratePress 테마 라이선스 (+요금제)
워드프레스에는 정말 많은 테마가 있습니다. 테마 라이선스는 테마마다 조금씩 다릅니다. 아바다, 엔폴드, 뉴스페이퍼 등 테마포레스트 테마의 경우 동일한 라이선스가 적용됩니다(참고). Generat
avada.tistory.com
https://avada.tistory.com/2897
엘리멘터 무료 버전 vs. 프로 버전 비교
엘리멘터(Elmentor)는 500만 개가 넘는 사이트에 설치되어 사용되고 있는 인기 워드프레스 페이지 빌더 플러그인입니다. 엘리멘터는 무료 버전과 프로 버전으로 제공됩니다. Elementor 프로 버전에서
avada.tistory.com