Hur man skapar en mega-meny i Elementor | 5 enkla steg

En megameny är en typ av expanderbar navigeringsmeny som visar flera alternativ på en gång, vanligtvis grupperade i kategorier för en bättre användarupplevelse. Till skillnad från traditionella rullgardinsmenyer erbjuder megamenyer en bredare layout, ofta med kolumner, bilder, ikoner eller till och med widgetar.

Det är särskilt användbart för e-handelssajter, nyhetsportaler eller andra stora webbplatser med mycket innehåll som måste vara lättillgängligt.

Men om du vill skapa en Mega-meny i Elementor, det är inte möjligt eftersom Elementor (den fria versionen) möjliggör enkla navigationslayouter med Nav Menu-widgeten; den saknar den avancerade strukturen som behövs för en fullfjädrad mega-meny. Du skulle stöta på begränsningar som:

• Inget stöd för rullgardinsmenyer med flera kolumner
• Ingen inbäddning av bilder eller widgetar i menyalternativen
• Begränsad styling och hover-kontroll

Så om du siktar på en avancerad, modern, användarvänlig megameny med rika funktioner, måste du använda ett plugin från tredje part för att aktivera den här funktionen. Så i den här bloggen kommer jag att visa dig Hur man skapar en mega-meny i Elementor i 5 enkla steg

Här är förhandsgranskningen av megamenyn som vi ska skapa med Elementor:

Skapa en megameny för WordPress i Elementor

Att bygga en detaljerad megameny för din WordPress-webbplats med Elementor kan verka knepigt. Elementor är utmärkt för sidor, men avancerade menyer behöver ofta mer. Många plugins erbjuder megamenyfunktioner för Elementor, men Element Pack sticker ut genom att förenkla saker och ting.

Med vissa andra plugins kan du stöta på förvirrande inställningar, begränsade designalternativ eller kämpa för att få din meny att se helt rätt ut på olika enheter. Det kan kännas som att du kämpar mot gränssnittet bara för att få till en grundläggande megameny. 

Element Packerbjuder dock all den kraft som behövs genom ett användarvänligt gränssnitt. Det låter dig skapa imponerande megamenyer utan de typiska frustrationerna, vilket ger ett direkt sätt att lägga till innehåll och layouter direkt i Elementor.

Så, låt oss börja bygga hela mega-menyn med Element Pack.

Förkunskapskrav

Kontrollera först och främst att dessa 2 plugins har installerats och aktiverats: 

• Elementor: Gratisversionen är tillräcklig.
• Element Pack: Detta WordPress-plugin lägger till megamenyfunktioner specifikt för Elementor.

Steg 1: Aktivera Mega Menu-moduler och widgetar

För att aktivera Mega Menu-funktionen i Element Pack Pro måste du justera flera inställningar i WordPress instrumentpanel. Så här gör du,

• Gå till Element Pack Pro från din WordPress-panel.

• Navigera till Särskilda egenskaper tab.
• Aktivera Mega Menu Switcher och spara inställningarna.

• Gå sedan till Widgets för kärnverksamheten tab.
• Aktivera widgetarna Mega Menu och Sub-Menu.
• Spara inställningarna.

• Spara om permalänkar för att säkerställa att de fungerar korrekt.

Steg 2: Skapa och konfigurera Elementor-meny

Nu behöver du skapa din megameny. Följ de grundläggande stegen nedan för en effektiv menyhantering.

• Gå till Utseende > Menyer.

• Namnge din meny och klicka på Skapa meny.

• Lägg till menyobjekt (anpassade länkar eller befintliga sidor) i menyn.

• För varje objekt som du vill göra till en megameny aktiverar du Mega Menu Switcher genom att trycka på knappen.
• Spara menyn och uppdatera sidan.

Steg 3: Utforma megamenyn

När du har skapat menyn kan du anpassa menyalternativen genom att aktivera Element Pack Mega Menu Switcher. Denna funktion markerar objekt som är redo att konverteras till Mega Menus.

Om du anpassar megamenyer med bredd- och ikonalternativ förbättras användarupplevelsen. Dessa saker hjälper till att visuellt integrera menyn med din webbplatsdesign. Så utforma några av grunderna i systemet efter dina behov.

• Håll muspekaren över ett menyalternativ med Mega Menu aktiverad.
• Klicka på knappen Edit Mega Menu som visas.

• Ett popup-fönster kommer att visas

• Slå på Aktivera Mega Menu.
• Ställ in bredden på menyn (standard eller anpassad).
• Om du vill kan du lägga till en text som kommer att visas i närheten av menyalternativet.
• Välj en menyikon och en ikonfärg.
• Klicka på Spara alternativ.

Steg 4: Anpassa Elementor Mega Menu

Nu, för att anpassa megamenyn, måste vi öppna den med Elementor. Så här gör vi,

• Klicka på Redigera innehåll i rullgardinsmeny.

• Redigeraren Elementor öppnas.

• Dra och släpp widgetar i Mega Menu-layouten.
• Använd widgeten Sub-Menu och skapa kolumner, lägg till bilder, ikoner, text osv.

• Anpassa stilar, avstånd och layout efter behov.

• Använd förhandsgranskningen Elementor för att se hur Mega-menyn ser ut.
• Du kan använda ett annat sätt att skapa en undermeny med Live kopiera och klistra in
• Gå bara till Element Pack Mega Meny Demo
• Välj en demo

• Välj nu en stil och klicka på den högra sidans Live kopiera och klistra in knapp
• Här kopierar jag Adidas demos menyelement för män

• Gå nu tillbaka till din Elementor-redigerare och klistra in

• Hela mallen för megamenyn kommer att finnas tillgänglig här.

Steg 5: Anpassning av kontrollayout och stil

Dess layout och stilar kan kräva ytterligare anpassning för att hålla den lik din webbplats. Så här är det,

• Justera nu styling och innehåll efter behov.

• Använd det responsiva läget för att se till att det ser bra ut på mobilen.
• Kontrollera menyn i desktop- och mobilvyerna.

Steg 6: Spara och njut

Nu är vi framme vid slutet, 

• Gå till din mall eller sida där du vill visa megamenyn.

• Sök i mega-menywidgeten från Element Pack-avsnittet
• Dra och släpp den i sidlayouten

• Välj meny och ställ in menyriktningen

• Om du behöver göra några ändringar i layout eller stil, slutför dem och klicka på knappen Publicera.

• Besök nu din sida eller mall och håll muspekaren över din meny, så får du megamenyn.

Avancerad Mega Menu i Elementor: förhandsgranskning

Med Element Pack Maine Focus kan du skapa en avancerad megameny. Här är några avancerade megamenyer som gjorts av Element Pack.

Det är en kopia av dribblingen för att skapa en megameny som Dribbble-webbplatsen

Med Element Pack kan du bygga avancerade megamenyer som denna för e-handel.

Du kan också bygga den här vackra megamenyn med Element Pack.

Slutsats

Att skapa en megameny i Elementor från grunden kan verka skrämmande till en början, men med rätt verktyg och ett strukturerat tillvägagångssätt blir det ett kraftfullt sätt att höja webbplatsens navigering och användarupplevelse. 

Oavsett om du driver en e-handelsbutik, en innehållsrik blogg eller en företagswebbplats hjälper en väldesignad megameny besökarna att hitta det de behöver snabbare, samtidigt som du visar upp ditt varumärkes professionalism.

Genom att följa stegen ovan har du nu byggt en fullt fungerande, visuellt engagerande megameny som är både responsiv och anpassningsbar. Glöm inte att testa den på olika enheter och förfina layouten baserat på användarnas feedback. Element Pack ger dig flexibiliteten att justera och skala din meny i takt med att din webbplats växer.

Är du redo att ta det längre? Försök att integrera dynamiskt innehåll, ikoner eller till och med WooCommerce-element för att göra din megameny verkligt interaktiv. Möjligheterna är oändliga. Så fortsätt att experimentera och låt din kreativitet leda vägen!

VANLIGA FRÅGOR

Senaste bloggar

• Element Pack Pro version 9 släppt: Vad är det som är spännande?
• Hur man lägger till en Testimonial Slider i WordPress med hjälp av Elementor
• Hur håller du dragspelet stängt som standard i Elementor?
• Hur man stoppar Elementor-länkar från att understrykas (3 sätt)
• Enkel guide: Hur man lägger till kod på en sida på Elementor | 5 enkla steg