Elementor로 WordPress에서 메가 메뉴를 만드는 방법

탐색 메뉴가 없는 대규모 웹사이트를 상상할 수 있나요? 
안 돼요!

94% of users say it’s the most important feature of a website. So, easy navigation matters! That’s why mega menus are so effective. They organize categories and subcategories into a single, clear layout, making it easy for visitors to find what they need.

Sites like 아마존 그리고 eBay use mega menu to give the best user experience. Mega menus are ideal for e-commerce, news, blogs, and businesses with lots of content.

This article will show you how to create a functional and stylish mega menu 엘리멘터와 함께.

What do you need to create the mega menu with Elementor?

The only thing you need to create the mega menu using Elementor is ElementsKit.

사용하여 ElementsKit 메가 메뉴 빌더 Elementor 라이브 콘텐츠 인터페이스를 사용하여 모든 유형의 메가메뉴를 만들고 맞춤 설정할 수 있습니다.

You will get variations in the mega menu such as the Nav menu 그리고 수직 메가 메뉴 along with many customization options. 

Overall, ElementsKit Elementor Mega Menu is a full featured-packed module for your professional site that easily ranks top among the best WordPress Mega Menu builders for Elementor.

이 튜토리얼 블로그를 따르려면 두 가지가 필요합니다.–>

• 엘레멘터
• ElementsKit

또는 단계별 지침을 따르십시오.

확실하게 하다 메가메뉴 모듈은 에 ~에서 ElementsKit → 모듈.

1단계TP8T1: 메뉴 추가

Elementor에서 메가 메뉴를 만들려면 WordPress 대시보드에서 메뉴를 만들어야 합니다. 그렇게 하려면,

• 로 이동 모양 > 메뉴.
• 클릭 새 메뉴 만들기.
• 제공하다 메뉴명 > 확인하세요 체크박스 > 메뉴 생성.
• 클릭 맞춤 링크 > 제공하다 링크 그리고 메뉴 항목 추가 같은 방법으로.

1단계TP8T2: 메가메뉴 콘텐츠 사용자 지정

In this step, you can add mega menu items from the WordPress menu you have created.

확인란을 선택하세요. “메가메뉴 콘텐츠를 보려면 이 메뉴를 활성화하세요” > 클릭하세요 설정 아이콘이 포함된 메가 메뉴 메가 메뉴를 추가하려는 메뉴 항목을 선택하세요.

• 팝업이 열리면 메가 메뉴 옵션 및 구하다. 그 후 th를 클릭하세요.e 메가메뉴 콘텐츠 편집 단추.

템플릿 선택

• 다음을 클릭하세요. Elementskit 템플릿 라이브러리 아이콘을 클릭한 후 다음으로 이동하세요. 헤더.
• 클릭 머리글 > 메가 메뉴 콘텐츠 > 삽입 메가 메뉴.

컨트롤 레이아웃

• 내부 섹션 편집 점선 섹션을 클릭하면 됩니다.
• 콘텐츠 너비 상자: 오른쪽이나 왼쪽으로 드래그하여 콘텐츠 너비를 맞춤설정하세요.
• 콘텐츠 전체 너비: 선택하다 전체 넓이.

열 간격 선택

• 기둥 간격=> 다음에서 열 간격을 선택하세요. 쓰러지 다.

직위 선택

• 키: 왼쪽에서 오른쪽으로 끌어서 높이를 선택하세요.
• 수직 정렬: Select Vertical Align from the Drop Down.
• 과다: 오버플로 기본값 또는 숨김을 선택합니다.

선택하다 HTML 태그

• 선택하세요 HTML 태그 ~에서 쓰러지 다.

메가 메뉴 제목 텍스트 사용자 정의

• 아이콘 유형 선택.
• 아이콘 추가 활성화.
• 헤더 아이콘 업로드.
• 제목 추가 또는 편집.
• 편집 설명 추가.

텍스트 사용자 정의

• 텍스트 추가 또는 편집.
• 부제목 추가 또는 편집.
• 라벨 표시 활성화.
• 라벨 추가 또는 수정.
• 배경색, 타이포그래피, 패딩, 정렬, 반경 사용자 정의.

1단계TP8T3: 아이콘 사용자 지정

1. '를 클릭하세요.업데이트' 메뉴를 저장하려면 > 편집기를 닫습니다.
2. 이제 아이콘 탭으로 가서 색상 팔레트에서 원하는 색상을 선택하세요.
3. 아이콘 라이브러리에서 아이콘을 선택하세요.
4. 이제 사이트 > 선택한 아이콘으로 이동하면 색상이 나타납니다.

1단계TP8T4: 배지 사용자 지정

• 텍스트 추가 또는 편집.
• 선택하다 배지 색상.
• 선택하다 배지 배경 색상.
• 딸깍 하는 소리 구하다.

1단계TP8T5: 설정

기본 너비

• 메가 메뉴 너비 선택: 기본.
• 메가 메뉴 위치 선택: 기본.
• 창을 저장합니다.
• 사이트 보기: 기본 위치와 기본 너비를 표시합니다.

기본 상대 

• 메가 메뉴 너비 선택: 기본.
• 메가 메뉴 위치 선택: 상대적인.
• 딸깍 하는 소리 구하다.
• 사이트 보기: 상대 위치와 함께 기본 너비를 표시합니다.

기본 전체 너비

• 메가 메뉴 너비 선택: 전체 넓이.
• 메가 메뉴 위치 선택: 기본.
• 딸깍 하는 소리 구하다.
• 사이트 보기: 기본 위치로 전체 너비를 표시합니다.

전체 폭 상대 위치

• 메가 메뉴 너비 선택: 전체 넓이.
• 메가 메뉴 위치 선택: 상대적인.
• 딸깍 하는 소리 구하다.
• 사이트 보기: 표시 상대 위치가 포함된 전체 너비.

사용자 정의 기본 너비

• 메가 메뉴 너비 선택: 사용자 정의 너비.
• 사용자 정의 너비를 제공하지만 기본적으로는 750px.
• 메가 메뉴 위치 선택: 기본.
• 딸깍 하는 소리 구하다.
• 사이트 보기: 표시 기본 위치의 사용자 정의 너비.

사용자 정의 기본 너비 상대적인

• 메가 메뉴 너비 선택: 사용자 정의 너비.
• 사용자 정의 너비를 제공하지만 기본적으로는 750px.
• 메가 메뉴 위치 선택: 상대적인.
• 딸깍 하는 소리 구하다.
• 사이트 보기: 표시 상대 위치에 따른 사용자 정의 너비.

#6 단계: 헤더 템플릿 만들기

여기에서 다음을 사용할 수 있습니다. 요소 헤더 템플릿 또는 당신은 사용할 수 있습니다 ElementsKit 헤더 템플릿.

• 지금 검색 탐색 메뉴 > 드래그 에킷 내비 메뉴 그리고 떨어지다 선택한 영역에. ElementsKit Nav 메뉴를 드래그해야 합니다. 그렇지 않으면 생성된 Megmenu가 표시되지 않습니다.
• 이동 메뉴 설정 > 생성한 것을 선택하세요 헤더 메뉴 드롭다운에서
• 여기에서 모든 유형의 위젯을 추가하여 헤더 템플릿을 사용자 정의할 수 있습니다.

• 완료되면 업데이트 버튼을 누르면 메뉴가 저장됩니다.
• 이제 귀하의 사이트로 이동하면 선택한 메가메뉴가 그에 따라 표시되는 것을 볼 수 있습니다.

WordPress에서 메가 메뉴를 만드는 방법에 대한 자세한 내용을 알아보려면 ElementsKit 설명서를 참조하세요. Elementor용 메가 메뉴 위젯.

무엇 향후 계획?

Once you’ve finished creating the mega menu in Elementor, make sure to preview it. If you’re satisfied with the style, finalize and publish it. However, if you later find that it isn’t as attractive as you initially thought, you can change it at any time.

To understand how users interact with the style, consider integrating a heatmap tool like Clarity.

구텐베르그를 사용하여 메가 메뉴 만들기

WordPress 블록 편집기에서 웹사이트를 구축한 경우에도 다음을 수행할 수 있습니다. Gutenberg에서 메가 메뉴 만들기 원활하게. GutenKit 블록 편집기 플러그인은 Gutenberg에서 WordPress 메가 메뉴를 만드는 가장 쉬운 방법을 제공합니다.

With GutenKit, you can create the entire menu in the editor and design mega menu in both vertical and horizontal orientation.

All you need is to install GutenKit Pro plugin and start building your beautiful site in Gutenberg.

마무리

드디어 성공적으로 끝까지 해냈습니다. 이 튜토리얼이 도움이 되었기를 바랍니다. 이제 다음을 사용하여 사용자 정의 Elementor 메가 메뉴를 만들 수 있습니다. ElementsKit!

여기에서 단일 비디오로 모든 단계를 볼 수 있습니다.

더 많은 우려사항이 있거나 다른 문제가 발생한 경우 댓글 섹션을 통해 알려주시기 바랍니다!