Elementor Navigation Menu – Bygg en fantastisk meny for WordPress-nettstedet ditt

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

Først viser vi deg en steg-for-steg gjennomgang av hvordan du lager en meny for WordPress-nettstedet ditt. Og når du først har fått kjennskap til det, vil vi veilede deg om hvordan du bruker Elementor Navigation Menu-widgeten for å tilpasse og superlade 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 tilpass navigasjonsmenyelementer
• 3. Lag undermenyer – Menyelementer for foreldre og barn (valgfritt)
• 4. Administrer menyplasseringen og publiser
• Hvordan lage en navigasjonsmeny ved hjelp av Elementor pro nav-widgeten
• Elementor Nav Meny-widget Nøkkelfunksjoner
• Lag en meny med nav-menu pro widget
• Mobil responsiv meny
• Avslutter

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.

Faktisk er nav-menyene først og fremst designet for brukerengasjement, men dette er ikke det eneste formålet.

Den nest viktigste faktoren er å holde øye med rollen som "WebCrawler" eller boter som er designet for å gjennomsøke nettsidene 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 ditt, men du vil også miste besøkende.

Kort sagt, "lett navigering" er en sentral bidragsyter til å forbedre en bedre brukeropplevelse, og spiller en viktig rolle i å øke rangeringen av nettstedet vårt og øke trafikken.

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

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 hjelp av Elementor gratisversjon.

Lag en grunnleggende WordPress-meny ved hjelp av Elementor

Nå, for å lage en WordPress-meny, trenger du ikke å installere noen spesielle plugin . Som standard kommer WordPress med en brukervennlig menybygger, som vil hjelpe deg å lage enkle navigasjonsmenyer for nettstedet ditt.

Når det er sagt, vil du ikke ha tilgang til noen tilpasningsalternativer for menyen. Det vil ta på seg utformingen av det for øyeblikket aktive WordPress-temaet. Men hvis det er alt du vil ha, 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 må du logge inn på WordPress-backend-dashbordet ditt.

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 blir 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, klikk på "Opprett meny"-knappen for å gjøre den tilgjengelig. Nå må du legge til de forskjellige menyelementene.

2. Velg og tilpass navigasjonsmenyelementer

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 alle dine sider, innlegg, landingssider, egendefinerte lenker og kategorier.

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

Merk : Legg merke til at hver seksjon under "Legg til menyelementer" har muligheten til å bytte mellom – Siste , 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 – Menyelementer for foreldre og barn (valgfritt)

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

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

Kult ikke sant?

Nå for å lage en undermenystruktur, er alt du trenger å gjøre å velge et menyelement som du vil skal være på den overordnede menyen. Deretter drar og slipper du alle menyelementene du vil ha som underordnede menyelementer under den. Nå er det bare å dra det til høyre og du er ferdig!

4. Administrer menyplasseringen og publiser

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

Øverst i menyredigeringsprogrammet bør du legge merke til et alternativ som heter "Administrer steder." Klikk på den og noe som ligner på følgende skjermbilde skal vises:

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

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

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

Hvordan lage en navigasjonsmeny ved hjelp av Elementor pro nav-widgeten

Hvis du liker å legge til en tilpasset nav-meny 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 til selve Nav Menu-widgeten? Her er en kort introduksjon.

Elementor Nav Meny-widget Nøkkelfunksjoner

• Nav-meny-widgeten gir deg friheten 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 dine separat eller globalt.
• Gi menyen din et blendende utseende ved å bruke animasjon, sveveeffekter eller aktiv status
• Lag en mobil responsiv meny for nettstedet ditt og kontroller hvordan nettstedet ditt vil se ut på mobilskjermer
• Tilpass farger, typografi og polstring eller andre justeringer av menylinjen
• Lag en pikselperfekt meny med riktig presisjon av 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 vil du tilpasse standard WordPress-menyen ved å bruke pro-nav-meny-widgeten. Når du har opprettet den primære listen, er neste trinn å legge den til ønsket plassering, dvs. Overskriftsseksjon.

Nå når du er ferdig med grunnleggende innstillinger, la oss tilpasse menyen ved å bruke nav-meny-widgeten.

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

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

• Horisontal: Den horisontale layouten er den vanligste layouten som brukes av nettstedene. Den sprer seg over skjermen fra venstre til høyre.
• Vertikal: Du vil også finne en vertikal layout på mange nettsteder, spesielt på nettsteder som tilbyr kreative tjenester. Ved en vertikal layout vil spredningen av navigasjonslinjen være fra topp til bunn.
• Rullegardin: Rullegardinmenyer er også ganske vanlige. Rullegardiner er vertikale layouter og krever interaksjon med brukeren for å avsløre. De brukes mest til å lage et rent design.

Juster seksjon : denne seksjonen 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å gå for rammen, bakgrunnen og subtile tekstanimasjoner.

Understrekingsanimasjonene 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 ut selv for å lære hva du får med dem.

Pekerdel : velg type peker fra rullegardinmenyen.

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

Polstring og menyavstand: polstring kan justeres raskt. Du kan endre horisontal utfylling for meny og undermeny, vertikal utfylling, 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 de tenker på.

Menyavstanden tilbyr mange alternativer, inkludert:

• Mellomrom mellom menyelementer
• Horisontal og vertikal polstring for meny- og undermenyelementer
• Senter-, venstre-, høyre- og justert 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.

Som designer kan du leke med disse alternativene så mye du kan og sørge for at du designer bakgrunnene slik du liker det.

Mobil responsiv meny

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

Elementor-widget lar deg full kontroll over mobile menyalternativer på WordPress. Du kan kontrollere mobilskjermvisningen med et eget sett med innstillinger for mobilskjermer. Det er et alternativ for mobilskjerminnstillinger nederst i Elementor-innstillingsdelen hvor du kan se alternativene for mobilskjermen.

Kort sagt, Elementors mobile menyfunksjoner er som nedenfor:

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

Responsiv navigering: Tilbyr responsiv posisjonering av menyen.

Avslutter

Menyen er en av de viktigste funksjonene på ethvert nettsted. Fordi det hjelper de besøkende å gå gjennom nettstedet ditt, og hvis du har laget en liste på en smart måte, vil det hjelpe å holde de besøkende på nettstedet ditt i lang tid. Menyen er like viktig som for ethvert nettsteds hele layout, toppteksten og bunntekstdelen.

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.