If you’re looking to create an Elementor mega menu in WordPress, ElementsKit’s Mega Menu module can make the process easy and fast. Read this documentation to learn how to create a mega menu in WordPress using ElementsKit in a few simple steps.
Oversigt #
ElementsKit is the all-in-one addon that gives you the best possible way to build WordPress websites with a wide range of widgets, modules, and highly customizable pre-designed templates.
That includes the Mega Menu module from the ElementsKit plugin. A mega menu is a powerful feature in WordPress that allows you to create a category-based expandable menu with flexible layouts. Elementor Mega menus are easy to use and can be a great way to show the website menu in an organized way.
Se vores videoguide:
Or, follow the step-by-step instructions on how to create mega menu in Elementor:
Forudsætning: #
- Elementor Page Builder Plugin
- ElementsKit Pro
How to Create WordPress Mega Menu in Elementor #
First of all, before creating an Elementor Mega Menu in WordPress make sure to enable the ElementsKit Mega menu module from ElementsKit > Module på dit WordPress-dashboard.
Step #1: Configure Menu #
Til create a WordPress mega menu on your website,
- Naviger til Udseende > Menuer fra WordPress-dashboardet.
- Klik på Opret en ny menu.
- Indtast en Menunavn.
- Klik på Opret menu knap.
Nu kan du add items to the mega menu. For det,
- Udvide Brugerdefinerede links on the “Add menu item” on the right column.
- Indtast en URL og Link Text.
- Klik på Føj til menu.
Then add other menu items in the same way.
After that, check the checkbox for “Enable this menu for Megamenu content”. When the mega menu is enabled, you will click mega menu settings icon when you hover on the menu items.
Step #2: Customize Elementor Megamenu Content #
When you click on the mega menu settings icon, a popup will open. On the popup,
- Toggle button to enable Mega Menu.
- Klik på Gemme knap.
- After that click the REDIGER MEGAMENU INDHOLD button. It’ll take you to the Elementor editor button.
- Klik på ElementsKit Template Library Icon
- Go to Sections=> Klik på Kategori=> Vælg Megamenu fra listen.
- Insert any Elementor Mega menu Indhold.
- You’ll see your inserted item will display.
Kontrol layout #
- Rediger den indre sektion ved at klikke på det stiplede afsnit.
- Indholdsbredde boks: Tilpas din indholdsbredde ved at trække til højre eller venstre.
- Indhold i fuld bredde: Vælg Fuld bredde.
Vælg Column Gap #
- Kolonnegab=> Select your Column Gap from the dropdown.
Vælg Position #
- Højde: Select your Height dragging Left to Right.
- Vertical Align: Select Vertical Align from the drop-down.
- Flyde over: Select Overflow Default or Hidden.
Stretch Section #
Toggle this button to turn the mega menu to full-width, which spans from right to left of the screen’s width.
Vælg HTML-tag #
- Vælg din HTML-tag fra Drop Down.
If you want to see it in action, watch this video and do it yourself within a few minutes.
Tilpas Mega Menu Overskriftstekst #
- Vælg ikontype.
- Aktiver for at tilføje ikon.
- Upload header-ikon.
- Tilføj eller rediger titel.
- Tilføj Rediger beskrivelse.
Tilpas tekst #
- Tilføj eller rediger Tekst.
- Tilføj eller rediger Sub-Title.
- Aktiver til Vis etiket.
- Tilføj eller rediger Etiket.
- Tilpas Baggrundsfarve, typografi, polstring, justering, radius.
- Once done click update and close the window.
Step #3: Customize Icon #
- Gå nu til Ikon Faneblad=> Vælg en hvilken som helst farve fra Farvepalet.
- Vælg Ikon fra Ikon bibliotek.
Step #4: Customize Badge #
- Tilføj eller rediger tekst.
- Vælge Badge farve.
- vælge Badge baggrundsfarve.
- Klik Gemme.
Trin #5: Indstillinger #
Standardbredde #
- Vælg Mega Menu Bredde: Standard.
- Vælg Mega Menu Position: Standard.
- Gemme the window.
- Site View: Viser standardbredde med standardposition.
Standard relativ #
- Vælg Mega Menu Bredde: Standard.
- Vælg Mega Menu Position: I forhold.
- Klik Gemme.
- Site View: Viser standardbredde med relativ position.
Standard fuld bredde #
- Vælg Mega Menu Bredde: Fuld bredde.
- Vælg Mega Menu Position: Standard.
- Klik Gemme.
- Site View: Viser fuld bredde med standardposition.
Fuld bredde relativ position #
- Vælg Mega Menu Bredde: Fuld bredde.
- Vælg Mega Menu Position: I forhold.
- Klik Gemme.
- Site View: Viser Fuld bredde med relativ position.
Brugerdefineret standardbredde #
- Vælg Mega Menu Bredde: Brugerdefineret bredde.
- Angiv enhver tilpasset bredde, men som standard er den det 750 pixels.
- Vælg Mega Menu Position: Standard.
- Klik Gemme.
- Site View: Viser Brugerdefineret bredde med standardposition.
Brugerdefineret standardbredde I forhold #
- Vælg Mega Menu Bredde: Brugerdefineret bredde.
- Angiv enhver tilpasset bredde, men som standard er den det 750 pixels.
- Vælg Mega Menu Position: I forhold.
- Klik Gemme.
- Site View: Viser Brugerdefineret bredde med relativ position.
Trin #6: Opret en header-skabelon #
Her kan du bruge Elementor Header skabelon eller du kan bruge ElementsKit Header skabelon. Let’s see to to add it.
- Naviger til ElementsKit→ Sidehoved Footer→ og klik Tilføj ny.
- En pop op-boks åbnes med muligheder.
- Skriv a i pop op-boksen Titel, vælg Skriv→ Header.
- Vælg Betingelser→ Hele webstedet.
- Skift til Aktivering mulighed og klik på Rediger med Elementor.
- Vælg din Struktur from the selected area.
- Søg nu Nav menu=> Træk Ekit Nav Menu og Dråbe på det valgte område.
** Note: Make sure to drag the ElementsKit Nav menu otherwise your created Megmenu will not appear.
- Gå nu til Menuindstillinger=> vælg din oprettede Overskriftsmenu fra rullemenuen.
- Du kan tilføje enhver type widget herfra for at tilpasse din header-skabelon.
Endeligt output #
Når du er færdig, skal du klikke på Opdatering knappen for at gemme menuen.
Now go to your site and you can see your selected Elementor Mega menu is showing accordingly.