Hvert websted har brug for en menu, og temaets standardoverskrift matcher sjældent et brugerdefineret Elementor-design. Den gratis Nav Menu widget i Master Addons til Elementor gengiver enhver WordPress-menu inde i Elementor-editoren: vandrette eller lodrette layouts indstillet pr. enhed, stylede undermenuer og en hamburger-skift, der tager over på telefoner.
Denne guide går gennem widgetten fra det første træk til en stylet menu med en fungerende dropdown på live-siden.
Hvad Navigation Menu widget gør #
Widgetten trækker en menu, du har bygget under Udseende, Menuer og gengiver det som et Elementor-element. Du vælger layout og adfærd, styler hver tilstand af emnerne, dropdowns og mobilen skifter, alt sammen fra Elementor-panelet. Menupunkterne selv, deres etiketter, rækkefølge og undermenuer forbliver administreret i WordPress, så indholdsredaktører rører aldrig Elementor for at tilføje en side til menuen.
Før du starter #
- WordPress med Elementor installeret og aktiv.
- Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
- Nav Menu-widgetten aktiveret i indstillingspanelet Master Addons under Navigationswidgets.
- En menu oprettet under Udseende, Menuer i dit dashboard. Demoen bruger en “hovedmenu” med Hjem, Priser, Team og Kontakt, plus en FAQ-undermenu under Kontakt.
Sådan tilføjes Navigation Menu widget #
I Elementor-editoren skal du søge i Elementer panel til Nav Menu og træk det over på siden, typisk ind i en overskriftssektion. Widgetten gengiver din første WordPress-menu med det samme.
Vælg menuen og layoutet #
The General sektion driver hele widgetten. Vælg Menu viser hver menu fra din menuskærm; vælg den, der skal gengives. Layout tilbyder Vandret, Lodret og Hamburger (Pro), og du kan indstille den separat for hver enhed. For lodrette menuer, Type tilføjer adfærden: Normal, Skift, Accordion eller Side. Her er demo-menuen i et lodret layout:
For et hovedstød er vandret det sædvanlige valg. Justering placerer elementerne til venstre, i midten, til højre eller berettiget. Der er ingen enkelt indstilling for brudpunkt: skift Elementor til tablet- eller telefonvisning, og vælg layoutet for den pågældende enhed. Telefoner bruger hamburger-skifteren som standard. Værd at prøve Lodret én gang, selvom du ikke har brug for det; at se begge layout får justeringsmulighederne til at klikke.
Konfigurer dropdown #
The Dropdown Menu sektion styrer undermenuens adfærd og indikator:
- Dropdown Indikator: vis eller skjul pilen ved siden af elementer, der bærer en undermenu.
- Indikatorposition, mellemrum mellem, ikonstørrelse: hvor pilen sidder, og hvor stor den er.
- Dropdown ikon: skift standard chevron for ethvert ikon, med Normal og Hover tilstande og en Rotate kontrol.
- Dropdown bredde og justering: undermenupanelets størrelse og tekstjustering.
- Undermenu Indikator: ikonet for menuer på tredje niveau.
Opsæt mobilskiftet #
Når en enhed bruger hamburgerlayoutet, kollapser menuen bag en vippeknap. Den Hamburger Menu sektion konfigurerer det: Justering, Type (Ikon, tekst eller begge dele), View (Standard, stablet eller indrammet), Shape (Firkantet eller Cirkel), og separate ikoner for tilstandene Normal og Aktiv. Skift editoren til mobil forhåndsvisning, og skiften vises med menuen stablet under den:
Stil menupunkterne #
I Style faneblad, Hovedmenu Vare dækker linkene på øverste niveau. Typografi håndterer skrifttypen:
Under den, Normal, Hover, og Aktiv faner hver bærer Color, Vare Baggrund Farve, og Tekstskygge, plus delt Vandret og Lodret Polstring, Space Between, og grænsekontroller. Demoen indstiller en blå hover farve, forhåndsvisning live som markøren krydser Prissætning:
Style skift, rulleliste og elementer #
Tre flere Style sektioner afslutter jobbet:
Hamburger styler skiften: farve, baggrund, grænseradius, skygger, ikonstørrelse og udfyldning med Normal-, Hover- og Active-tilstande.
Dropdown Menu styles undermenupanelet: baggrundsfarve, mellemrum fra toppen, kant og polstring. Dropdown undermenu dækker dybere menuer.
Dropdown Menu Vare styler linkene inde i panelet med de samme tre tilstande plus a Divider gruppe for linjen mellem punkter:
Resultatet på siden #
På live-siden gengives menuen i din styling: svævetilstande affyres, og undermenuen FAQ falder under Kontakt præcis, hvor dropdown-indstillingerne placerer den.
Almindelige brugstilfælde #
- Brugerdefinerede overskrifter bygget med Elementor, hvor temamenuen ikke kan følge designet.
- Landingssider med deres egen slanke menu, adskilt fra den brede.
- Sidebjælkenavigation brug af det lodrette layout på dokumentations- eller kategorisider.
- Mobil-første menuer læner sig op ad vippens ikon, visning og formindstillinger.
- Menuer på flere niveauer med stylede dropdowns og paneler på underniveau.
Tips til en bedre navigationsmenu #
- Byg menuen i WordPress først. Widgetten gengiver menuer fra Udseende, Menuer; det skaber dem ikke. Struktur der, stil her.
- Giv Hover og Active forskellige farver. Hover svarer markøren; Active fortæller besøgende, hvilken side de er på. Samme farve spilder signalet.
- Tjek hver enhed på en rigtig telefon. En menu med fire elementer kan passe fint til tablets, mens en menu med syv elementer også kan have brug for et lodret layout på tablets.
- Stil dropdown-baggrunden eksplicit. En gennemsigtig undermenu over sideindhold er den mest almindelige menuklage, vi ser; en solid Dropdown Menu-baggrund løser det med et klik.
Video Tutorial #
Hvis du gerne vil se Navigation Menu widget i aktion, går denne video gennem hele opsætningen, fra at vælge menuen til den stylede dropdown på live-siden:
Ofte stillede spørgsmål #
Hvad er Navigation Menu widget i Master Addons?
Det er en Elementor widget, der gengiver enhver WordPress menu med fuld styling kontrol. Det tilbyder vandrette og lodrette layouts indstillet pr. enhed, stylet undermenuer med brugerdefinerede indikatorer, og en konfigurerbar hamburger toggle, som telefoner bruger som standard.
Hvor tilføjer eller fjerner jeg menupunkter?
I WordPress, under Udseende, Menuer. Widgetens Vælg Menu dropdown lister hver menu, du har bygget der, og gengiver den, du vælger. Elementer, rækkefølge og undermenuer administreres i WordPress; widgeten håndterer layout og styling.
Hvordan laver jeg en dropdown undermenu?
Nest elementer i din WordPress menu ved at trække dem under en forælder på Menuer skærmen. Widget viser en dropdown indikator ved siden af forældre automatisk, og Dropdown Menu og Dropdown List sektioner styrer panelets adfærd og styling.
Hvornår vises mobilhamburgermenuen?
På telefoner som standard. Master Addons Pro lader dig vælge Hamburger layout for enhver enhed, med Popup og Offcanvas typer. Den Hamburger Menu sektion stilarter skifte, herunder ikon eller teksttype, stablet eller indrammet visninger, firkant eller cirkel form, og adskille normale og aktive ikoner.
Kan menuen være lodret i stedet for vandret?
Ja. Layoutkontrolelementet tilbyder Vandret, Lodret og Hamburger (Pro). Lodret passer til sidebjælker og dokumentationssider, og Type-kontrolelementet tilføjer Toggle-, Accordion- eller Side-adfærd øverst.
Indpakning #
Navigation Menu widget sætter webstedsmenuen, hvor resten af dit design bor: Vælg en WordPress menu, vælg layoutet, stil elementerne, dropdowns og mobil skifte, og udgiv. Det parrer naturligt med Off-Canvas indhold widget (Pro) til slide-out mobil navigation. Gennemse det fulde sæt af Master Addons widgets og udvidelser, og se den Nav Menu widget side til en sammenligning med Elementor Pros menuwidgets.
