Hur man bygger en megameny med Elementor och ElementsKit

Kan du tänka dig en stor webbplats utan en megameny? 
Aldrig!

Människor blir mer noga med tiden de spenderar online. En färsk studie visar det  94% av webbanvändare säg att enkel navigering är den mest användbara funktionen på en webbplats.
Nästan alla, eller hur?

För att öka användbarheten och förmågan att engagera användaren spelar megamenyn en viktig roll för att förbättra människorna. En enkel men funktionell megameny kommer att uppmuntra användare att utforska ännu fler delar av din webbplats och omedelbart vidta åtgärder.

Även de största e-handelswebbplatserna, som Amazon och eBay, använder megamenyer för att hjälpa användare att bläddra igenom en webbplatss hela navigering till en enda meny. 

Inte bara en e-handelswebbplats, utan en megameny är också ett utmärkt alternativ för alla nyhetswebbplatser, tidskrifter, innehållsutgivare, företag och mer. 

När du bygger en stor webbplats med flera kategorier och underkategorier är Megamenu en stor expanderbar meny med flera kolumner där allt är synligt på en gång.
Jag är säker, så många frågor kommer att tänka på! Höger? 

Inga bekymmer ... Här hjälper jag dig att få alla svar på dina frågor och i slutet av den här artikeln kommer du att lära dig hur du enkelt skapar din egen megameny. 

Vi presenterar ElementsKit Mega Menu Builder

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

Du kommer att få variationer i megamenyn som Nav-menyn och Vertical Mega Menu tillsammans med många anpassningsalternativ. 

Sammantaget är ElementsKit Elementor Mega Menu en komplett menybyggare för din professionella webbplats. 

Hur skapar man en megameny med Elementor? 

Elementor ger dig massor av funktioner för att designa din megameny, men för att få ytterligare funktioner kan du använda ett plugin från tredje part.

Precis, du behöver ElementsKit. Även om det finns så många plugins för att skapa en megameny så stöder ElementsKit olika typer av megamenyer inklusive vertikal megameny, horisontell megameny och många fler anpassningsalternativ.

Här kommer vi att visa dig steg-för-steg-processen för att skapa en fullt fungerande megameny i detalj.

Vad du behöver för att skapa en megameny med 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

• 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 Megamenu-innehåll

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=> Infoga valfri Mega meny.

Kontrollera Layout

• 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.
• Vertical Align: Välj Vertical Align från rullgardinsmenyn.
• Overflow: Välj Overflow Default eller Hidden.

Välj HTML-tagg

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

Anpassa Mega Menu Rubriktext

• 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 Bricka

• 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.

Skapa Mega Menu med Gutenberg

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

Med GutenKit kan du skapa hela menyn i editorn och design mega-menyn i både vartikal och horisontell orientering.

Allt du behöver är att installera GutenKit Pro plugin och börja bygga din vackra sajt i Gutenberg.

Slutlig utgång

• 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.

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!