Elementor Navigation Menu – Byg en fantastisk menu til dit WordPress-websted

Leder du efter en måde at skabe en fantastisk menu for at hjælpe med at forbedre dit websteds UI/UX? Hvis ja, så er du på det rigtige sted. Her har vi samlet en detaljeret guide til at hjælpe dig.

Først viser vi dig en trin-for-trin gennemgang af, hvordan du opretter en menu til dit WordPress-websted. Og når du først har fået styr på det, vil vi guide dig til, hvordan du bruger Elementor Navigation Menu-widgetten til at tilpasse og superlade din WordPress-menu.

Indholdsfortegnelse:

• Hvorfor har du brug for en brugerdefineret navigationsmenu?
• Opret en grundlæggende WordPress-menu ved hjælp af Elementor
• 1. Lav en simpel menu til din WordPress hjemmeside
• 2. Vælg og tilpas punkter i navigationsmenuen
• 3. Opret undermenuer – menupunkter for forældre og børn (valgfrit)
• 4. Administrer din menuplacering og udgiv
• Sådan opretter du en navigationsmenu ved hjælp af Elementor pro nav'-widget
• Elementor Nav-Menu widget Nøglefunktioner
• Opret en menu med nav-menu pro widget
• Mobil responsiv menu
• Indpakning

Hvorfor har du brug for en brugerdefineret navigationsmenu?

Det er vigtigt at vide, at navigationsmenuerne er vigtige ikke kun for at bringe trafik til dit websted, men også for bedre SEO-rangering.

Faktisk er nav-menuerne primært designet til brugerinddragelse, men dette er ikke det eneste formål.

Den næstvigtigste faktor er at holde øje med rollen som "WebCrawler" eller bots, der er designet til at crawle webstederne og indeksere indholdet til det relevante niveau og rapportere tilbage til søgemaskinen for at rangere indholdet det rigtige sted.

Derfor, hvis du laver for komplicerede menuer, så ville det være svært for bots at rangere dit indhold, men du vil også miste dine besøgende.

Kort sagt er "nem navigation" en afgørende bidragyder til at forbedre en bedre brugeroplevelse og spiller en afgørende rolle i at booste vores webstedsrangering og øge trafikken.

Det er en glimrende grund for mange virksomhedswebsteder til at beholde et enkelt navigationsikon i stedet for en kompleks menulinje, som indlæses op til en fuldskærmsmenu, når der klikkes på dem.

Takket være Elementor pro-widgetten med en 100 % responsiv navigationsmenu kan du skabe en pixel-perfekt og utrolig fleksibel menulinje uden at bruge nogen kode.

I denne vejledning vil vi demonstrere for dig, hvordan du bruger Elementor-navigationsmenu-widgetten til at få den tilpassede, avancerede WordPress-menu.

Før du starter med Elementor Navigation-widgetten, lad os undersøge, hvordan vi kan oprette en simpel WordPress-menu ved hjælp af Elementor gratis version.

Opret en grundlæggende WordPress-menu ved hjælp af Elementor

Nu, for at oprette en WordPress-menu, behøver du ikke at installere nogen specielle plugin s. Som standard kommer WordPress med en brugervenlig menubygger, der hjælper dig med at oprette enkle navigationsmenuer til dit websted.

Når det er sagt, vil du ikke have adgang til nogen tilpasningsmuligheder for menuen. Det vil tage sig af designet af det aktuelt aktive WordPress-tema. Men hvis det er alt, hvad du ønsker, så er dette en glimrende måde at oprette en navigationsmenu til dit WordPress-websted.

1. Lav en simpel menu til din WordPress hjemmeside

Først og fremmest skal du logge ind på dit WordPress-backend-dashboard.

Gå nu fra venstre sidebjælke til Udseende > Menuer . Her finder du et layout med to kolonner med "Tilføj menupunkter" til venstre og "Menustruktur" til højre.

Under menustruktur finder du et felt til "Menunavn". Dette vil være navnet på den menu, vi vil oprette lige nu. Lad os kalde det Menu 1.

Bemærk : Bare rolig. Dine læsere vil ikke kunne se menunavnene. Det er en funktion, der hjælper dig med at holde alle dine forskellige menuer organiseret.

Når du har givet din menu et navn, skal du klikke på knappen "Opret menu" for at gøre den tilgængelig. Nu skal du tilføje de forskellige menupunkter.

2. Vælg og tilpas punkter i navigationsmenuen

Nu kommer den del, hvor du udfylder din nye menu med menupunkter. Under afsnittet "Tilføj menupunkter" til din venstre side finder du en organiseret liste over ting, som du kan tilføje til din menu.

Som standard indeholder dette alle dine sider, indlæg, landingssider, tilpassede links og kategorier.

vælg blot de menupunkter, du vil tilføje, ved at bruge afkrydsningsfeltet, og klik derefter på knappen "Tilføj til menu". Dette vil udfylde din menu med alle dine valgte menupunkter.

Bemærk : Bemærk, at hver sektion under "Tilføj menupunkter" har mulighed for at skifte mellem - Seneste , Vis alle og Søg . Husk at bruge disse muligheder, hvis der er mange varer.

Når du er færdig med at tilføje alle menupunkter, skal du trykke på knappen "Gem menu" og gå videre til næste trin.

3. Opret undermenuer – menupunkter for forældre og børn (valgfrit)

Vidste du, at WordPress som standard også giver dig mulighed for at oprette undermenuer? Når du opretter undermenustrukturen, har du et overordnet menupunkt og et undermenupunkt.

Når en bruger svæver over det overordnede menupunkt, vil det afsløre alle de underordnede menupunkter gemt under det.

Cool ikke?

Nu for at oprette en undermenustruktur, er alt hvad du skal gøre at vælge et menupunkt, som du ønsker skal være på den overordnede menu. Træk og slip derefter alle de menupunkter, du ønsker som underordnede menupunkter, under den. Nu skal du bare trække den til højre, og du er færdig!

4. Administrer din menuplacering og udgiv

Nu hvor du har oprettet din nye menu og tilføjet undermenuer, er det tid til at administrere dens placering.

Øverst i din menueditor bør du bemærke en mulighed kaldet "Administrer placeringer." Klik på det, og noget lignende til følgende skærm skulle dukke op:

Nu vil de tilgængelige menuplaceringer afhænge af det tema, du har installeret. I dette amp har vi et tema, der understøtter 3 menuer.

Efter at have tildelt en menu til hver af de tilgængelige menuplaceringer, klik på "Gem ændringer", og det er det.

Du kender nu alle de grundlæggende menufunktioner, som WordPress tilbyder som standard. Men hvis du ønsker mere tilpasning og funktionalitet, så læs videre for at lære om Elementor Pro Nav Menu Widget.

Sådan opretter du en navigationsmenu ved hjælp af Elementor pro nav'-widget

Hvis du kan lide at tilføje en tilpasset nav'-menu til dit WordPress-websted, skal du bruge Elementor Pro-versionen. Elementor Pro-versionen kommer med Elementor nav-widget sammen med mange andre specielle funktioner såsom 300+ skabeloner, en temabygger, en popup-widget, WooCommerce-widgets og mange andre interessante funktioner.

Hvad er de specifikke nøglefunktioner i selve Nav Menu-widgetten? Her er en kort introduktion.

Elementor Nav-Menu widget Nøglefunktioner

• Nav-menu-widgetten giver dig frihed til at placere din menu hvor som helst du vil. På din sidehoved eller øverst eller hvor som helst på din side.
• Du kan tilføje flere menuer på dit websted og også på dine sider separat eller globalt.
• Giv din menu et blændende udseende ved at bruge animation, svævende effekter eller aktiv status
• Opret en mobil responsiv menu på dit websted, og kontroller, hvordan dit websted vil se ud på mobilskærme
• Tilpas farve, typografi og polstring eller andre justeringer af din menulinje
• Skab en pixel-perfekt menu med den rette præcision af justering, mellemrum og polstring.

Opret en menu med nav-menu pro widget

Du skal oprette en grundlæggende WordPress-menu, som vi har nævnt ovenfor, og derefter vil du tilpasse standard WordPress-menuen ved hjælp af pro-nav-menu-widgetten. Når du har oprettet den primære liste, så er næste trin at tilføje den til din ønskede placering, dvs.

Nu, når du er færdig med de grundlæggende indstillinger, lad os tilpasse menuen ved hjælp af nav-menu-widgetten.

I det øverste hjørne af indstillingssektionen er der tre muligheder tilgængelige; Indhold, stil og avanceret.

Layoutsektionen : du har tre muligheder Vandret, lodret eller en skjult harmonika.

• Vandret: Det vandrette layout er det mest almindelige layout, der bruges af webstederne. Det spreder sig over skærmen fra venstre mod højre.
• Lodret: Du vil også finde et vertikalt layout på mange websteder, specifikt på websteder, der tilbyder kreative tjenester. I tilfælde af et lodret layout vil spredningen af ​​navigationslinjen være fra top til bund.
• Dropdown: Dropdown-menuer er også ret almindelige. Dropdowns er lodret layout og kræver interaktion med brugeren for at afsløre. De bruges mest til at skabe et rent design.

Juster sektion : denne sektion hjælper dig med at justere menutekstelementerne; midten, højre eller venstre.

Animationssektion : denne sektion giver dig mulighed for at tilføje animationseffekter under, over eller dobbeltlinjeanimationseffekter. Du kan også gå efter rammen, baggrunden og subtile tekstanimationer.

Understregningsanimationerne er som følger:

• Fade: Fade-animationen tilbyder fade-animation under menupunkterne.
• Slide: Slideanimationen glider bjælken under menupunkterne.
• Grow : Grow-animationen vokser fra midten til udad og giver en følelse af vækst.
• Drop in : Drop in animation flyder fra bund til top.
• Drop-out: Drop-out animationsstrømme fra top til bund.

På samme måde er der indrammet, overline, dobbelt linje, baggrund og tekstanimation. Hver af dem tilbyder deres eget sæt animationer, og du kan selv tjekke dem ud for at lære, hvad du får med dem.

Pointer sektion : vælg typen af ​​pointer fra rullemenuen.

Undermenuindikatorsektion : Elementor-widgetten er spækket med mange undermenustilingsmuligheder. Hvor du ikke kun kan styre farven, stilen og også baggrunden for menuen.

Polstring og menuafstand: polstring kan hurtigt justeres. Du kan ændre den vandrette polstring for menu og undermenu, lodret polstring, mellemrum også højre, venstre og centreret justering.

Elementor nærmer sig menuafstand og polstring ekstremt godt. De arbejdede hårdt bag dørene for at sikre, at de kan bringe værktøjerne til udvikleren, så de nemt kan skabe det design, de tænker på.

Menuafstanden byder på mange muligheder, herunder:

• Mellemrum mellem menupunkter
• Vandret og lodret polstring til menu- og undermenuelementer
• Center, venstre, højre og justeret justering.

Farvebaggrund og typografi : du kan få dit skræddersyede branded look ved hjælp af det ønskede farveskema og baggrundsfarve. Du kan også vælge de gennemsigtige eller semi-transparente menuindstillinger.

Som designer kan du lege med disse muligheder så meget du kan og sikre dig, at du designer baggrundene efter dine ønsker.

Mobil responsiv menu

Mobil er en vigtig del af nettet, og derfor leverer Elementor-udviklere også værktøjer, så du også kan oprette navbaren til mobilen.

Elementor-widget giver dig fuld kontrol over mobile menuindstillinger på WordPress. Du kan styre mobilskærmvisningen med et separat sæt indstillinger for mobilskærme. Der er en mulighed for mobilskærmindstillinger nederst i Elementor-indstillingssektionen, hvor du kan se dine mobilskærmsindstillinger.

Kort sagt er Elementors mobile menufunktioner som nedenfor:

• Fuld bredde på mobil: Du får også mulighed for at indstille fuld bredde eller begrænset bredde.
• Tablet eller mobil breakpoints: Du kan bruge breakpoint-indstillingerne til at indstille mobilmenuen til mobil eller tablet.
• Lodrette menuer og harmonikamenuer: Elementor tilbyder også muligheden for at vise et sammenklappeligt hamburgerikon.
• Skift justering: Hamburgerikonet kan justeres i midten, venstre eller højre.
• Side-/Centerjustering: Vælg justeringen af ​​mobilmenuen.

Responsiv navigation: Tilbyder responsiv positionering af menuen.

Indpakning

Menuen er en af ​​de vigtigste funktioner på ethvert websted. Fordi det hjælper de besøgende med at gå gennem dit websted, og hvis du oprettede en liste smart, ville det hjælpe med at holde dine besøgende på dit websted i lang tid. Menuen er lige så vigtig som for ethvert websteds hele layout, sidehovedet og sidefodssektionen.

Derfor skal menu-widgetten være i stand til at levere dit unikke brand-look med alle de væsentlige funktioner. Elementor Navigation-widgetten kommer med funktionsrige muligheder, der giver kunderne mulighed for at tilpasse menusektionen, så den passer ind i dit brands stemme. Nu kan du bruge en skræddersyet, stilfuld menu på tværs af dit websted, på din landingsside, header eller enhver anden sektion, hvor du kan lide at vise den.