Hvordan lage en rullegardinmeny i WordPress (nybegynnerveiledning)

Vil du lage en rullegardinmeny og legge den til på WordPress-nettstedet ditt?


En rullegardinmeny viser en liste over lenker mens du tar musen over et element på menyen.

Vi bruker en rullegardinmeny på WPBeginner, går foran og tar musen over navigasjonsmenyen på toppen.

I denne nybegynnerguiden viser vi deg hvordan du enkelt kan lage en rullegardinmeny i WordPress med trinnvise instruksjoner.

Opprette en rullegardinmeny i WordPress

Hvorfor bruke rullegardinmenyer i WordPress?

WordPress kommer med et innebygd menystyringssystem som lar deg enkelt legge til navigasjonsmenyer til ditt WordPress-nettsted.

Navigasjonsmenyer er koblinger til hovedsidene på nettstedet ditt som vanligvis vises på toppen som en horisontal rad rett ved siden av nettstedets logo.

Typisk navigasjonsmeny med en horisontal rad med lenker

Hvis du starter en blogg eller oppretter et nettsted med bare noen få sider, kan du legge dem til på den ene raden.

Imidlertid, hvis du driver en nettbutikk eller et stort nettsted, kan det være lurt å legge til flere koblinger til navigasjonsmenyen.

Nedtrekksmenyer hjelper deg med å løse problemet med begrenset plass ved bare å vise menykoblinger når brukere tar musen over til et overordnet element. De lar deg også organisere menystrukturen etter emner eller hierarki.

Eksempel på nedtrekksmeny

Til slutt ser de ganske fine ut også.

Når det er sagt, la oss nå se på hvordan du enkelt kan lage WordPress-rullegardinmenyer og legge dem til på nettstedet ditt.

Videoopplæring

Abonner på WPBeginner

Hvis du ikke liker videoen eller trenger flere instruksjoner, kan du fortsette å lese.

Trinn 1. Velge et tema med Dropdown Menu Support

WordPress kommer med et innebygd menystyringssystem, men visning av disse menyene er helt avhengig av WordPress-temaet.

Nesten alle WordPress-temaer støtter nedtrekksmenyer som standard. Imidlertid kan det hende at noen temaer ikke har riktig menystøtte.

Du må sørge for at du bruker et WordPress-tema som støtter nedtrekksmenyer.

Hvordan vet du om temaet du bruker støtter rullegardinmenyen?

Du kan ganske enkelt besøke temas nettsted der du finner en lenke til temaets demo. Derfra kan du se om demoen viser en rullegardinmeny i navigasjonsmenyen.

Hvis det ikke er det, må du finne et WordPress-tema som gjør det.

Se vår guide for hvordan du velger det perfekte WordPress-temaet for nettstedet ditt.

Her er noen gode temaer som støtter rullegardinmenyen ut av boksen.

  • Astra – Det er et mangfoldig WordPress-tema som kommer med flere startsider og mange funksjoner.
  • StudioPress-temaer – Disse profesjonelle temaene er bygget på toppen av rammeverket for genesis-temaer, og er optimalisert for ytelse.
  • OceanWP – Et populært WordPress-tema som passer for alle slags nettsteder.
  • Ultra – Powered by Themify Builder – dette dra-og-slipp WordPress-temaet leveres med vakre maler og fleksible temalternativer.
  • Divi – populært tema fra elegante temaer som bruker Divi-sidebyggeren og kommer med mange drag & slippfunksjoner inkludert rullegardinmenyer.

Når det er sagt, la oss nå se på hvordan du lager en nedtrekks WordPress-meny.

Trinn 1. Opprette en navigasjonsmeny i WordPress

Hvis du allerede har satt opp en navigasjonsmeny på nettstedet ditt, kan du hoppe til neste trinn.

La oss lage en enkel meny først.

Gå til Utseende »Menyer og klikk på koblingen “Opprett en ny meny” øverst.

Lag en meny

Deretter må du oppgi et navn for navigasjonsmenyen. Dette navnet vil ikke være offentlig synlig på nettstedet ditt. Hensikten med menynavnet er å hjelpe deg med å identifisere menyen i WordPress adminområdet.

Menynavn

Skriv inn et navn på menyen, og klikk deretter på knappen “Opprett meny”.

WordPress vil nå opprette en ny tom meny for deg.

La oss legge til de beste koblingene til navigasjonsmenyen. Disse elementene vises på øverste rad på menyen.

Bare velg sidene du vil legge til fra venstre kolonne og klikk på knappen “Legg til i menyen”. Du kan også velge blogginnlegg, kategorier eller legge til tilpassede lenker.

Legg til sider i menyen

Du vil nå se disse sidene vises i høyre kolonne under den nye menyen.

Trinn 2. Legge til underelementer til en meny

Underelementer er elementene som vises i rullegardinmenyen. Avhengig av hvordan du vil organisere menyene dine, kan du legge dem til under et av de eksisterende elementene.

Av hensyn til denne opplæringen vil vi legge til kategorier under blogglenken.

Bare velg elementene du vil legge til fra venstre kolonne, og klikk deretter på knappen Legg til i menyen. Varene dine vises nå i høyre kolonne.

Nye menyposter lagt til i menyen

Disse koblingene vil imidlertid vises som vanlige elementer. Vi må gjøre dem til et underelement i en overordnet meny.

Du kan ganske enkelt dra og slippe et menyelement og plassere det under overordnet element. Flytt den litt til høyre, så blir den et underelement.

Legge til undermenyelementer for å lage en rullegardinmeny

Gjenta prosessen for alle koblinger du vil vise under rullegardinmenyen.

Når du er ferdig, ikke glem å klikke på “Lagre-menyen” -knappen for å lagre endringene dine.

Trinn 3. Publiser rullegardinmenyen

Hvis du redigerer en meny som allerede er live på nettstedet ditt, begynner den å vises på nettstedet ditt med en gang.

Imidlertid, hvis det er et nytt menyelement, må du nå velge en temaplassering for å vise denne menyen.

WordPress-temaer kan vise menyer på forskjellige steder. Hvert tema definerer sine egne menyposisjoner, og du kan velge hvilken meny du vil vise der.

Du finner dette alternativet i høyre kolonne under ‘Menyinnstillinger’. Velg et alternativ ved siden av innstillingen ‘Vis plassering’ og klikk på ‘Lagre menyen’ -knappen.

Velg temaplassering

Du kan nå besøke nettstedet ditt for å se rullegardinmenyen i aksjon.

Forhåndsvisning av rullegardinmenyen

Tips for å lage interaktive nedtrekksmenyer

Navigasjonsmenyer er viktige fordi dette er det første brukerne vil se ut hvis de vil se spesifikk informasjon.

Å bruke dem riktig vil hjelpe brukerne dine å finne veien rundt nettstedet ditt. Det vil også hjelpe deg med å få flere sidevisninger, konverteringer og salg på nettstedet ditt.

Her er noen tips for å gjøre navigasjonsmenyene mer interaktive med rullegardinmenyer.

1. Du kan lage rullegardinmenyer på flere nivåer

Å lage en lenke til et underelement av en annen lenke, gjør at den vises i rullegardinmenyen. Du kan også legge til et underelement under et annet underelement for å lage rullegardinmenyer på flere nivåer.

Menyer på flere nivåer

Temaet ditt viser dem automatisk som en undermeny i rullegardinmenyen.

Nedtrekksmeny på flere nivåer

2. Du kan også lage flere rullegardinmenyer

Du kan opprette en rullegardin under en hvilken som helst topplenke i menyen. Du kan til og med legge til flere rullegardinmenyer i hovednavigeringsmenyen.

Flere rullegardinmenyer i hovedmenyen

3. Lag menyer med en direkte forhåndsvisning

Hvis menyen blir for komplisert, kan du bytte til den visuelle forhåndsvisningen. Gå til Utseende »Tilpass for å starte tilpasningen av live-tema.

Derfra klikker du på kategorien ‘Menyer’ og velger deretter navigasjonsmenyen. Du vil nå se en dra og slipp menyredigerer i venstre kolonne med en direkte forhåndsvisning av nettstedet ditt i høyre panel.

Tilpass WordPress-menyer med direkte forhåndsvisning

4. Opprette en stor mega-meny som rullegardin i WordPress

Nedtrekksmenyene viser bare en rullegardin om gangen. Hva om du ville vise hele strukturen på nettstedet ditt som en mega-meny som bare vises når brukere svever på hovedmenyen?

Mega menyeksempel

Mega-menyer vises som en rullegardinmeny, men de kan vise til mange flere lenker, undermenyer og mer. For detaljerte instruksjoner, se vår trinnvise opplæring om hvordan du oppretter en mega-meny i WordPress.

Vi håper denne artikkelen hjalp deg med å lære hvordan du enkelt kan lage en rullegardinmeny i WordPress. Det kan også være lurt å se guiden vår om hvordan du oppretter en klebrig flytende navigasjonsmeny i WordPress og hvordan du legger til bildeikoner til navigasjonsmenyene i WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map