Articles

Sådan oprettes en rullemenu i 5 trin

site navigation er nøglen til at hjælpe dine brugere med at komme, hvor de vil hen. En veldesignet menu kan gå langt i retning af at forbedre brugeroplevelsen og endda reducere din afvisningsprocent. En dårligt udformet kan dog gøre det modsatte.heldigvis kan du oprette brugerdefinerede menuer, der passer til behovene på din hjemmeside. Du kan endda bruge indbyggede funktioner til at tilføje en kompakt rullemenu, der sparer plads, mens du stadig giver klar retning for dine besøgende.

i dette indlæg vil vi diskutere, hvorfor hjemmeside navigation er vigtig, og hvordan rullemenuer kan være særligt nyttige. Derefter gennemgår vi, hvordan du opretter dem i , og deler nogle plugins, der kan hjælpe.

lad os dykke ind!

en introduktion til navigations-og rullemenuer

selvom de kan være beskedne, er navigationsmenuer et vigtigt element på enhver hjemmeside. De hjælper brugerne med hurtigt at finde de mest relevante sider til at nå deres mål, samtidig med at de giver førstegangsbesøgende en ide om, hvad du har at tilbyde:

menueksempel

kinstas primære navigationsmenu

at have en veldesignet navigationsmenu er nøglen til at øge konverteringer og mindske din afvisningsprocent. Når brugere nemt kan finde de sider, hvor dit produkt, din e-mail-tilmeldingsformular eller andet konverteringsindhold er placeret, har du det enklere at få dem til at foretage et køb eller tilmelde sig.

plus, hvis brugerne trygt kan finde vej i hele din hjemmeside, vil de ikke nødt til at hoppe fra dine sider, fordi de endte på det forkerte sted. At hjælpe dem med at få det rigtigt første gang kan både forbedre og minimere frustration.

i menuen er en iboende funktion. Ethvert sted oprettet med platformen kan vise en eller flere af dem. Temaer spiller dog også en vigtig rolle, når det kommer til styling og placering af din menu eller menuer.

af denne grund kan din menu antage mange forskellige former. Den mest kendte er standard header-menuen:

header menu eksempel

et eksempel på en typisk header menu

Du kan ofte også inkludere en ekstra footer menu nederst på dine sider. Det kan vise det samme indhold som din hovedmenu eller tilbyde lidt forskellige muligheder:

sidefodsmenueksempel

et eksempel på en sidefodsmenu

en anden stil er menuoverlejringen, som brugerne kan åbne og lukke efter ønske:

overlay menu eksempel

et eksempel på en overlay menu

Alternativt kan du overveje at bruge en sidebar menu:

sidebar menu eksempel

et eksempel på en sidebar menu

eller du kan indarbejde en rullemenu, også undertiden kaldet en “indlejret” menu:

rullemenu eksempel

et eksempel på en rullemenu

denne type navigation er ideel til mange typer steder. Det vil ikke skjule dit indhold som en overlay-menu, men er ikke så påtrængende som en stor overskriftslinje eller en sidebjælke-menu.

Ved at skjule noget indhold, indtil det er nødvendigt, sparer du skærmplads, mens du stadig giver brugerne en nem måde at komme rundt på.

Sådan oprettes en rullemenu i ordtryk (i 5 trin)

Hvis du har besluttet, at en rullemenu muligvis passer godt til dit Ordtrykssted, er det ganske enkelt at indstille en. Du kan oprette et brugerdefineret navigationssystem, der passer til dine behov i kun fem trin.

Trin 1: Opret dine menupunkter

det første skridt mod at oprette en menu er at beslutte, hvad der skal medtages i den. Start med at navigere til udseende > menuer i dit ordtryksdashboard:

Ordtryksmenu

adgang til menueditoren i Ordtryksdashboardet

hvad du ser i menueditoren vil variere lidt afhængigt af dit tema.

det, der dog er vigtigt at bemærke for nu, er den første mulighed i fanen Rediger menuer. Du skal se en mulighed, hvor du kan vælge en af dine eksisterende menuer, der skal redigeres, samt en mulighed for at oprette en ny menu:

Opret et nyt menulink øverst i menueditoren

Opret et nyt menulink øverst i menueditoren

for dette eksempel, vi vælger sidstnævnte mulighed og opretter en ny menu. Dette indebærer at tilføje en titel og derefter klikke på knappen Opret Menu:

navngivning og oprettelse af den nye menu

navngivning og oprettelse af den nye menu

nu er du klar til at begynde at tilføje elementer til din Ordtryksmenu. I de fleste tilfælde er det bedst at holde din menu så enkel som muligt, mens du stadig giver brugerne nok information til at komme, hvor de vil hen.

inkorporering af for mange sider kan overvælde besøgende og gøre navigationen sværere i stedet for lettere.

der er et par forskellige måder at gå om at tilføje dine menupunkter. De to første er sider og indlæg, og de fungerer meget ens.

tilføjelse af sider til menuen

tilføjelse af sider til menuen

i sidebjælken i menueditoren skal du blot markere afkrydsningsfelterne for hver side eller post, du vil medtage, og klikke på knappen Tilføj til Menu:

din næste mulighed er at inkorporere brugerdefinerede Links. Dette indebærer at angive URL ‘ en til den side, du vil lede brugerne til, og derefter oprette en kort, men beskrivende etiket til den. Derefter kan du klikke på Tilføj til Menu igen:

tilføjelse af et brugerdefineret link til menuen

tilføjelse af et brugerdefineret link til menuen

endelig kan du også tilføje side-og postkategorier til din navigationsmenu. Dette fører brugerne til en arkivside, hvor de kan se alt indhold på et bestemt emne.

Blogs og andet indhold-tunge sider kan finde denne funktion særlig nyttig:

tilføjelse af kategorier til menuen

tilføjelse af kategorier til menuen

som med indstillingerne sider og indlæg skal du blot markere afkrydsningsfelterne for de kategorier, du vil medtage, og vælge Tilføj til Menu.

Trin 2: organiser din menu

når du har tilføjet alle dine menupunkter, skal du se dem opført i individuelle fliser under menustruktur i editoren:

Menustrukturafsnittet i menueditoren

menustrukturafsnittet i menueditoren

oprindeligt vises menupunkter i den rækkefølge, du tilføjede dem. Du kan dog nemt ændre deres organisation ved at trække og slippe dem på plads. Dette giver dig mulighed for at oprette en simpel menu uden rullemenu.

der er et par måder at gå om at tilføje rullemenuer til din menu.

det enkleste er at fortsætte med at trække og slippe, men begynde at indlejre bestemte menupunkter under andre:

oprettelse af en rullemenu

Indlejringskategorier under blogsiden

for eksempel i billedet ovenfor har vi flyttet de tre postkategorier, vi tilføjede til menuen under Blog, hvilket gør dem til “underelementer”. På frontend opretter dette en rullemenu, der ser sådan ud:

tryk på rullemenuen

eksempel på en rullemenu i ordtryk

Hvis du vil tilføje en rullemenu, der indeholder alle kategorierne på din side, kan du gøre det ved at tilføje et brugerdefineret Link til din menu. Brug ” # “som URL og” kategorier”eller noget lignende til etiketten:

oprettelse af en Kategorietiket til menuen

oprettelse af en Kategorietiket til menuen

Du kan derefter tilføje alle dine kategorier til menuen og rede dem under denne etiket. Hver kategori kan klikkes, men etiketten vil ikke være:

rullemenuen kategorier

rullemenuen kategorier

ved hjælp af en lignende teknik kan du også skjule alle dine menupunkter i en enkelt rullemenu.

Tilføj et andet brugerdefineret Link ved hjælp af ” # “som URL og” Menu ” som etiket. Derefter, reden alle dine andre menupunkter under den ene:

indlejring af alle navigationslinks under en enkelt Menuetiket

indlejring af alle navigationslinks under en enkelt Menuetiket

resultatet på frontend vil være en rullemenu, der inkluderer dit steds nøglesider.

som du kan se i Kategorielementet nedenfor, vises ethvert indhold, der er indlejret under et underelement, i en undermenu:

et sandt ordtryk rullemenu

et sandt ordtryk rullemenu

Ved at bruge træk-og-slip-menueditoren på denne måde kan du oprette enhver stil og kombination af rullemenuer. Husk dog, at for mange menupunkter kan være forvirrende for brugerne.

Tilmeld dig nyhedsbrevet

vi voksede vores trafik 1,187% med ordtryk. Vi viser dig hvordan.

Deltag i 20.000 + andre, der får vores ugentlige nyhedsbrev med insider-tip!

Abonner nu

det er også bedst at begrænse antallet af undermenuer, du inkorporerer, for at undgå at overfylde din navigation.

Trin 3: Indarbejd billeder i din menu

Hvis din rullemenu i slutningen af trin 2 ser nøjagtigt ud som du forestillede dig den, kan du springe til Trin 5 for at offentliggøre den. Der er dog yderligere trin, du måske vil tage, hvis du vil forbedre din menu med tilpasninger.

en taktik at overveje er at inkorporere visuelle elementer i dine menuer for at give yderligere vejledning til besøgende. Mens beskrivende etiketter er afgørende, kan et billede eller et ikon undertiden hjælpe brugerne hurtigere med at bestemme, hvor et bestemt navigationslink fører.

det er muligt at tilføje billeder ved hjælp af brugerdefineret CSS, som vi snart vil diskutere. Vi anbefaler dog at hente et plugin som Menubillede, ikoner gjort let:

ordtryk rullemenu med billeder ved siden af navigationslinkene

ordtryk rullemenu med billeder

på denne måde behøver du ikke bekymre dig om at generer nogen kode for at tilføje visuel interesse til din rullemenu.

Du skal blot installere plugin og derefter vende tilbage til udseende > menuer:

Menubilledsektionen i menueditoren

menubilledsektionen i menueditoren

du vil se, at der nu er Billedindstillinger for hver side, du har inkluderet i din menu. Du kan vælge hver sides foto, størrelse og placering. Husk at gemme dine ændringer, når du er færdig.

Trin 4: Føj Brugerdefineret CSS til din rullemenu

selvom det ikke anbefales til begyndere, kan mellemliggende og avancerede brugere muligvis indarbejde deres egen styling i deres rullemenuer. Før du hopper lige ind i din CSS, skal du dog tilføje en klasse til din menu.

Hvis du springer dette trin over, kan din brugerdefinerede CSS forårsage problemer for andre menuer på din side. For eksempel kan du utilsigtet anvende styling til din sidefodsmenu, som du kun mente til din primære rullemenu.

i menueditoren skal du klikke på skærmindstillinger i øverste højre hjørne:

fanen skærmindstillinger i menueditoren

fanen skærmindstillinger i menueditoren

marker derefter afkrydsningsfeltet for CSS-klasser:

afkrydsningsfeltet CSS-klasser i fanen skærmindstillinger

CSS-klasser i fanen skærmindstillinger

dette tilføjer et CSS-Klassefelt til hver side i din menu:

feltet CSS-klasser i menueditoren

feltet CSS-klasser i menueditoren

Når du har tilføjet en eller flere CSS-klasser til dine menupunkter, gælder enhver brugerdefineret kode, du Inkluderer på dit stilark, kun for elementerne i din menu med den klasse, du angiver.

træt af en langsom vært til din hjemmeside? Vi leverer lynhurtige servere og 24/7 support i verdensklasse. Tjek vores planer

Du kan nu gå over til dit stylesheet eller tilpasningen og komme i gang med din brugerdefinerede styling.

Trin 5: Udgiv din Menu i Prime steder

Når din rullemenu er struktureret til at opfylde dine behov, og du har indarbejdet eventuelle tilpasninger, du ønsker, vil du være klar til at udgive det til din hjemmeside.

denne proces varierer lidt afhængigt af dit tema og hvilke menuplaceringer det understøtter. I dette eksempel vil vi bruge det tyve tyve tema.

i menueditoren skal du rulle ned til menuindstillingsafsnittet:

Menuindstillingsafsnittet i editoren

Menuindstillingsafsnittet i editoren

Du kan markere det første afkrydsningsfelt, hvis du ønsker, at nye sider automatisk føjes til din menu. Hvis du lige er kommet i gang med din hjemmeside og ikke har tilføjet alle dine nøglesider endnu, kan dette være nyttigt. Vær dog forsigtig med, at du ikke ved et uheld tilføjer for mange elementer til din menu.

under denne indstilling vil du se en liste over afkrydsningsfelter, der angiver de forskellige områder på din hjemmeside, hvor du kan vise din menu.

det tyve tyve tema indeholder forskellige menuområder: Desktop vandret Menu, Desktop Udvidet Menu, mobil Menu, Sidefodsmenu, Social Menu.

i dette tilfælde er den menu, vi har oprettet, bedst egnet til skrivebordets vandrette Menuplacering, som er i sidens overskrift:

Desktop vandret Menu til det tyve tyve tema

Desktop vandret Menu til det tyve tyve tema

Du kan også overveje at navigere til fanen Administrer placeringer i vinduet menuer område af dit dashboard. Her kan du se alle de menuplaceringer, der understøttes af dit tema, samt hvilken menu du har tildelt hver enkelt:

fanen Administrer placeringer

fanen Administrer placeringer

Når du placerer dine menuer, kan det være nyttigt at se, hvordan de ser ud på frontend.

indstillingen Administrer med live forhåndsvisning

indstillingen Administrer med live forhåndsvisning

Klik på knappen Administrer med Live forhåndsvisning for at se, hvordan din menu vises på det sted, du har valgt til det, ved hjælp af:

en live forhåndsvisning af Ordtryksmenuen i tilpasningen

en live forhåndsvisning af Ordtryksmenuen i tilpasningen

Du kan derefter udgive din menu eller menuer direkte fra tilpasningen. Hvis du nogensinde har brug for at tilføje eller fjerne elementer fra din rullemenu, kan du blot vende tilbage til menueditoren og foretage de nødvendige justeringer.

Plugins til forbedring af dine rullemenuer

selvom du kan oprette fuldt fungerende navigationsmenuer uden ekstra værktøjer, kan det nogle gange være nyttigt at udvide menuens funktionalitet. Hvis det er tilfældet med din hjemmeside, kan du undersøge nogle populære plugins.indlejrede sider er en effektiv måde for indholdstunge blogs at oprette rullemenuer på. Selvom det primært bruges til at organisere indlæg og sider, genererer dette plugin også automatisk en menu, der afspejler dit indholds struktur:

indlejrede sider

indlejrede sider plugin

selvom det ikke nødvendigvis er tilrådeligt at indarbejde et stort antal elementer i dine menuer, er det nogle gange uundgåeligt.hvis det er tilfældet med din hjemmeside, kan Mega Menu hjælpe dig med at kombinere dine eksisterende menuer til at danne en “mega menu”:

maks mega menu

maks Mega Menu

Mobile Menu parrer med ethvert responsivt tema for at hjælpe dig med at oprette et navigationssystem til din sides brugere, der er på farten:

mobile menu

Mobile menuer beskrivende menupunkter er ikke nok. I disse situationer kan du undersøge at bruge Menubillede, ikoner gjort let som vi beskrev i Trin 3 ovenfor.

Du kan bruge et af disse plugins til at forbedre dit nuværende navigationssystem og gøre din rullemenu mere effektiv. Bare husk, at nogle gange, når det kommer til navigation, er enklere bedre. Tilføj kun ekstra funktioner, hvis det vil forbedre din brugeroplevelse og undgå rod på din hjemmeside.

fejlfinding af rullemenuen

Hvis du har konfigureret din menu som beskrevet ovenfor, men rullemenuen ikke fungerer, er der flere mulige årsager.

selvom vi ikke kan dække dem alle her, kan vi hjælpe dig med at indsnævre årsagen til dit problem, så du kan finde den rigtige løsning.

ofte er en funktionssvigt et resultat af modstridende kode mellem din brugerdefinerede menu og dit tema. Den første ting du skal gøre, hvis din menu ikke fungerer, er at skifte til et standardtema som tyve tyve. Hvis din menu begynder at fungere igen, ved du, at problemet er relateret til dit tema. Du kan derefter kontakte dit temas Udvikler for at søge en løsning.

et par andre mulige årsager inkluderer:

  • forkert indtastet kode: dobbeltkryds, at enhver brugerdefineret CSS, du har tilføjet, er korrekt, og at du bruger CSS-klasser som beskrevet i Trin 4.
  • Plugin inkompatibilitet: prøv at deaktivere alle menurelaterede plugins, du har installeret, for at se, om det løser problemet.
  • forældet spørgsmål: Opgrader til den nyeste version af spørgsmål, og prøv at åbne rullemenuen igen.

men som vi nævnte tidligere, er de potentielle årsager bag din defekte menu mange. Hvis ingen af ovenstående løsninger ser ud til at fungere, anbefaler vi at besøge supportfora, nå ud til vores ekspert Kinsta supportteam eller ansætte en udvikler til at ordne det for dig.

navigationsmenuer er nøglen til dit site. Men hvad nu hvis du har masser af menupunkter, Du har brug for at funktionen? Rullemenuen er navnet på spillet her! Se, hvor let det er at oprette en med denne vejledning.klik for at kvidre

resume

selvom det kan virke som en lille sag, kan dit navigationssites navigation gøre eller ødelægge dens succes. Brug af rullemenuer kan spare plads på brugernes skærme, samtidig med at de nemt kan komme rundt på din side og forbedre dine konverteringer.

Hvis du nød denne tutorial, så vil du elske vores støtte. Alle Kinstas hostingplaner inkluderer 24/7 support fra vores erfarne udviklere og ingeniører. Chat med det samme team, der støtter vores Fortune 500-kunder. Tjek vores planer