Så här addar du ett customize rullningsfält i WordPress

Att förbättra utseendet på din WordPress-webbplats kan avsevärt förbättra användarupplevelsen, och ett ofta förbisett element är rullningslisten.

Genom att anpassa rullningslisten kan du ge din webbplats en unik touch, göra den mer visuellt engagerande och anpassa den till din övergripande designestetik.

På WPBeginner har vi skrivit hundratals artiklar om WordPress-design och har också använt olika anpassningsfunktioner för att öka engagemanget på vår webbplats.

En anpassad rullningslist kan förbättra utseendet på din webbplats och göra navigeringen smidigare och mer intuitiv för besökarna.

I den här artikeln visar vi hur du enkelt kan add to en custom scrollbar i WordPress.

Varför add to en customize rullgardinsmeny i WordPress?

År 2018 draftade WC3 ett förslag som allowade website-ägare att customize hur rullningslisten ser ut med hjälp av CSS.

Idag har många moderna webbläsare stöd för customize scrollbars.

Med detta i åtanke kanske du vill ändra rullningslisten så att den bättre passar webbplatsens färgschema eller varumärke. Många webbplatser använder också en anpassad rullningslist för att fånga besökarens uppmärksamhet, vilket kan öka sidvisningar och minska avvisningsfrekvensen.

Tänk dock på att varje webbläsare hanterar customize rullningslister på olika sätt. Många webbläsare stöder bara delvis customize, medan vissa inte visar din anpassade styling all.

Det betyder att det är viktigt att testa din site med olika webbläsare och devices för att se hur rullningslisten ser ut i så många webbläsare som möjligt.

Med detta sagt, låt oss ta en titt på hur man addar en customize rullningslist i WordPress. Använd bara snabblänkarna under för att hoppa till den metod du vill använda:

Metod 1: Add a Custom Scrollbar in WordPress With a Plugin (Enkelt)

Det enklaste sättet att anpassa rullningslisten är genom att använda Advanced Scrollbar. Med detta kostnadsfria plugin kan du ändra scrollbarens bredd, färg, scrollhastighet och mycket mer utan att behöva skriva en enda rad kod.

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

När du är aktiverad, heada till Settings ” Advanced Scrollbar Settings.

Här kan du ändra rullningslistans färgschema och bakgrundsfärg.

I Följer image har vi skapat en blå scrollbar.

Du kan också ändra musens rullningssteg genom att skriva in en new siffra i fältet ”Mouse Scroll Step”.

En lägre siffra gör att din site rullar långsammare, och en högre siffra gör att den rullar snabbare.

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

Detta kan vara användbart om du har skapat en mer färgstark rullningslist och är orolig för att den ska distrahera från resten av ditt content.

Som standard visas rullningslisten på höger sida av webbläsarfönstret. Du kan dock flytta den 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 rullningslistans konfiguration ska du komma ihåg att klicka på ”Save Changes” för att spara dina inställningar.

You can now visit your WordPress website to see the custom scrollbar in action.

Metod 2: Add to Custom Scrollbar Colors i WordPress med hjälp av CSS

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

Med den här metoden kan du customize alla delar av rullningslisten, men den fungerar bara på webbläsare som använder WebKit. Det innebär att yours ändringar inte kommer att visas i alla webbläsare, inklusive mobila webbläsare.

För att anpassa din rullningslist med CSS, gå till Appearance ” Customize.

I WordPress customize klickar du på ”Additional CSS”.

Nu kan du add to din kod i den lilla editor som visas.

Här är ett exempel på kod som ändrar hur rullningslisten 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 add to vilken kod du vill. För mer information om CSS, vänligen se vår kompletta guide om hur du lägger till customize CSS i ditt WordPress theme.

När du är nöjd med din kod klickar du bara på knappen ”Publicera”. Nu kan du besöka din WordPress blogg i en WebKit webbläsare för att se dina ändringar i action.

Bonus: Add to a Scroll to Top Effect i WordPress

Förutom att skapa en custom scrollbar kanske du också vill add to en scroll-to-top-effekt på din WordPress site. Detta kan vara till stor hjälp om du har längre blogginlägg och vill ge användarna ett snabbt sätt att komma tillbaka till högst upp.

För att add to den här funktionen måste du installera och aktivera WPFront Scroll Top plugin. Detaljerade instruktioner finns i vår tutorial om hur du installerar ett plugin för WordPress.

Vid aktivering, besök Settings ” Scroll Top page från WordPress dashboard och kontrollera ”Aktiverad” boxen för att aktivera rulla till högst upp effekten.

Efter det kan du editera förskjutningen av rullningen, knappens storlek, opacitet, uttoningslängd, rullningslängd och mer härifrån.

När du är klar, glöm inte att clicka på knappen ”Save Changes” för att store dina inställningar.

Du har nu lyckats lägga till en scroll-to-top-effekt på din webbplats. För mer detaljerade instruktioner, se vår handledning om hur du lägger till en smidig scroll to top-effekt i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en customize scrollbar i WordPress. Du kanske också vill se vår guide om hur man skapar en landing page i WordPress eller se våra expertval för de bästa drag and drop page builders.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.