Hur man bygger en megameny i WordPress med Elementor

Kan du föreställa dig en stor webbplats utan en navigeringsmeny? 
Aldrig!

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 Amazon och 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 med Elementor.

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.

Använda ElementsKit Mega Menu Builder du kan skapa och anpassa vilken typ av Megameny som helst med ett Elementor-gränssnitt för liveinnehåll.

You will get variations in the mega menu such as the Nav menu och Vertikal Mega-meny 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.

För att följa denna tutorialblogg behöver du två saker–>

• Elementor
• ElementsKit

Eller följ instruktionerna steg för steg:

Se till Megameny modul är PÅ från ElementsKit → MODULER.

Steg #1: Lägg till meny

För att skapa en megameny i Elementor måste du skapa en meny från WordPress-instrumentpanelen. För att göra det,

• Navigera till Utseende > Meny.
• Klicka på Skapa en ny meny.
• Förse Menynamn > Kontrollera Kryssruta > Skapa meny.
• Klicka på Anpassad länk > Ge Länk och Lägg till menyalternativ på samma sätt.

Steg #2: Anpassa Megameny-innehåll

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

Markera kryssrutan "Aktivera den här menyn för Megameny-innehåll" > Klicka på Mega-meny med inställningsikon på vilket menyalternativ du vill lägga till Mega-menyn.

• En popup öppnas, växla till Mega meny alternativ och Spara. Efter det klickar du på the REDIGERA MEGAMENU-INNEHÅLL knapp.

Välj Mall

• Klicka på Elementskit Mallbiblioteksikon och navigera sedan till Rubriker.
• Klicka på Rubrik > Mega menyinnehåll > Sätt in någon Mega meny.

Kontrolllayout

• Redigera den inre delen genom att klicka på det prickade avsnittet.
• Innehållsbreddslåda: Anpassa din innehållsbredd genom att dra höger eller vänster.
• Innehåll i full bredd: Välj Full bredd.

Välj Kolumn Gap

• Kolumn Gap=> Välj ditt kolumnavstånd från falla ner.

Välj Position

• Höjd: Välj din höjd genom att dra från vänster till höger.
• Vertikal justering: Välj Vertical Align från rullgardinsmenyn.
• Svämma över: Välj Overflow Default eller Hidden.

Välj HTML-tagg

• Välj din HTML-tagg från Falla ner.

Anpassa Mega Menu Rubrik Text

• Välj ikontyp.
• Aktivera för att lägga till ikon.
• Ladda upp rubrikikon.
• Lägg till eller redigera titel.
• Lägg till Redigera beskrivning.

Anpassa text

• Lägg till eller redigera text.
• Lägg till eller redigera underrubrik.
• Aktivera för att visa etikett.
• Lägg till eller redigera etikett.
• Anpassa bakgrundsfärg, typografi, stoppning, justering, radie.

Steg #3: Anpassa ikon

1. Klick 'Uppdatering' för att spara menyn > Stäng redigeraren.
2. Gå nu till fliken Ikon > Välj valfri färg från färgpaletten.
3. Välj Icon från Icon Library.
4. Gå nu till webbplatsen > Vald ikon och färg visas.

Steg #4: Anpassa märket

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

Steg #5: Inställningar

Standardbredd

• Välj Mega Menu Width: Standard.
• Välj Mega Menu Position: Standard.
• Spara fönstret.
• Webbplatsvy: Visar standardbredd med standardposition.

Standardrelativ 

• Välj Mega Menu Width: Standard.
• Välj Mega Menu Position: Relativ.
• Klick Spara.
• Webbplatsvy: Visar standardbredd med relativ position.

Standard full bredd

• Välj Mega Menu Width: Full bredd.
• Välj Mega Menu Position: Standard.
• Klick Spara.
• Webbplatsvy: Visar full bredd med standardposition.

Full bredd relativ position

• Välj Mega Menu Width: Full bredd.
• Välj Mega Menu Position: Relativ.
• Klick Spara.
• Webbplatsvy: Som visar Full bredd med relativ position.

Anpassad standardbredd

• Välj Mega Menu Width: Anpassad bredd.
• Ange vilken anpassad bredd som helst, men det är det som standard 750 pixlar.
• Välj Mega Menu Position: Standard.
• Klick Spara.
• Webbplatsvy: Som visar Anpassad bredd med standardposition.

Anpassad standardbredd Relativ

• Välj Mega Menu Width: Anpassad bredd.
• Ange vilken anpassad bredd som helst, men det är det som standard 750 pixlar.
• Välj Mega Menu Position: Relativ.
• Klick Spara.
• Webbplatsvy: Som visar Anpassad bredd med relativ position.

Steg #6: Skapa en huvudmall

Här kan du använda Elementor Header Mall eller så kan du använda ElementsKit Header Mall.

• Sök nu Nav-meny > Dra Ekit Nav-meny och Släppa på det valda området. Se till att dra i ElementsKit Nav-menyn annars visas inte din skapade Meg-meny.
• Gå till Menyinställningar > välj din skapade Huvudmeny från rullgardinsmenyn.
• Du kan lägga till vilken typ av widget som helst härifrån för att anpassa din rubrikmall.

• När du är klar klickar du på Uppdatering för att spara menyn.
• Gå nu till din webbplats och du kan se att din valda Megameny visas därefter.

För att lära dig mer information om hur du skapar megameny i WordPress kan du gå igenom dokumentationen för ElementsKit Mega Menu-widget för Elementor.

Vad kommer härnäst?

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.

Skapa Mega Menu med Gutenberg

Om du har byggt din webbplats i WordPress block editor kan du också skapa megameny i Gutenberg mjukt. GutenKit block editor plugin kommer med det enklaste sättet att skapa WordPress megameny i Gutenberg.

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.

Avslutar

Äntligen har vi lyckats komma till slutet. Jag hoppas att vi kunde hjälpa dig med denna handledning! Och nu kan du bygga en anpassad Elementor megameny genom att använda ElementsKit!

Du kan se alla dessa steg i en enda video här.

Om du har fler frågor eller har stött på andra problem, vänligen meddela oss i kommentarsfältet!