Hvordan lage en klebrig meny i WordPress

Nettstednavigering er en av de UX-essensielle tingene som former hvordan besøkende føler om nettstedet ditt. Dagens nettbrukere har absolutt ingen intensjon om å kaste bort tiden sin på et nettsted som ikke klarer å levere ønsket innhold raskt og uten innsats fra brukersiden. Navigasjonsmenyen er tradisjonelt det første stedet de besøkende går for å orientere seg. Hvis menyen ikke er riktig utformet og hvis navigasjonen ikke går så jevnt og raskt som mulig, begynner besøkende å forlate og nettsiden begynner å dø en langsom og smertefull internettdød.

En klebrig meny utgjør en viktig del av nettstedsnavigasjonen, siden den «fester seg» med brukerne mens de ruller, i stedet for å forbli øverst på siden, og sørger for at navigasjonen aldri er utenfor rekkevidde. Det er derfor vi bestemte oss for å grave dypere inn i konseptet, gå gjennom fordelene og ulempene med denne funksjonen og vise deg hvordan du setter den opp ved hjelp av en av de tilgjengelige WordPress-plugins.

På den annen side, hvis du ikke vil bruke en WordPress-plugin, bør du vite at de fleste av våre premium WordPress-temaer kommer med klebrig menyfunksjonalitet. Du kan angi at den skal vises på nettstedet ditt eller på individuelle sider, men vi kommer til det om litt.

Hva er en klebrig meny

Først av alt, la oss forklare hva en klebrig meny er og hvordan den fungerer. På de fleste nettsteder er hovednavigasjonen plassert i overskriften, som er den øverste delen av siden. Vanligvis forsvinner elementer på siden (flytter opp) når brukeren ruller nedover. En klebrig meny er en meny som forblir («pinner») øverst på skjermen mens brukerne ruller siden. På den måten, hvis brukeren ønsker å nå noe i menyen mens han er midtveis ned på siden, trenger han eller hun ikke å rulle helt opp for å finne navigasjonen, siden den vil være der, øverst i utsikten.

«Klebrigheten» gjelder vanligvis for hele overskriften, ikke bare menyen. Det involverer andre overskriftselementer, for eksempel sosiale knapper, logo, søkefeltet og så videre.

Sticky Menu fordeler og ulemper

Det ser ikke ut til å være en generell konsensus blant UX-designere om klebrige menyer er bra eller dårlige for nettsteder, siden det er både sterke ulemper og betydelige fordeler, så la oss se hva de er.

Fordeler:

Ulemper:

Trenger nettstedet ditt en klebrig meny?

Vi sier «Ja» for alle tilfellene nedenfor:

Lage en klebrig meny med Qode-temaer

Som vi nevnte tidligere, for å legge til en klebrig meny til nettstedet ditt, bruker du enten temaets innebygde funksjonalitet eller installerer en WordPress-plugin.

Hvis du har kjøpt et tema fra Qode Interactive, trenger du ikke en plugin – de fleste av temaene våre kommer med denne funksjonaliteten rett ut av esken.

Når det gjelder å aktivere og konfigurere det, hvis du vil ha en klebrig meny gjennom hele nettstedet (på alle sidene), gå til temaets generelle innstillinger (disse er merket med navnet på temaet eller temaforfatteren, etterfulgt av ordet «Alternativer») og klikk på Overskrift.

Her finner du alternativene for klebrig meny. Merk at alternativene kan variere, avhengig av temaet.

Etter å ha valgt «Sticky» fra rullegardinmenyen, åpnes et sett med tilpasningsalternativer.

Igjen, innstillingene kan variere avhengig av temaet.

Du kan også angi den klebrige menyen bare for én eller flere individuelle sider, og ikke for hele nettstedet ditt. Dette gjøres i de enkelte sidealternativene. Bare gå til siden du vil konfigurere den for og angi overskriftsoppførsel i henhold til dine preferanser.

Hvordan legge til en klebrig meny ved hjelp av en plugin

Hvis temaet ditt ikke kommer med klebrig menyfunksjonalitet, og du ikke er en utvikler og/eller ikke vet hvordan du bruker CSS for å legge til en klebrig overskrift, er det beste alternativet å bruke en plugin.

For dette formålet anbefaler vi å bruke My Sticky Menu – Sticky Menu on Scroll, Sticky Header for ethvert tema, som, som navnet antyder, kan fungere med ethvert tema, slik at du enkelt kan legge til en klebrig overskrift og til og med en velkomstlinje. Programtillegget krever ikke koding eller CSS-kunnskap, det er lett og kompatibelt med alle store WordPress-byggere og redaktører, inkludert Gutenberg og WPBakery. Den er basert på en elementklasse («Sticky Class» eller ID) som i hovedsak spesifiserer hvilken del av nettstedet ditt du vil gjøre klebrig.

Dette pluginet lar deg lage en klebrig overskrift på opp- og nedrulling, legge til effekter (fade eller skyve), endre opasitet og bakgrunnsfarge, og også bestemme når og på hvilke sider du vil at den klebrige menyen skal vises. Gratisversjonen burde gjøre susen for de fleste brukere, mens pro-versjonen lar deg endre CSS-stilen, samt deaktivere funksjonen på scroll eller på enkelte sider. Til slutt kommer denne WordPress-pluginen med flerspråklig støtte og er kompatibel med alle store sidebyggere.

Etter å ha installert og aktivert plugin, gå til Innstillinger > myStickymenu.

Det første du må angi er hvilken meny du vil vise som klebrig. Du kan velge hvilken som helst av menyene du har i temaet ditt.

Når det gjelder innstillingene, er det første du blir bedt om å gjøre å angi Sticky z-indeks. Z-indeksen definerer stabelrekkefølgen til overskriften, dvs. om den skal vises foran eller bak andre elementer på siden. Et element med en større stabelrekkefølge vises alltid foran alle elementer med en lavere stabelrekkefølge. Siden du sannsynligvis vil at den klebrige overskriften alltid skal være synlig, foreslår vi at du legger inn et høyere tall i dette feltet.

Deretter bestemmer du om du vil ha den klebrige menyen din vises på mobilskjermer eller ikke. Det er generelt en god idé å deaktivere den på mobil siden den mest sannsynlig vil ta for mye av skjermen og presse innholdet ut.

Det neste alternativet, Gjør synlig på Scroll på hjemmesiden, lar deg stille inn etter hvor mange piksler du vil at din klebrige meny skal vises på hjemmesiden din. Du kan også stille inn Sticky overgangstid nedenfor.

Programtillegget tillater også litt designtilpasning. Du kan angi klebrig bakgrunnsfarge, opasitet og velge overgangseffekten. Her kan du også definere en generell innstilling (for alle sidene på nettstedet ditt, ikke hjemmesiden din) som bestemmer etter hvor mange piksler du vil at menyen skal vises.

Ytterligere alternativer er tilgjengelige med pro-versjonen av plugin. Men hvis alt du trenger er en enkel klebrig meny, bør gratisversjonen fungere helt fint.

Siste tanker

Hvis du føler at det å legge til en klebrig meny vil forbedre nettstedets navigasjon og brukeropplevelse, sier vi – gå for det! Med mindre nettstedet ditt er tettpakket som det er, vil dette sannsynligvis være et flott tillegg og en viktig brukervennlighetsfaktor. Enten temaet ditt allerede har den nødvendige funksjonaliteten eller du velger å gå med plugin, er vi sikre på at du vil lage en klebrig meny som passer til sidene dine som hånd i hanske.