Hur man lägger till en anpassad scrollbar i WordPress

Har du märkt hur vissa webbplatser har de där eleganta, anpassade scrollfälten som perfekt matchar deras varumärkesfärger? 🤩

Vi har också märkt den här funktionen. Och många av våra användare har frågat oss hur man skapar dessa iögonfallande anpassade scrollfält på sina egna WordPress-webbplatser.

De goda nyheterna? Att anpassa din WordPress-scrollfält är mycket enklare än du kanske tror. Oavsett om du vill matcha dina varumärkesfärger, förbättra navigeringen eller lägga till en professionell touch till din webbplats, visar vi dig exakt hur du gör det. Ingen kodningserfarenhet krävs!

Vad du bör veta innan du lägger till en anpassad scrollbar 💡

Så, du är intresserad av att anpassa din WordPress-rullningslist. Men innan du dyker in, finns det några viktiga saker du bör veta för att säkerställa att du fattar rätt beslut för din WordPress-webbplats.

Viktiga överväganden för anpassade rullningslister:

• Webbläsarkompatibilitet: Medan moderna webbläsare som Chrome, Safari och Edge (WebKit-baserade webbläsare för CSS) stöder anpassade rullningslister bra, kan andra erbjuda begränsad anpassning eller ingen alls. Testa alltid dina ändringar i olika webbläsare för att säkerställa en konsekvent upplevelse.
• Begränsningar för mobila enheter: På mobila enheter ersätts traditionella rullningslister ofta av intuitiva gester för beröring (svepningar). Detta innebär att anpassade rullningslister vanligtvis inte visas på smartphones eller surfplattor.
• Användarupplevelse & Tillgänglighet: Din rullningslist bör förbättra, inte distrahera från, ditt innehåll. Alltför pråliga eller svårseende designer kan negativt påverka användarnavigeringen. Sikta på subtila justeringar som matchar dina varumärkesfärger och förbättrar webbplatsens övergripande flöde.
• Prestandapåverkan: Även om det generellt är minimalt, kan tillägg av plugins eller omfattande CSS påverka webbplatsens laddningshastighet något. Välj optimerade lösningar och håll din kod ren för att bibehålla god prestanda.
• Testning är avgörande: Oavsett vilken metod du väljer, testa din anpassade scrollbar noggrant i olika webbläsare, enheter och skärmstorlekar för att säkerställa att den fungerar effektivt.

När det görs rätt kan detta designelement i WordPress ge din webbplats den där extra professionella touchen samtidigt som den bibehåller utmärkt användbarhet.

Nu när du förstår vad du kan förvänta dig, låt oss titta på hur du lägger till en anpassad scrollbar på din WordPress-webbplats. Använd helt enkelt snabblänkarna nedan för att hoppa till den metod du vill använda:

Alternativ 1: Använd ett avancerat plugin för scrollbar (gratis + enkelt)

Det enklaste sättet att anpassa scrollfältet i WordPress är att använda Advanced Scrollbar. Detta gratis plugin låter dig ändra scrollfältets bredd, färg, scrollhastighet och mer utan att behöva skriva en enda kodrad.

Det första du behöver göra är att installera och aktivera pluginet Advanced Scrollbar. För mer information, se vår steg-för-steg-guide om hur du installerar ett WordPress-plugin.

Efter aktivering, gå till Inställningar » Avancerade inställningar för scrollfält.

Här kan du ändra rullningslistens design, som färgschema och bakgrundsfärg för rälsen.

I följande bild har vi skapat ett blått rullningsfält.

Du kan också ändra mushjulets steg genom att skriva ett nytt nummer i fältet 'Mouse Scroll Step'.

Ett lägre nummer gör att din webbplats scrollar långsammare, och ett högre nummer gör att den scrollar snabbare.

Du kan också välja om du vill dölja scrollbaren automatiskt så att den bara visas när besökaren scrollar.

Detta kan vara användbart om du har skapat en mer färgglad scrollbar och är orolig för att den kan distrahera från resten av ditt innehåll.

Som standard visas scrollfältet på höger sida av webbläsarfönstret. Du kan dock flytta det till vänster sida med hjälp av inställningarna för 'Rail Align' om du föredrar det.

När du är nöjd med scrollfältets konfiguration, kom ihåg att klicka på 'Spara ändringar' för att spara dina inställningar.

Du kan nu besöka din WordPress-blogg för att se den anpassade rullningslisten i aktion.

Alternativ 2: Skapa CSS-scrollfält (avancerat)

Om du vill göra mer avancerade ändringar i din scrollbar, då är ett annat alternativ att använda CSS.

Att skapa en anpassad scrollbar med CSS med hjälp av pseudo-elementen ::-webkit-scrollbar (som i exemplet nedan) låter dig anpassa många delar av elementet.

Dessa specifika CSS-regler fungerar dock främst i WebKit-baserade stationära webbläsare som Chrome, Safari och den nya Microsoft Edge.

Detta innebär att din anpassade scrollbar kanske inte visas eller visas annorlunda i andra webbläsare (som Firefox) eller på de flesta mobila enheter.

För att anpassa din scrollbar med CSS, gå till Utseende » Anpassa.

I WordPress anpassningsverktyg, klicka på ‘Ytterligare CSS’.

Du kan nu lägga till din kod i den lilla redigeraren som visas.

Här är ett exempel på kod som ändrar hur scrollfältet ser ut:

::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar {
width: 10px;
}
 
::-webkit-scrollbar-track {
background: #ffb400;
border:1px solid #ccc;
}
 
::-webkit-scrollbar-thumb {
background: #cc00ff;
border:1px solid #eee;
height:100px;
border-radius:5px;
}
 
::-webkit-scrollbar-thumb:hover {
background: blue;
}

Du kan lägga till vilken kod du vill. För mer information om CSS, se vår kompletta guide om hur du lägger till anpassad CSS i ditt WordPress-tema.

När du är nöjd med din kod klickar du bara på knappen 'Publicera'. Du kan nu besöka din WordPress-webbplats i en WebKit-webbläsare för att se dina ändringar i praktiken.

Bonustips: Lägg till en scroll-till-toppen-effekt i WordPress

Förutom att skapa en anpassad rullningslist, kanske du också vill lägga till en effekt för att rulla till toppen på din WordPress-webbplats. Detta kan vara mycket användbart om du har längre blogginlägg och vill ge användarna ett snabbt sätt att komma tillbaka till toppen.

För att lägga till den här funktionen måste du installera och aktivera pluginet WPFront Scroll Top. För detaljerade instruktioner, se vår handledning om hur du installerar ett WordPress-plugin.

Vid aktivering, besök sidan Inställningar » Scroll Top från WordPress-instrumentpanelen och markera rutan 'Aktiverad' för att aktivera scroll-till-topp-effekten.

Efter det kan du redigera scroll-offset, knappstorlek, opacitet, blekningsvaraktighet, scrollvaraktighet och mer härifrån.

När du är klar, glöm inte att klicka på knappen 'Save Changes' för att spara dina inställningar.

Du har nu framgångsrikt lagt till en effekt för att rulla till toppen på din webbplats. För mer detaljerade instruktioner, se vår handledning om hur du lägger till en jämn rullning till toppen-effekt i WordPress.

Vanliga frågor om att lägga till en anpassad scrollbar i WordPress

Här är några frågor som våra läsare ofta har ställt om att lägga till en anpassad scrollbar i WordPress:

Hur lägger jag till en scrollbar i WordPress?

Du kan lägga till en scrollbar genom att använda anpassad CSS eller ett plugin som Advanced Scrollbar som möjliggör scrollbara innehållsområden inuti inlägg, sidor eller widgets i WordPress.

Hur infogar jag en slider i WordPress?

Du kan infoga en bildspel genom att använda ett bildspel-plugin som Soliloquy, skapa ditt bildspel och sedan lägga till det på en sida med hjälp av ett block. För mer information, kolla in vår handledning om hur du skapar ett responsivt bildspel i WordPress.

Vad är det bästa skjutreglage-pluginet för WordPress?

Soliloquy är det bästa WordPress-bildspel-pluginet eftersom det är nybörjarvänligt, flexibelt och fungerar bra med de flesta teman och sidbyggare.

Hur skapar jag en anpassad banner?

Du kan använda OptinMonster för att skapa en anpassad banner med dess färdiga mallar. Pluginet låter dig också anpassa innehållet helt, lägga till CTA och använda olika färger enligt din smak. För detaljerade instruktioner, se vår handledning om hur du skapar en banner i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en anpassad scrollbar i WordPress. Du kanske också vill se våra experttips för de bästa WordPress dra-och-släpp-sidbyggarna och vår ultimata guide om hur du redigerar en WordPress-webbplats.

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.