Sådan opretter du Mega Menu i Elementor | Mega Menu Builder

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: #

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.

How to create an Elementor mega menu in WordPress

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.
how to create mega menu in elementor
  • Indtast en Menunavn.
  • Klik på Opret menu knap.
creating a mega menu in WordPress

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.

customize the mega menu in WordPress websites

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.

Elementor mega menu creation

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.
customize mega menu content for Elementor
  • Klik på ElementsKit Template Library Icon
Ekit mega menu
  • Go to Sections=> Klik på Kategori=> Vælg Megamenu fra listen.
ElementsKit mega menu plugin
  • Insert any Elementor Mega menu Indhold.
mega menu content
  • You’ll see your inserted item will display.
mega menu preview in Elementor

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.
mega menu layout

Vælg Column Gap #

  • Kolonnegab=> Select your Column Gap from the dropdown.
drop down menu for mega menu

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.
customize mega menu positions

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.
mega menu drop down menu

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.
mega menu layout

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.
customize mega menu texts

Step #3: Customize Icon #

  • Gå nu til Ikon Faneblad=> Vælg en hvilken som helst farve fra Farvepalet.
icon customization for the menu
  • Vælg Ikon fra Ikon bibliotek.
menu icon library of ElementsKit, a mega menu plugin for Elementor

Step #4: Customize Badge #

  • Tilføj eller rediger tekst.
  • Vælge Badge farve.
  • vælge Badge baggrundsfarve.
  • Klik Gemme.
How to add mega menu in WordPress Elementor

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.
How to add megamenu in WordPress Elementor

Standard relativ  #

  • Vælg Mega Menu Bredde: Standard.
  • Vælg Mega Menu Position: I forhold.
  • Klik Gemme.
  • Site View: Viser standardbredde med relativ position.
How to build mega menu With ElementsKit

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.
Settings of mega menu using ElementsKit

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.
Setting full width relative position of mega menu using ElementsKit

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.
How to edit navigation menu using ElementsKit

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.
How to build header template using ElementsKit
  • 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.
Create header using ElementsKit
  • Vælg din Struktur from the selected area.
Build nav menu using ElementsKit
  • 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.

How to add nav menu using ElementsKit
  • 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.
Drag and drop nav menu to build header

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.

final look of mega menu

Hvad er dine følelser
Updated on december 23, 2024