Creating a mega menu in Elementor is easy with ElementsKit, and it doesn’t require Elementor Pro. ElementsKit offers a dedicated Mega Menu module that lets you design rich, multi-column menus using Elementor’s visual editor.

Watch the video guide on Elementor Mega Menu Building:

또는 Elementor에서 메가 메뉴를 만드는 방법에 대한 단계별 지침을 따르세요.

전제 조건: #

• Elementor, a page builder plugin (Free version is enough)
• ElementsKit 프로, a WordPress mega menu plugin for Elementor

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

우선, 그 전에 WordPress에서 Elementor 메가 메뉴 만들기 ElementsKit을 활성화하세요 메가 메뉴 기준 치수.

• 로 이동 ElementsKit on your WordPress dashboard
• 이동 모듈
• Find and turn ON Header Footer and Mega Menu
• 구하다 변화들

Step 1: Configure WordPress Menu #

에게 워드프레스 메가 메뉴 만들기 on your website –

• 로 이동 Appearance > Menus WordPress 대시보드에서.

• 다음을 입력하세요. 메뉴명.
• 다음을 클릭하세요. 메뉴 생성 단추.

Add pages to the mega menu 변경 사항을 저장합니다.

당신은 또한 수 메가 메뉴에 항목 추가. 그에 대한,

• 확장하다 맞춤 링크 on the “Add menu item” on the right column.
• 다음을 입력하세요. URL 그리고 링크 텍스트.
• 클릭 메뉴에 추가.

Then add other menu items in the same way with this WordPress menu customizer, ElementsKit.

이후, make sure you’ve checked the checkbox for “Megamenu 콘텐츠에 대해 이 메뉴를 활성화하세요”. When the mega menu is enabled, you will click the 메가 메뉴 설정 아이콘 메뉴 항목에 마우스를 올려 놓으면

Step 2: Customize Elementor Megamenu Content With ElementsKit #

메가 메뉴 설정 아이콘을 클릭하면 팝업이 열립니다. 팝업에서,

• 메가 메뉴를 활성화하려면 버튼을 토글하세요.
• 다음을 클릭하세요. 구하다 단추.
• 그 후에 클릭하세요 메가메뉴 콘텐츠 편집 버튼을 클릭합니다. Elementor 편집기 버튼으로 이동합니다.

In the next step, a window will appear where you need to click on the ElementsKit 템플릿 라이브러리 아이콘.

• 섹션으로 이동
• Search mega menu
• 선택 메가메뉴 template from the list and insert

You’ll see that your inserted pre-designed mega menu template item will display. 내부 섹션 편집 점선 섹션을 클릭하면 됩니다.

컨테이너

• Container Layout: Select the structural system, like Flexbox, to organize your elements.
• Content Width: Choose between 전체 넓이 또는 박스형 for your horizontal boundaries.
• 너비: Set the specific horizontal percentage or pixel size.
• Min Height: Set the minimum vertical space the container must fill.
• Items Management
• Wrap: Allow items to move to a new line when they run out of space.
• 방향: Stack items vertically in a column or horizontally in a row.
• 콘텐츠 정당화: Distribute items along the main axis, such as center or spaced out.
• 항목 정렬: Control how items align along the cross axis, using start, 센터, 끝, 또는 stretch for consistent vertical or horizontal positioning.
• Gaps: Define the exact pixel spacing between individual items.
• Wrap: Control whether items stay on a single line (no-wrap) or break into multiple lines (wrap).

추가 옵션 #

• 과다: 그만큼 과다 property manages content that exceeds its container by using 기본, Auto, 또는 숨겨진 설정.
• HTML 태그: 그만큼 HTML 태그 defines the element’s structural role as a Div, 머리글, Main, 또는 Nav.

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

콘텐츠 #

• 제목: 그만큼 제목 옵션 allows you to enter your primary 제목 제목, add a custom 링크, and assign a specific 제목 HTML 태그 좋다 H2, for better SEO.
• 부제: Here you can toggle the visibility of the subtitle, a border subtitle, a header subtitle, and choose if the text appears 전에 또는 제목 뒤.
• 제목 설명: This provides a toggle to show description, enabling an extra block of text to explain your heading in more detail.
• 그림자 텍스트: Enable it and add a decorative, large background text layer behind your main title for a stylized look.
• 분리 기호: The separator control lets you show separator to insert a visual dividing line between the header elements and the rest of your page content.

스타일 #

• 일반적인: The General section provides an Alignment control to position your content to the left, center, or right.
• 제목: The Title settings allow you to customize the Color, Hover Color, and Typography, while also managing the Text Shadow and Margin for proper spacing.
• 집중된 제목: The Focused Title options offer advanced styling for highlighted text, including Text decoration color, Padding, and toggles for background color on text or text fill.
• 부제: The Subtitle section lets you set the Color and Typography, adjust the Margin, and configure a Subtitle Border Left with a custom Background Type or Image.

텍스트 사용자 정의 #

콘텐츠 #

• 목록: 여기에서 할 수 있습니다 텍스트 추가 또는 편집 그리고 부제 for each entry, while also providing options to 라벨 표시 활성화, 라벨 추가 또는 수정 text and more.
• 설정: The option lets you choose a 공들여 나열한 것 style, set the link 표적 에게 Blank, and toggle the visibility of the 상대 기인하다.

스타일 #

• 목록: You can adjust the padding, margin, border type, box shadow, etc. of the texts.
• 상: It lets you customize the icon position, vertical alignment, background type, size, etc. of the icons associated with each list item.
• 텍스트: You can change the texts with color, margin, typography, etc., of the main item titles.
• 부제: To style subtitles, adjust their color, typography, padding, and more from here.
• 상표: The label style options enable you to customize the typography, margin, padding, border radius, alignmnets, etc.

Step 3: Create a Header Template #

Next, you have to create a header and preview it.

• Go to the ElementsKit Header Footer from your dashboard
• Create a header or open the existing one

To learn how to create a header, check this detailed documentation on the 머리글 및 바닥글 작성기

Here you go, the mega menu has been successfully created.

However, if you want to personalize the icon, badge, and other settings of the mega menu, then follow the next step.

Step 4: Customize Icon, Badge & Settings #

Go to menus and personalize icons, badges, and settings if you like.

상 #

• 딸깍 하는 소리 아이콘 탭
• Choose any color from the 색상 팔레트

1. 딸깍 하는 소리 아이콘 선택
2. 검색 icon you want to set
3. Select the icon

배지 #

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

설정 #

1. Mega Menu Width
Choose how you want the width of the mega menu to appear:

• 기본 너비 – Uses the standard width.
• 전체 넓이 – Expands the menu to cover the full width of the screen.
• 사용자 정의 너비 – Allows you to set a specific width (750px by default).

2. Mega Menu Width Position
Select how the width will be aligned:

• 기본 – Applies the standard positioning.
• 상대적인 – Positions the menu relative to its parent element.

3. Enable Ajax Load: Controls how the mega menu content is loaded. Set to 예 to load content dynamically without a page refresh, or 아니요 to load it normally with the page.

Now you’re ready to build and customize your own mega menu simply with ElementsKit.