Sådan opretter du WordPress-navigationsmenu med 2 forskellige metoder

Navigationsmenuer er som ledestjernerne på et websted. Forestil dig din hjemmeside som et hav fyldt med ting, som sejlere kan sejle igennem. Så de har brug for en navigator for at nå frem til deres ønskede destination med lethed.

Det er her, navigationsmenuer kommer ind. Det spiller en nøglerolle i at vejlede besøgende og give dem en problemfri browsingoplevelse gennem dit websted.

Så hvis du er en hjemmesideejer eller en udvikler, skal du lægge ekstra kræfter og fokus på at designe en brugervenlig navigationsmenu til din hjemmeside.

For WordPress-brugere har du fleksibiliteten til at designe WordPress-navigationsmenuen på et par måder. 

I denne guide vil vi lede dig gennem dybden af Gutenberg og Elementor for at oprette en navigationsmenu. I slutningen af denne blog vil du være i stand til at oprette og tilpasse WordPress-navigationsmenuen og løfte dit websteds brugeroplevelse.

Hvad er WordPress-navigationsmenuen?

Webstedets navigationsmenu er ligesom kortet over dit websted, og guider besøgende gennem dets sider. Disse menuer vises som et sæt links eller knapper, der typisk vises på en webside, normalt øverst eller på siden. 

Det hjælper med at forbedre tilgængeligheden og brugeroplevelsen af din hjemmeside ved at give en struktureret måde at udforske hjemmesidens sider og deres indhold på.

Med WordPress er det ret nemt at oprette og tilpasse menuer til din hjemmeside. Du kan tilføje sider, indlæg, brugerdefinerede links eller endda kategorier til din WordPress-navigationsmenu.

Standardmetoden til at oprette en WordPress-menu er ret enkel. Det giver en enkel grænseflade til at oprette og administrere navigationsmenuer.

Du vil dog finde flere WordPress-plugins, der tilføjer avancerede funktioner og fleksibilitet i tilpasning til navigationsmenuen. Nogle af disse plugins kommer med en intuitiv træk-og-slip-grænseflade, så du nemt kan arrangere menupunkter i den ønskede rækkefølge.

I det væsentlige er WordPress-navigationsmenuen et afgørende element for at forbedre brugeroplevelsen af dit websted, og hjælper besøgende med at finde det, de leder efter, hurtigt og effektivt.

✅ Metode 1: Sådan opretter du WordPress navigationsmenu direkte til en side (med GutenKit)

Den konventionelle metode til at tilføje en navigationsmenu involverer at oprette menuen i WordPress-dashboardet og derefter inkorporere den i en side eller et indlæg.

Men ved hjælp af GutenKit-blokke, kan du oprette WordPress navigationsmenu direkte ind på en side eller et indlæg. Og endda oprette en brugerdefineret side, mens du opretter nav-menuen. Lad os finde ud af hvordan 👇

📢 Forudsætning

For at oprette en WordPress-navigationsmenu direkte ind på websiden skal du installere og aktivere GutenKit-plugin'et på dit WordPress-websted.

⬇️ Download GutenKit Plugin

Lær også💡Sådan installeres og aktiveres GutenKit block editor plugin.

#️⃣ Trin 1: Vælg navigationsmenublokken

Efter installation af plugin, åbne en side i Gutenberg-editoren (standard WordPress-editor).

Find og vælg GutenKit i editoren Nav menu blok. Tilføj derefter navigationsmenuen til editorsektionen.

#️⃣ Trin 2: Tilføj menupunkter til navigationsmenuen i WordPress

I den Nav menu blok, kan du tilføje menupunkter blot ved at klikke på ➕ (plus) ikonknappen, dvs Tilføj menu knap. 

👉 Tilføjelse af en eksisterende side til navigationsmenuen

Når du klikker på knappen Tilføj menu, vises en liste over dit websteds eksisterende sider. Eller du kan også søge ved at skrive sidens navn eller URL i søgefeltet.

Desuden har du mulighed for at ændre Menu Label og Side URL fra sidebjælken og tilpassede sider til WordPress-navigationsmenuen.  

✨ Oprettelse af nye sider direkte i navigationsmenuen

For eksempel, mens jeg oprettede en menu, indså jeg pludselig, at jeg glemte at oprette siden "Min konto" på hjemmesiden. 

Så typisk skulle jeg gå tilbage til dashboardet og oprette en ny side med navnet "Min konto". Gå derefter tilbage til editoren og tilføj denne side til navigationsmenuen.

Nå, med GutenKit er dette besvær elimineret!

Indtast sidenavnet i søgefeltet, mens du tilføjer menupunkter. Hvis siden ikke findes på webstedet, en side vil blive oprettet som en kladde og tilføjet til WordPress-navigationsmenuen.

Senere kan du redigere sidens indhold og udgive det til dit websted.

#️⃣ Trin 3: Konfigurer WordPress-navigationsmenuen

I næste trin kan du konfigurere, hvordan navigationsmenuen vises på din hjemmeside. Brug følgende GutenKit-indstillinger til at skræddersy menuens udseende:

1. Menu Breakpoint: Mens du tilpasser menuen, kan du indstille menuens brudpunkt for tablet eller mobil eller tilføje et brugerdefineret brudpunkt.
2. Scroll Lock til Offcanvas: Du kan anvende rullelåsen, når menuen vises som en offcanvas-menu.
3. Begrund indhold: Du har flere muligheder for at retfærdiggøre menuindholdet som Start, Center, Slut osv.
4. Juster elementer: Du kan også justere menuindholdet til højre, venstre eller centreret.

🟢 Indstillinger for mobilmenu 

Med GutenKit-blokeditoren kan du separat konfigurere mobilmenuens udseende. Følgende indstillinger er tilgængelige for Nav Menu-blokken.

• Mobilmenu-logo
• Menu link
• Hamburger ikon

#️⃣ Trin 4: Tilpas WordPress navigationsmenustile

For at tilpasse GutenKit-navigationsmenuen i WordPress skal du flytte til Stilarter fanen i blokeditoren. Under stilfanen kan du tilpasse menuindpakningen, menupunkterne, hamburgeren og mobilmenulogoet.

✅ Metode 2: Sådan tilføjes navigationsmenu i WordPress klassiske editor

Hvis du stadig bruger den klassiske editor, skal du tilføje WordPress-navigationsmenuen fra Udseende > Menuer fra dit dashboard. Sådan tilføjer du en ny menu:

• Trin 1: Gå til Udseende > Menuer.
• Trin 2: Gå ind i Menunavn.
• Trin 3: Vælg Vis placering.
• Trin 4: Klik på "Opret menu”-knappen.

Efter oprettelse af menuen kan du tilføje menupunkter fra sidebjælken.

• Trin 5: Tilføj derefter sider, indlæg, brugerdefinerede links og kategorier til menuen.
• Trin 6: Klik endelig på Gem menu knap.

➕ Bonus: Sådan redigeres navigationsmenuen i WordPress ved hjælp af Elementor

Hvis du er Elementor-bruger, kan du nemt redigere og tilpasse WordPress-navigationsmenuer ved hjælp af ElementsKit.

Træk og slip i Elementor-editoren ElementsKit Nav Menu widget. Derefter kan du tilpasse menuindstillingerne, mobilmenuindstillingerne og menustilene.

#️⃣ Menuindstillinger

• Menuvalg: Når du vælger "Vælg menu", får du vist dit websteds aktuelle menuindstillinger.
• Vandret menujustering: Bestem, hvor du vil have din menu til at blive vist – valgmulighederne omfatter Venstre, Center, Højre og Justeret.
• Dropdown-adfærd: Vælg rullemenuer for at åbne på Hover eller Klik.
• Undermenuindikator: Tilpas ikonet, der ledsager forældremenuer og letter navigationen til undermenuerne. Hvis du bruger ElementsKits pro-version, finder du funktionen Dropdown Indicator Icon i stedet for "Undermenu Indicator" muligheden.

#️⃣ Mobilmenuindstillinger

• Mobilmenulogo: Tildel et logo specifikt til mobil visning.
• Menu link: Bevar standardlinket til hjemmesiden, eller angiv en brugerdefineret URL i det angivne felt. Ved at klikke på logoet vil brugerne ledes til det angivne link.
• Hamburger-ikon (valgfrit): Vælg et ikon fra biblioteket, eller upload din egen SVG.
• Undermenu Klik Område: Hvis menuen indeholder undermenuer, skal du udpege et ikon for nem navigation inden for disse områder.

#️⃣ Menustile

Tilpasning af menuindpakning: Her kan du finjustere aspekter såsom menuhøjde, baggrundsstil, polstring, bredde, kantradius, ikonafstand og mere.

Menupunkts styling: Tilpas udseendet af menupunkter med muligheder for baggrundsstil, farve, kantafstand, punktmargen og mere.

Undermenuelementtilpasning: I lighed med menupunkter kan du personliggøre undermenupunkter med forskellige stilindstillinger, der er tilgængelige i dette afsnit.

Undermenu Paneldesign: Udvid dette afsnit for at få adgang til et væld af tilpasningsmuligheder til at style undermenupanelet efter din smag.

Hamburger Ikon Styling: Udforsk forskellige stylingmuligheder for hamburgerikonet, inklusive farver, størrelser, positioner og yderligere funktioner.

Mobilmenu logotilpasning: Skræddersy mobilmenulogoet til dine præferencer ved hjælp af mulighederne i dette afsnit.

Afslutter

Ved at følge den trinvise vejledning, der er beskrevet i denne blog, besidder du nu viden til ubesværet at lave skræddersyede menuer skræddersyet til dit websteds behov. Husk at holde din menustruktur logisk, kortfattet og intuitiv for at sikre problemfri navigation for dine besøgende. Med WordPresss fleksibilitet og alsidighed er mulighederne for at skabe dynamiske og engagerende navigationsmenuer uendelige. Så dyk ned, eksperimenter og løft din hjemmesides navigation til nye højder!