Elementor Navigationsmenu - Byg en fantastisk menu til dit WordPress -websted

Leder du efter en måde at oprette en fantastisk menu til at hjælpe med at forbedre dit websteds UI/UX? I så fald er du på det rigtige sted. Her har vi sammensat en detaljeret guide til at hjælpe dig.

For det første viser vi dig en trin-for-trin gennemgang af, hvordan du opretter en menu til dit WordPress-websted. Og når du får styr på det, guider vi dig til, hvordan du bruger widgeten Elementor Navigation Menu til at tilpasse og overlade din WordPress -menu.

Indholdsfortegnelse:

• Hvorfor har du brug for en brugerdefineret navigationsmenu?
• Opret en grundlæggende WordPress-menu ved hjælp af Elementor
• 1. Opret en enkel menu til dit WordPress-websted
• 2. Vælg og tilpas navigationsmenupunkter
• 3. Opret undermenuer - menupunkter for forældre og børn (valgfrit)
• 4. Administrer din menus placering 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
• Afslutter

Hvorfor har du brug for en brugerdefineret navigationsmenu?

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

Nav-menuerne er faktisk primært designet til brugerengagement, 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 gennemgå webstederne og indeksere indholdet til det relevante niveau og rapportere tilbage til søgemaskinen for at rangere indholdet på det rigtige sted.

Derfor, hvis du opretter for komplicerede menuer, ville det være svært for botterne at rangordne dit indhold, men du mister også dine besøgende.

Kort sagt, "let navigering" er en afgørende bidragyder til at forbedre en bedre brugeroplevelse samt spiller en afgørende rolle i at øge vores webstedsrangering og øge trafikken.

Det er en fremragende grund til mange forretningswebsteder at opbevare et enkelt navigationsikon i stedet for en kompleks menulinje, der indlæses op til en fuldskærmsmenu, når der klikkes på den.

Takket være Elementor pro-widgeten med en 100% responsiv navigationsmenu kan du oprette 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 vi starter med Elementor Navigation-widget, lad os undersøge, hvordan vi kan oprette en simpelt 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 specielle plugin . Som standard leveres WordPress med en brugervenlig menubygger, der hjælper dig med at oprette enkle navigationsmenuer til dit websted.

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

1. Opret en enkel menu til dit WordPress-websted

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 to-kolonne layout 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 navigationsmenupunkter

Nu kommer den del, hvor du udfylder din nye menu med menupunkter. Under afsnittet "Tilføj menupunkter" til 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, destinationssider, tilpassede links og kategorier.

vælg bare de menupunkter, du vil tilføje, ved hjælp af 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 det 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 underordnet menupunkt.

Når en bruger svæver over det overordnede menupunkt, afslører det alle de underordnede menupunkter, der er skjult under det.

Fedt ikke?

For nu at oprette en undermenustruktur er alt, hvad du skal gøre, at vælge et menupunkt, som du vil have i hovedmenuen. Træk derefter og slip alle de menupunkter, du vil have som underordnede menupunkter under den. Nu skal du bare trække den til højre, og du er færdig!

4. Administrer din menus placering 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 menu -editor skal du bemærke en indstilling kaldet "Administrer placeringer". Klik på den, og noget lignende til følgende skærm skulle dukke op:

De tilgængelige menupunkter afhænger nu af det tema, du har installeret. I denne ex amp le har vi et tema, der understøtter 3 menuer.

Når du har tildelt en menu til hver af de tilgængelige menupositioner, skal du klikke på "Gem ændringer", og det er det.

Du kender nu alle de grundlæggende menufunktioner, WordPress tilbyder som standard. Men hvis du vil have mere tilpasning og funktionalitet, kan du læse mere 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-widgeten? Her er en kort introduktion.

Elementor Nav-Menu widget Nøglefunktioner

• Nav-menu widget giver dig friheden til at placere din menu hvor som helst du vil. På din header eller toppen 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 et blændende look til din menu ved hjælp af animation, svævende effekter eller aktiv status
• Opret en mobil responsiv menu på dit websted, og kontroller, hvordan dit websted ser ud på mobilskærme
• Tilpas farve, typografi og polstring eller andre justeringer af din menulinje
• Opret en pixel-perfekt menu med den rigtige præcision af justering, afstand og polstring.

Opret en menu med nav-menu pro widget

Du bliver nødt til at oprette en grundlæggende WordPress-menu, som vi har nævnt ovenfor, og derefter tilpasser du standard WordPress-menuen ved hjælp af pro-nav-menu widget. Når du har oprettet den primære liste, er det næste trin at føje den til din ønskede placering, dvs. Header-sektion.

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

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

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

• Vandret: Det vandrette layout er det mest almindelige layout, der bruges af webstederne. Det spreder sig over skærmen fra retning fra venstre mod højre.
• Lodret: Du finder også et lodret layout på mange sider, 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 : dette afsnit hjælper dig med at justere menupunktet; center, højre eller venstre.

Animationssektion : dette afsnit giver dig mulighed for at tilføje animationseffekter under, over eller dobbelt linie animationseffekter. Du kan også vælge ramme, baggrund og subtile tekstanimationer.

Understreget animationer er som følger:

• Fade: Fade-animationen tilbyder fade-animation under menupunkterne.
• Slide: Slide-animationen glider linjen under menupunkterne.
• Grow : Grow- animationen vokser fra midten til udad og giver en fornemmelse af vækst.
• Drop in : Drop in animation flyder fra bund til top.
• Drop out: Drop out animation flyder fra top til bund.

Tilsvarende 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.

Markør sektion : vælg typen af ​​markør i rullemenuen.

Undermenuindikatorsektion : Elementor-widgeten er fyldt med mange indstillinger for undermenustyling. Hvor du ikke kun kan kontrollere farve, stil og også baggrunden i menuen.

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

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

Menuafstanden tilbyder mange muligheder, herunder:

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

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

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

Mobil responsiv menu

Mobil er en vigtig del af internettet, og det er grunden til, at Elementor-udviklere også leverer værktøjer, så du også kan oprette navbar til mobilen.

Elementor-widget giver dig fuld kontrol over mobilmenuindstillinger på WordPress. Du kan styre mobilskærmsvisningen med et separat sæt indstillinger til skærme, der kun er mobile. Der er en mulighed for mobilskærmindstillinger nederst i Elementor-indstillingsafsnittet, hvor du kan se dine mobilskærmindstillinger.

Kort sagt er Elementors mobilmenufunktioner som nedenfor:

• Fuld bredde på mobil: Du får også mulighed for at indstille fuld bredde eller begrænset bredde.
• Tablet- eller mobile breakpoints: Du kan bruge breakpoint-indstillingerne til at indstille mobilmenuen til mobil eller tablet.
• Vertikale og harmonika-menuer: Elementor giver også mulighed for at vise et sammenklappeligt hamburgerikon.
• Skift justering: Hamburgerikonet kan justeres i midten, venstre eller højre.
• Tilpasning til side / center: Vælg justering af mobilmenuen.

Responsiv navigation: Tilbyder responsiv placering af menuen.

Afslutter

Menuen er en af ​​de mest markante funktioner på ethvert websted. Fordi det hjælper 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 i ethvert websteds hele layout, overskriften og sidefoden.

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.