Mega Menu

En standard dropdown viser en tynd liste af links. En mega menu åbner et bredt panel, der præsenterer en hel sektion af dit websted på én gang: grupperede link kolonner, billeder, ikoner, endda en opfordring til handling. Den Mega Menu forlængelse i Master Addons til Elementor vedhæfter et af disse paneler til ethvert WordPress menupunkt, og du designer selve panelet i den normale Elementor editor, så alt hvad du kan bygge på en side kan leve inde i din navigation. For et hurtigt overblik og demoer, se den gratis Elementor mega menu builder page.

Her er det færdige resultat fra demoen: hovering Products åbner et panel med tre kolonner med grupperede links og et fremhævet billede.

Hvad Mega Menu-udvidelsen gør #

Når det er aktiveret, får hvert element i din WordPress-menu en Mega Menu-konfigurationspopup ind Udseende → Menuer. Slå det til for et element, og det pågældende elements dropdown bliver en Elementor-skabelon. Udvidelsen håndterer:

• Pr-vare paneler: aktiver kun megapanelet på de elementer, der har brug for det; resten forbliver almindelige links.
• Visuelt paneldesign: dropdown-indholdet er bygget med Elementor-editoren ved hjælp af alle widgets, du kan lide.
• Mega Menu Bredde: Standard, Fuld bredde eller Brugerdefineret bredde med en nøjagtig pixelværdi.
• Udløser Effekt: åbn panelet ved at holde markøren eller ved klik.
• Overgang: vælg, hvordan panelet animerer i, Fade i demoen.
• Mobilmenu: beslut, hvad telefoner får, herunder at vise builder-indholdet inde i skiftemenuen.
• Badge og ikon: vedhæft et fremhævningsmærke til menupunktets etiket (gratis) eller et ikon med sin egen farve (Pro).

Før du starter #

• WordPress med Elementor installeret og aktiv; den gratis version er nok.
• Master Addons til Elementor installeret og aktiv. Ny i plugin? Følg installationsvejledning first.
• En WordPress menu allerede oprettet under Udseende → Menuer, selv en grov en; du kan forfine det senere.

NOTE: Du kan styre baggrunden for din mega menu fra siden stil indstilling. Sørg for at sætte baggrundsfarven, billedet eller hvad du foretrækker i siden stil indstilling. Som standard vil det blive indstillet en hvid baggrund. Men du kan gøre tilpasningen af din baggrund fra denne indstilling. Tag et kig –

Trin 1: Aktiver Mega Menu-udvidelsen #

Fra dit WordPress dashboard, gå til Master Addons og åbn Udvidelser fane. Mega Menu sidder i Display Widgets gruppe. Klik på dens toggle, så den bliver lilla, og hit derefter Gem ændringer og vente på den grønne “Indstillinger gemt med succes” meddelelse. Master Addons skibe med alt off som standard, så dit websted kun indlæser, hvad du rent faktisk bruger. Hvis den nye indstilling ikke vises i admin med det samme, hard-opdatere siden (Cmd/Ctrl + Shift + R); caching plugins har tendens til at holde på den gamle admin menu i et minut.

Trin 2: Slå Mega Menu til for din menu #

Open Udseende → Menuer. En ny Master Addons Mega Menu boks vises over menupunktlisten. Skift Aktiver Mega Menu på og vente på den grønne “Mega Menu Gemt” bekræftelse. Hvert element i menustrukturen bærer nu en lilla Mester Mega badge, hvilket betyder, at den kan være vært for et panel.

Trin 3: Aktiver panelet på et menupunkt #

Hold markøren over et element på øverste niveau, typisk noget bredt som Produkter eller Tjenester, og åbn dets indstillinger for Mega Menu. I popup'ens Content fane, flip Megamenu aktiveret til JA. Den Rediger Megamenu-indhold knappen vises; den åbner Elementor-editoren for dette elements panel. Hit Gem i popup'en, når du er færdig.

Aktiver kun panelet på elementer, der virkelig har brug for pladsen. En megamenu på et enkelt Kontakt-link får besøgende til at arbejde hårdere for én destination.

Trin 4: Design panelet i Elementor #

Klik Rediger Megamenu-indhold og den velkendte Elementor-editor åbnes med panelet som lærred. Demoen bygger tre kolonner: to grupper af links under Optag og Analyser overskrifter, plus en billedkolonne, så panelet ikke er en væg med tekst. Udgiv skabelonen, når layoutet er klar; en udkastskabelon gengives ikke på livemenuen, hvilket rejser folk mere end noget andet.

Gruppér links efter, hvordan kunderne tænker frem for dit organisationsdiagram, og sæt loft over hver kolonne på fem til syv links; forbi det, scanning kollapser. Giv en kolonne et job ud over links, såsom et fremhævet produkt eller en opfordring til handling. Og holde billederne komprimeret, fordi panelet indlæses på hver side af webstedet, ikke kun én.

Trin 5: Indstil bredde, udløser og overgang #

Tilbage i punktet popup, den Indstillinger tabulator styrer, hvordan panelet opfører sig:

• Mega Menu Bredde: Standard matcher menuen, Fuld bredde strækker sig kant til kant, Brugerdefineret bredde tager en nøjagtig pixelværdi såsom 800px.
• Mobilmenu: hvilke telefoner modtager; Builder Content viser det samme designede panel inde i menuen for mobilskift.
• Udløser Effekt: Hover åbner panelet ved mouse-over; skift til klik, hvis du foretrækker bevidste åbninger.
• Overgang: indgangsanimationen, Fade i demoen.
• Vis Menu Etiket / Vis Beskrivelse (Pro): valgfri etiket og beskrivelsestekst på varen.

The Badge faneblad i samme popup vedhæfter et fremhævningsmærke, nyttigt til markering af en Ny eller Salgspost. Den Ikon fane, for et ikon og ikon farve, har brug for Master Addons Pro.

Trin 6: Sæt menuen i din overskrift #

Hvis dit tema allerede gengiver WordPress-menuen, fungerer megamenuen med det samme. For fuld headerkontrol skal du bygge en med den gratis Master Addons Theme Builder: oprette en Header skabelon, slip i Nav Menu widget, og vælg den menu, der bærer dine megapaneler. Widgettens sektion Generelt dækker layout, justering og det brudpunkt, hvor menuen kollapser.

Tjek mobilvisningen #

Skift Elementor editor til mobil forhåndsvisning før udgivelse. Menuen kollapser bag en hamburger toggle og links stables lodret. Kontroller panelets reelle højde her; et panel med fire kolonner, der ser skarpt ud på 1440px, kan blive til en endeløs rulle på en telefon. Hvis det løber langt, skal du skjule de dekorative billeder med Elementors responsive synlighedskontroller og holde linkene. Test derefter på en faktisk telefon, da forhåndsvisningen tilnærmer berøringsadfærd, men ikke gengiver den.

Resultatet på siden #

Med fuld bredde valgt, spænder det offentliggjorte panel over hele viewport kant til kant; den indrammede version øverst på denne side viser standardbredden til sammenligning. Uanset hvad, åbner elementet den designede skabelon med den overgang, du har valgt, hvis du holder markøren over elementet.

Hvor en mega menu fungerer godt #

• Butikker. Produktkategorier, bestsellere og et promo-billede i ét panel under Shop.
• Agenturer og servicevirksomheder. Tjenester grupperet efter resultat med et fremhævet casestudie.
• Udgivere og blogs. Emnehubs med det seneste indlæg trukket ind i panelet.
• SaaS-websteder. Funktioner, løsninger og ressourcer organiseret side om side i stedet for indlejrede dropdowns.
• Universiteter og organisationer. Afdelinger og hurtige links, der ellers ville begrave tre niveauer dybt.

Fejlfinding #

• Mega menu vises ikke. Bekræft, at udvidelsesskift er slået til, menupunktet har Megamenu Aktiveret indstillet til JA, og panelskabelonen udgives i stedet for at blive gemt 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. En overordnet beholder har overløb skjult eller et lavt z-indeks. Hæv overskriftens z-indeks, og kontroller overskriftsbeholderens overløbsindstilling.
• Virker på skrivebordet, brudt på mobilen. Næsten altid skifteområdet. Bekræft Nav Menu-widgettens mobilindstillinger, og bekræft, at intet overlejrer trykmålet.

Ofte stillede spørgsmål #

Indpakning #

The Mega Menu udvidelse forvandler en almindelig WordPress-menu til designet navigation med tre træk: slå udvidelsen til, aktiver panelet på et element og opbyg dropdownen i Elementor. Bredde, trigger, overgang, badges og (med Pro) ikoner er alle indstillet fra punktet popup, og parrer det med den frie Tema Bygherre og Nav Menu widget giver dig en komplet brugerdefineret overskrift uden Elementor Pro. Det fulde sæt af Master Addons widgets og udvidelser er én side væk.