Elementor Navigasjonsmeny - Bygg en fantastisk meny for WordPress -nettstedet ditt

Leter du etter en måte å lage en fantastisk meny for å forbedre nettstedets UI/UX? I så fall er du på rett sted. Her har vi satt sammen en detaljert guide for å hjelpe deg.

For det første viser vi deg en trinnvis gjennomgang av hvordan du lager en meny for WordPress-nettstedet ditt. Og når du får tak i det, vil vi veilede deg om hvordan du bruker Elementor Navigasjonsmeny -widgeten til å tilpasse og overbelaste WordPress -menyen din.

Innholdsfortegnelse:

• Hvorfor trenger du en tilpasset navigasjonsmeny?
• Lag en grunnleggende WordPress-meny ved hjelp av Elementor
• 1. Lag en enkel meny for WordPress-nettstedet ditt
• 2. Velg og tilpasse navigasjonsmenyelementene
• 3. Lag undermenyer - Foreldre- og barnemenyelementer (valgfritt)
• 4. Administrer menyplasseringen og publiser
• Hvordan lage en navigasjonsmeny ved hjelp av Elementor pro nav 'widget
• Elementor Nav-Menu widget Nøkkelfunksjoner
• Lag en meny med nav-menu pro widget
• Mobil responsiv meny
• Innpakking

Hvorfor trenger du en tilpasset navigasjonsmeny?

Det er viktig å vite at navigasjonsmenyene er viktige ikke bare for å bringe trafikk til nettstedet ditt, men også for bedre SEO-rangering.

Nav-menyene er faktisk først og fremst designet for brukermedvirkning, men dette er ikke det eneste formålet.

Den nest viktigste faktoren er å se på rollen som "WebCrawler" eller Bots som er designet for å gjennomsøke nettstedene og indeksere innholdet til det relevante nivået og rapportere tilbake til søkemotoren for å rangere innholdet på rett sted.

Derfor, hvis du lager for kompliserte menyer, vil det være vanskelig for robotene å rangere innholdet, men også miste de besøkende.

Kort sagt, "enkel navigering" er en sentral bidragsyter til å forbedre bedre brukeropplevelse, så vel som det spiller en viktig rolle for å øke nettstedets rangering og øke trafikken.

Det er en utmerket grunn for mange bedriftsnettsteder å beholde et enkelt navigasjonsikon i stedet for en kompleks menylinje, som lastes opp til en fullskjermmeny når du klikker på den.

Takket være Elementor pro-widgeten med en 100% responsiv navigasjonsmeny, kan du lage en piksel perfekt og utrolig fleksibel menylinje uten å bruke noen kode.

I denne opplæringen vil vi demonstrere for deg hvordan du bruker Elementor-navigasjonsmeny-widgeten for å få den tilpassede, avanserte WordPress-menyen.

Før du begynner med Elementor Navigation-widgeten, la oss utforske hvordan vi kan lage en enkel WordPress-meny ved å bruke Elementor gratisversjon.

Lag en grunnleggende WordPress-meny ved hjelp av Elementor

For å lage en WordPress -meny trenger du ikke å installere noen spesielle plugin -er. Som standard har WordPress en brukervennlig menybygger som hjelper deg med å lage enkle navigasjonsmenyer for nettstedet ditt.

Når det er sagt, har du ikke tilgang til noen tilpasningsalternativer for menyen. Det vil ta på seg designet av det nåværende aktive WordPress -temaet. Men hvis det er alt du vil, så er dette en utmerket måte å sette opp en navigasjonsmeny for WordPress -nettstedet ditt.

1. Lag en enkel meny for WordPress-nettstedet ditt

Først av alt må du logge deg på WordPress backend -dashbordet.

Gå nå fra venstre sidefelt til Utseende > Menyer . Her finner du en to-kolonne layout med «Legg til menyelementer» til venstre og «Menystruktur» til høyre.

Under Menystruktur finner du et felt for "Menynavn". Dette vil være navnet på menyen vi skal lage akkurat nå. La oss kalle det Meny 1.

Merk : Ikke bekymre deg. Leserne dine vil ikke kunne se menynavnene. Det er en funksjon som hjelper deg med å holde alle de forskjellige menyene dine organisert.

Etter å ha gitt menyen et navn, klikker du på "Opprett meny" -knappen for å gjøre den tilgjengelig. Nå må du legge til de forskjellige menyelementene.

2. Velg og tilpasse navigasjonsmenyelementene

Nå kommer delen der du fyller ut den nye menyen med menyelementer. Under delen "Legg til menyelementer" på venstre side finner du en organisert liste over ting du kan legge til i menyen.

Som standard inneholder dette sider, innlegg, destinasjonssider, egendefinerte lenker og kategorier.

bare velg menyelementene du vil legge til ved hjelp av avmerkingsboksen, og klikk deretter på "Legg til i meny" -knappen. Dette vil fylle ut menyen din med alle de valgte menyelementene.

Merk : Legg merke til at hver seksjon under "Legg til menyelementer" har muligheten til å bytte mellom – Nyeste , Vis alle og Søk . Husk å bruke disse alternativene hvis du har mange ting.

Når du er ferdig med å legge til alle menyelementene, trykker du på "Lagre meny" -knappen og går videre til neste trinn.

3. Lag undermenyer - Foreldre- og barnemenyelementer (valgfritt)

Visste du at WordPress som standard også lar deg lage undermenyer? Når du oppretter undermenystrukturen, har du et overordnet menyelement og et underordnet menyelement.

Når en bruker holder musepekeren over det overordnede menyelementet, vil den avsløre alle menyelementene som er skjult under den.

Kult, ikke sant?

Alt du trenger å gjøre er å velge et menyelement du vil ha på hovedmenyen for å lage en undermenystruktur. Deretter drar og slipper du alle menyelementene du vil ha som underordnede menyelementer under den. Bare dra den til høyre, og du er ferdig!

4. Administrer menyplasseringen og publiser

Nå som du har opprettet din nye meny og lagt til undermenyer, er det på tide å administrere plasseringen.

Øverst i menyredigereren bør du legge merke til et alternativ som heter "Administrer steder." Klikk på den, og noe som ligner på følgende skjerm skal dukke opp:

Nå vil de tilgjengelige menyplasseringene avhenge av temaet du har installert. I denne ex amp le har vi et tema som støtter 3 menyer.

Etter å ha tilordnet en meny til hver av de tilgjengelige menyplasseringene, klikker du på "Lagre endringer" og det er det.

Du kjenner nå alle de grunnleggende menyfunksjonene WordPress tilbyr som standard. Men hvis du vil ha mer tilpasning og funksjonalitet, kan du lese videre for å lære om Elementor Pro Nav Menu Widget.

Hvordan lage en navigasjonsmeny ved hjelp av Elementor pro nav 'widget

Hvis du liker å legge til en tilpasset navigasjonsmeny på WordPress-siden din, trenger du Elementor Pro-versjonen. Elementor Pro-versjonen kommer med Elementor nav-widget sammen med mange andre spesialfunksjoner som 300+ maler, en temabygger, en popup-widget, WooCommerce-widgeter og mange andre interessante funksjoner.

Hva er de spesifikke nøkkelfunksjonene i selve Nav Menu-widgeten? Her er en kort introduksjon.

Elementor Nav-Menu widget Nøkkelfunksjoner

• Nav-menyen widgeten gir deg frihet til å plassere menyen hvor som helst du vil. På overskriften eller toppen eller hvor som helst på siden din.
• Du kan legge til flere menyer på nettstedet ditt og også på sidene hver for seg eller globalt.
• Gi et blendende blikk på menyen din ved å bruke animasjon, sveveeffekter eller aktiv status
• Lag en mobil responsiv meny på nettstedet ditt og kontroller hvordan nettstedet ditt skal se ut på mobilskjermbilder
• Tilpass farge, typografi og polstring eller andre justeringer på menylinjen
• Lag en piksel perfekt meny med riktig presisjon for justering, avstand og polstring.

Lag en meny med nav-menu pro widget

Du må lage en grunnleggende WordPress-meny som vi har nevnt ovenfor, og deretter tilpasser du standard WordPress-menyen ved hjelp av pro-nav-menyen widget. Når du har opprettet den primære listen, er neste trinn å legge den til ønsket sted, dvs. Header-delen.

Når du er ferdig med grunnleggende innstillinger, la oss tilpasse menyen ved hjelp av nav-menyen widget.

I det øverste hjørnet av innstillingsdelen er det tre tilgjengelige alternativer; Innhold, stil og avansert.

Layout-delen : du har tre alternativer Horisontal, vertikal eller et skjult rullegardin.

• Horisontal: Det horisontale oppsettet er det vanligste oppsettet som brukes av nettstedene. Den sprer seg over skjermen fra retning fra venstre til høyre.
• Vertikal: Du vil også finne en vertikal layout på mange nettsteder, spesielt på nettsteder som tilbyr kreative tjenester. Ved vertikalt oppsett vil spredningen av navigasjonslinjen være fra topp til bunn.
• Dropdown: Dropdown-menyer er også ganske vanlige. Nedtrappinger er vertikale oppsett og krever interaksjon med brukeren for å avsløre. De brukes mest til å skape et rent design.

Juster seksjon : denne delen hjelper deg med å justere menytekstelementene; midt, høyre eller venstre.

Animasjonsseksjon : denne delen lar deg legge til animasjonseffekter under, over eller dobbel linje animasjonseffekter. Du kan også velge ramme, bakgrunn og subtile tekstanimasjoner.

Understreket animasjoner er som følger:

• Fade: Fade-animasjonen tilbyr fade-animasjon under menyelementene.
• Lysbilde: Lysbildeanimasjonen skyver linjen under menyelementene.
• Grow : Grow animasjonen vokser fra midten til utover og gir en følelse av vekst.
• Drop in : Drop in animasjon flyter fra bunn til topp.
• Drop out: Drop out animasjon flyter fra topp til bunn.

På samme måte er det innrammet, overlinje, dobbel linje, bakgrunn og tekstanimasjon. Hver og en av dem tilbyr sitt eget sett med animasjoner, og du kan sjekke dem selv for å lære hva du får med dem.

Pekerseksjon : velg pekertypen fra rullegardinmenyen.

Undermenyindikatorseksjon : Elementor-widgeten er fullpakket med mange alternativer for undermenystyling. Hvor du ikke bare kan kontrollere fargen, stilen og også bakgrunnen til menyen.

Polstring og menyavstand: polstring kan justeres raskt. Du kan endre den horisontale polstring for meny og undermeny, vertikal polstring, mellomrom også høyre, venstre og sentrert justering.

Elementor nærmer seg menyavstand og polstring ekstremt godt. De jobbet hardt bak dørene for å sikre at de kan bringe verktøyene til utvikleren, slik at de enkelt kan lage designet som de tenker på.

Avstanden mellom menyene tilbyr mange alternativer, inkludert:

• Mellomrom mellom menyelementene
• Horisontal og vertikal polstring for meny- og undermenyelementer
• Senter, venstre, høyre og rettferdig justering.

Fargebakgrunn og typografi : Du kan få ditt skreddersydde merkeutseende ved hjelp av ønsket fargevalg og bakgrunnsfarge. Du kan også velge de gjennomsiktige eller semi-transparente menyalternativene også.

Som designer kan du leke med disse alternativene så mye du kan, og sørge for at du designer bakgrunnene etter eget ønske.

Mobil responsiv meny

Mobil er en viktig del av nettet, og det er derfor Elementor-utviklere også tilbyr verktøy slik at du også kan lage navbar for mobilen.

Elementor-widgeten lar deg fullstendig kontroll for mobilmenyalternativer på WordPress. Du kan kontrollere skjermvisningen på mobilen med et eget sett med innstillinger for skjermer som bare er mobile. Det er et alternativ for mobilskjerminnstillinger nederst i Elementor-innstillingsdelen der du kan se alternativene for mobilskjerm.

Kort sagt er Elementors mobile menyfunksjoner som nedenfor:

• Full bredde på mobil: Du får også muligheten til å angi full bredde eller begrenset bredde.
• Bremsepunkter for nettbrett eller mobil: Du kan bruke brytepunktinnstillingene til å angi mobilmenyen for mobil eller nettbrett.
• Vertikale og trekkspillmenyer: Elementor tilbyr også muligheten til å vise et sammenleggbart hamburgerikon.
• Veksle justering: Hamburgerikonet kan justeres i midten, venstre eller høyre.
• Sides / Center alignment: Velg justeringen til mobilmenyen.

Responsiv navigering: Tilbyr responsiv plassering av menyen.

Innpakking

Menyen er en av de viktigste funksjonene på et nettsted. Fordi det hjelper besøkende å gå gjennom nettstedet ditt, og hvis du opprettet en liste på en smart måte, vil det hjelpe å holde besøkende på nettstedet ditt i lang tid. Menyen er like viktig som hele nettstedets layout, topptekst og bunntekst.

Derfor må meny-widgeten være i stand til å levere ditt unike merkeutseende med alle de essensielle funksjonene. Elementor Navigation -widgeten kommer med funksjonsrike funksjoner som lar kundene tilpasse menydelen for å passe inn i merkevarens stemme. Nå kan du bruke en skreddersydd stilig meny på tvers av nettstedet ditt, på landingssiden, overskriften eller en hvilken som helst annen seksjon der du vil vise den.