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:

Eller följ steg-för-steg-instruktionerna om hur du skapar megameny i Elementor:

Nödvändig förutsättning: #

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

Hur man skapar WordPress Mega Menu i Elementor #

Först och främst innan skapa en Elementor Mega Menu i WordPress se till att aktivera ElementsKit Mega meny modul.

• Navigera till ElementsKit on your WordPress dashboard
• Gå till Moduler
• Find and turn ON Header Footer and Mega Menu
• Spara förändringarna

Step 1: Configure WordPress Menu #

Till skapa en megameny för WordPress on your website –

• Navigera till Appearance > Menus från WordPress-instrumentpanelen.

• Ange a Menynamn.
• Klicka på Skapa meny knapp.

Add pages to the mega menu och spara ändringarna.

Du kan också lägg till objekt till megamenyn. För det,

• Bygga ut Anpassade länkar on the “Add menu item” on the right column.
• Ange a URL och Länktext.
• Klicka på Lägg till i menyn.

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

Efter det, make sure you’ve checked the checkbox for “Aktivera denna meny för Megameny-innehåll”. When the mega menu is enabled, you will click the mega menyinställningar ikon när du håller muspekaren över menyalternativen.

Step 2: Customize Elementor Megamenu Content With ElementsKit #

När du klickar på ikonen för megamenyinställningar öppnas en popup. På popupen,

• Växlingsknapp för att aktivera Mega Menu.
• Klicka på Spara knapp.
• Efter det klickar du på REDIGERA MEGAMENU-INNEHÅLL knapp. Den tar dig till Elementor-redigeringsknappen.

In the next step, a window will appear where you need to click on the ElementsKit mallbiblioteksikon.

• Gå till sektioner
• Search mega menu
• Välj en Megameny template from the list and insert

You’ll see that your inserted pre-designed mega menu template item will display. Redigera den inre delen genom att klicka på det prickade avsnittet.

Behållare

• Container Layout: Select the structural system, like Flexbox, to organize your elements.
• Content Width: Choose between Full bredd eller Boxad for your horizontal boundaries.
• Bredd: 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.
• Riktning: Stack items vertically in a column or horizontally in a row.
• Motivera innehåll: Distribute items along the main axis, such as center or spaced out.
• Justera objekt: Control how items align along the cross axis, using start, centrum, slutet, eller 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).

Ytterligare alternativ #

• Svämma över: De Svämma över property manages content that exceeds its container by using Standard, Auto, eller Dold inställningar.
• HTML-tagg: De HTML-tagg defines the element’s structural role as a Div, Rubrik, Main, eller Nav.

Anpassa Mega Menu Rubrik Text #

Innehåll #

• Titel: De Titel alternativ allows you to enter your primary Rubrik Titel, add a custom Länk, and assign a specific Titel HTML-tagg som H2, for better SEO.
• Texta: Here you can toggle the visibility of the subtitle, a border subtitle, a header subtitle, and choose if the text appears Innan eller Efter titel.
• Titel Beskrivning: This provides a toggle to show description, enabling an extra block of text to explain your heading in more detail.
• Skuggtext: Enable it and add a decorative, large background text layer behind your main title for a stylized look.
• Separator: The separator control lets you show separator to insert a visual dividing line between the header elements and the rest of your page content.

Stil #

• Allmän: The General section provides an Alignment control to position your content to the left, center, or right.
• Titel: The Title settings allow you to customize the Color, Hover Color, and Typography, while also managing the Text Shadow and Margin for proper spacing.
• Fokuserad titel: 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.
• Texta: 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.

Anpassa text #

Innehåll #

• Lista: Här kan du Lägg till eller redigera text och Texta for each entry, while also providing options to Aktivera för att visa etikett, Lägg till eller redigera etikett text and more.
• Inställningar: The option lets you choose a Layout style, set the link Mål till Blank, and toggle the visibility of the Rel attribut.

Stil #

• Lista: You can adjust the padding, margin, border type, box shadow, etc. of the texts.
• Ikon: It lets you customize the icon position, vertical alignment, background type, size, etc. of the icons associated with each list item.
• Text: You can change the texts with color, margin, typography, etc., of the main item titles.
• Texta: To style subtitles, adjust their color, typography, padding, and more from here.
• Märka: 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 Sidhuvud och sidfot Builder

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.

Ikon #

• Klick Ikon Tab
• Choose any color from the Färgpalett

1. Klick Välj ikon
2. Sök på icon you want to set
3. Select the icon

Bricka #

• Lägg till eller redigera text
• Välja Badge färg
• välja Badge bakgrundsfärg
• Klick Spara

inställningar #

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

• Standardbredd – Uses the standard width.
• Full bredd – Expands the menu to cover the full width of the screen.
• Anpassad bredd – Allows you to set a specific width (750px by default).

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

• Standard – Applies the standard positioning.
• Relativ – Positions the menu relative to its parent element.

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

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