Sådan opbygger du en megamenu i WordPress med Elementor

Kan du forestille dig en stor hjemmeside uden en navigationsmenu? 
Ingen måde!

Folk bliver mere specifikke omkring den tid, de bruger online. Det viser en nylig undersøgelse  94% af webbrugere sige nem navigation er den mest nyttige funktion på et websted.
Næsten alle, ikke?

brugervenligheden og evnen til at engagere brugeren, er mega menu den perfekte type navigationsmenu til din hjemmeside. En enkel, men funktionel megamenu vil opmuntre brugerne til at udforske endnu flere områder af dit websted og øjeblikkeligt skride til handling.

Selv de største e-handelswebsteder, som Amazon og eBay, bruger megamenuer til at hjælpe brugerne med at gennemse hele en hjemmesides navigation til en enkelt menu. 

Ikke kun et e-handelswebsted, men en megamenu er også en god mulighed for alle nyhedswebsteder, magasiner, indholdsudgivere, virksomheder og mere. 

Når du bygger en stor hjemmeside med flere kategorier og underkategorier, er Megamenu en stor multi-kolonne udvidelig menu, hvor alt er synligt på én gang.
Jeg er sikker på, så mange spørgsmål dukker op! Højre? 

Ingen bekymringer... Her vil jeg hjælpe dig med at få alle svarene på dine spørgsmål, og i slutningen af denne artikel vil du lære, hvordan du nemt laver din egen megamenu. 

Introduktion til ElementsKit Mega Menu Builder

Ved hjælp af funktionsrige ElementsKit Mega Menu Builder du kan oprette og tilpasse enhver type Megamenu med en Elementor live-indholdsgrænseflade.

Du vil få variationer i megamenuen såsom Nav-menuen og Vertical Mega Menu sammen med mange tilpasningsmuligheder. 

Alt i alt er ElementsKit Elementor Mega Menu et fuldt udstyret modul til dit professionelle websted, der nemt rangerer øverst blandt bedste WordPress Mega Menu-byggere til Elementor.

Hvordan laver man en megamenu med Elementor? 

Elementor giver dig masser af funktionaliteter til at designe din megamenu, men for at få yderligere funktionaliteter kan du bruge et tredjeparts plugin.

Præcis, du har brug for ElementsKit. Selvom der er så mange plugins til at skabe en megamenu, så understøtter ElementsKit forskellige typer megamenuer, herunder lodret megamenu, horisontal megamenu og mange flere tilpasningsmuligheder.

Her vil vi vise dig trin-for-trin-processen for at skabe en fuldt funktionel megamenu i detaljer.

Hvad du skal bruge for at oprette en megamenu med Elementor

For at følge denne vejledningsblog skal du bruge to ting ->

• Elementor
• ElementsKit

Eller følg trin for trin instruktionerne:

Sørge for at Megamenu modul er PÅ fra ElementsKit → MODULER.

Trin #1: Tilføj menu

For at oprette en megamenu i Elementor skal du oprette en menu fra WordPress dashboar. For at gøre det,

• Naviger til Udseende > Menu.
• Klik på Opret en ny menu.
• Give Menunavn > Tjek Afkrydsningsfelt > Opret menu.
• Klik på Brugerdefineret link > give Link og Tilføj menupunkter på samme måde.

Trin #2: Tilpas Megamenu-indhold

I dette trin kan du tilføje mega menupunkter fra den WordPress-menu, du har oprettet.

Marker afkrydsningsfeltet "Aktiver denne menu for Megamenu-indhold" > Klik på Mega menu med indstillingsikon på hvilket menupunkt du vil tilføje Mega Menu.

• En pop op åbnes, skift til Mega menu mulighed, og Gemme. Klik derefter på the REDIGER MEGAMENU-INDHOLD knap.

Vælg skabelon

• Klik på Elementskit Skabelonbiblioteksikon, og naviger derefter til Overskrifter.
• Klik på Header > Mega menuindhold > Indsæt evt Mega menu.

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.

Vælg Column Gap

• Kolonnegab=> Vælg dit kolonnegab fra falde ned.

Vælg Position

• Højde: Vælg din højde ved at trække fra venstre mod højre.
• Lodret justering: Vælg lodret justering fra rullemenuen.
• Overløb: Vælg Overløbsstandard eller Skjult.

Vælg HTML-tag

• Vælg din HTML-tag fra Drop Down.

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.

Tilpas tekst

• Tilføj eller rediger tekst.
• Tilføj eller rediger undertitel.
• Aktiver for at vise etiket.
• Tilføj eller rediger etiket.
• Tilpas baggrundsfarve, typografi, polstring, justering, radius.

Trin #3: Tilpas ikon

1. Klik på 'Opdatering' for at gemme menuen > Luk editoren.
2. Gå nu til fanen Ikon > Vælg en hvilken som helst farve fra farvepaletten.
3. Vælg Icon fra Icon Library.
4. Gå nu til webstedet > Valgt ikon og farve dukkede op.

Trin #4: Tilpas badge

• Tilføj eller rediger tekst.
• Vælge Badge farve.
• Vælge Badge baggrundsfarve.
• Klik Gemme.

Trin #5: Indstillinger

Standardbredde

• Vælg Mega Menu Bredde: Standard.
• Vælg Mega Menu Position: Standard.
• Gem vinduet.
• Site View: Viser standardbredde med standardposition.

Standard relativ 

• Vælg Mega Menu Bredde: Standard.
• Vælg Mega Menu Position: I forhold.
• Klik Gemme.
• Site View: Viser standardbredde med relativ position.

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.

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.

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.

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.

• Søg nu Nav menu > Træk i Ekit Nav Menu og Dråbe på det valgte område. Sørg for at trække ElementsKit Nav-menuen, ellers vises din oprettede Meg-menu ikke.
• Gå til Menuindstillinger > vælg din oprettede Overskriftsmenu fra rullemenuen.
• Du kan tilføje enhver type widget herfra for at tilpasse din header-skabelon.

Opret Mega Menu ved hjælp af Gutenberg

Hvis du har bygget din hjemmeside i WordPress blocks editor, kan du også opret mega menu i Gutenberg jævnt. GutenKit blok editor plugin kommer med den nemmeste måde at skabe WordPress mega menu i Gutenberg.

Med GutenKit kan du oprette hele menuen i editoren og design mega menu i både vartikal og horisontal orientering.

Alt du behøver er at installere GutenKit Pro plugin og begynde at bygge din smukke side i Gutenberg.

Endeligt output

• Når du er færdig, skal du klikke på Opdatering knappen for at gemme menuen.
• Gå nu til dit websted, og du kan se, at din valgte Megamenu vises i overensstemmelse hermed.

For at lære flere detaljer om oprettelse af megamenu i WordPress, kan du gå gennem dokumentationen af ElementsKit Mega Menu widget til Elementor.

Afslutter

Endelig har vi nået det til ende. Jeg håber, vi var i stand til at hjælpe dig med denne tutorial! Og nu kan du bygge en brugerdefineret Elementor mega-menu ved at bruge ElementsKit!

Du kan se alle disse trin i en enkelt video her.

Hvis du har flere bekymringer eller er stødt på andre problemer, så lad os det vide i kommentarfeltet!