Hvert websted har brug for en menu, og temaets standardoverskrift matcher sjældent et brugerdefineret Elementor-design. Den Navigation Menu widget i Master Addons til Elementor gengiver enhver WordPress-menu inde i Elementor-editoren: vandrette, lodrette eller dropdown-layouts, stylede undermenuer og en hamburger-skift, der tager over på mobilen.
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 Navigation 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 Dropdown, og 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. Menujustering placerer elementerne til venstre, i midten, til højre eller berettiget, og Breakpoint bestemmer, hvornår menuen kollapser i mobilskiftet, ved Tablet- eller Mobilbredden. 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.
Overlap indhold indstiller dropdown til absolut positionering, så den flyder over siden i stedet for at skubbe den ned, og Dropdown Position med Dropdown Min Bredde finjustér hvor undermenuer lander.
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 #
Under den valgte Breakpoint, menuen kollapser bag en hamburger knap. Den Skift kontakt 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:
Skift kontakt styles hamburgeren: farve, baggrund, kant radius, skygger, ikon størrelse, og polstring, med Normal, Hover, og Active stater.
Dropdown Liste styles undermenupanelet: baggrundsfarve, mellemrum fra toppen, kant, udfyldning, boksskygge og en gruppe på underniveau til dybere menuer.
Dropdown 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.
- Slå Overlap indhold til for overskrifter. Uden det kan en åbningsrullemenu skubbe sideindholdet ned i stedet for at flyde over det.
- 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 Breakpoint på en rigtig telefon. En menu med fire elementer kan passe fint til tabletter; en syv-elements man vil have skiftet tidligere.
- Stil dropdown-baggrunden eksplicit. En gennemsigtig undermenu over sideindhold er den mest almindelige menuklage, vi ser; en solid Dropdown List-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 vandret, lodret, og dropdown layouts, stylet undermenuer med brugerdefinerede indikatorer, og en konfigurerbar hamburger toggle, der tager over under dit valgte breakpoint.
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?
Under det Breakpoint, du indstiller i afsnittet Generelt, Tablet eller Mobilbredde. Afsnittet Toggle Switch styler hamburgeren, herunder ikon- eller teksttype, stablede eller indrammede visninger, firkantet eller cirkelformet form og separate normale og aktive ikoner.
Kan menuen være lodret i stedet for vandret?
Ja. Layoutkontrolelementet tilbyder Vandret, Lodret og Dropdown. 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 til slide-out mobil navigation. Gennemse det fulde sæt af Master Addons widgets og udvidelser, og se den prissætning side for hvad Pro tilføjer.
