Sådan oprettes en megamenu i Elementor uden Pro (Gratis 2026 Guide)

Du kan bygge en fuld mega menu i Elementor uden at købe Elementor Pro. En mega menu er en bred, multi-kolonne dropdown, der viser en hel sektion af dit websted på én gang: links, billeder, ikoner, endda en kontaktformular, i stedet for en tynd lodret liste. Elementors gratis version har ingen mega menu widget, men den gratis Master Addons Mega Menu tilføjer en, og du designer hvert panel med den normale Elementor-editor.

Denne vejledning dækker hele bygningen: aktivering af udvidelsen, vedhæftning af en megamenu til et menupunkt, design af dropdown-panelet og få det rigtigt på mobilen, det trin, de fleste tutorials springer over.

Har du brug for Elementor Pro til en megamenu?

Nej. Der er tre ruter til en megamenu i Elementor, og kun én af dem koster penge:

Hvis en mega menu er den eneste grund til, at du var ved at opgradere, gør den gratis rute det samme job. Master Addons kører sammen med Elementor Pro uden konflikt også, så en eksisterende Pro licens er ikke spildt. Elementor dokumenterer sin egen Pro mega menu workflow her hvis du vil sammenligne de to tilgange side om side; det kræver at tænde flere eksperimentelle funktioner, før du kan starte.

Hvad du har brug for, før du starter

• Elementor (gratis version er fin) installeret og aktiv
• Master Addons til Elementor installeret og aktiv
• En WordPress menu allerede oprettet under Udseende → Menuer (selv en grov en, du kan redigere den senere)

Trin 1: Aktiver Mega Menu Extension

Gå til Master Addons → Tilføjelser & udvidelser i dit WordPress dashboard, find Mega Menu på listen udvidelser, og slå den til. Gem.

Master Addons leveres med alt slukket som standard, så du kun indlæse, hvad du bruger. Det er derfor, dette trin findes overhovedet. Hvis du ikke kan se indstillingen med det samme, hard-opdater admin side (Cmd/Ctrl + Shift + R); caching plugins holde på den gamle admin menu i et minut.

Trin 2: Drej et menupunkt til en megamenu

Open Udseende → Menuer og udvid det øverste niveau, du vil have megapanelet til at falde fra, typisk noget bredt som “Produkter”, “Tjenester” eller “Shop”.

1. Sæt kryds ved Aktiver Mega Menu mulighed på det menupunkt.
2. Vælg panelbredden. Strækninger i fuld bredde fra kant til kant, containerbredde justeres til dit indhold.
3. Gem menuen.

Aktiver det kun på elementer, der virkelig har brug for pladsen. En mega menu på et enkelt “Kontakt” link er værre end et almindeligt link: det får folk til at arbejde hårdere for én destination.

Trin 3: Design Dropdown Panel i Elementor

Panelindholdet er en Elementor-skabelon, hvilket er det, der gør denne tilgang fleksibel: alt hvad du kan bygge på en side, kan du sætte i menuen.

1. Klik Rediger Mega Menu Indhold på menupunktet for at åbne Elementor-editoren.
2. Byg et layout med flere kolonner. Tre eller fire kolonner passer til de fleste navigationer.
3. Udfyld kolonnerne: overskriftswidgets som kategorietiketter, ikonlister som linkgrupper, et billede eller to til visuel forankring.
4. Udgiv skabelonen.

Et par ting, der får megamenuer til at fungere frem for bare at se travle ud:

• Gruppér efter, hvordan kunderne tænker, ikke dit organisationsdiagram. Kolonneoverskrifter skal matche de ord, besøgende bruger.
• Sæt låg på det med omkring fem til syv links pr. kolonne. Forbi det kollapser scanning, og menuen bliver til en væg.
• Giv en kolonne et job. Et fremhævet produkt, en promo eller en opfordring til handling optjener sin plads mere end en fjerde liste over links.
• Hold billeder lette. Menubilleder indlæses på hver side. Komprimer dem og server WebP: en tung mega menu trækker hele dit websteds load time, ikke kun én side.

Trin 4: Tilføj menuen til din overskrift

Hvis dit tema allerede gengiver WordPress-menuen i sin overskrift, fungerer megamenuen med det samme. Der er ikke behov for yderligere trin.

For fuld kontrol over selve overskriften skal du bygge en med den gratis Master Addons Theme Builder: oprette en header skabelon, slip i Nav Menu widget, vælge menuen bærer din mega menu, og indstille visningstilstanden til hele dit websted. Den parring, gratis tema builder plus gratis mega menu, erstatter de to funktioner folk oftest køber Pro for.

Trin 5: Fix den mobile oplevelse

Det er her, de fleste mega menuer falder fra hinanden. Et fire-søjlet panel, der ser skarpt ud på en 1440px skærm, bliver en endeløs rulle på en telefon.

• Skift til mobilvisningen i Elementor, og kontroller panelets reelle højde. Hvis det kører forbi to skærme, skal du klippe indhold til mobil.
• Skjul dekorative billeder på mobilen ved hjælp af Elementors responsive synlighedskontroller; behold linkene, slip ornamentet.
• Stabel kolonner lodret og bekræfte tap mål er komfortabelt store.
• Test på en rigtig telefon, ikke kun editorens forhåndsvisning. Forhåndsvisningen tilnærmer sig; den gengiver ikke berøringsadfærd.

Hvis dine brudpunkter ikke stemmer overens med dit design, er det gratis Brugerdefineret Breakpoints udvidelse lader dig indstille din egen. Det er nyttigt, når standard tablet breakpoint skærer din menu på en akavet bredde.

Fejlfinding

• Mega menu vises ikke. Bekræft, at udvidelsen er slået til, menupunktet har markeret Aktiver Mega Menu, og panelskabelonen er udgivet, ikke efterladt som et udkast. Ryd derefter din cache.
• Panelet vises, men er ustillet. Normalt et cachelagret stylesheet. Rens din sidecache og enhver CDN, og derefter hard-reload.
• Panelet er afskåret eller skjult bag indhold. En forældrecontainer har overflow: hidden eller et lavt z-indeks. Hæv overskriftens z-indeks, og kontroller overskriftsbeholderens overløbsindstilling.
• Virker på skrivebordet, brudt på mobilen. Næsten altid skifte/hamburger-området. Bekræft menuwidgettens mobilindstillinger, og bekræft, at intet overlejrer trykmålet.

Ofte stillede spørgsmål

Relateret læsning

• Sådan bruger du Elementor Theme Builder gratis
• Sådan tilføjes en popup i Elementor gratis
• Sådan redigeres sidefoden i WordPress med Elementor