Hur man lägger till anpassad scrollbar till vilket element som helst i WordPress

Små designdetaljer kan göra en enorm skillnad för hur professionell din webbplats ser ut.

Anpassade rullningslister är en av de detaljer som de flesta besökare inte kommer att märka medvetet, men de kommer definitivt att känna den förbättrade visuella konsekvensen när de navigerar genom ditt innehåll.

Den goda nyheten är att anpassning av scrollbars i WordPress inte kräver avancerade kodningskunskaper, och resultaten kan verkligen förbättra din webbplats övergripande användarupplevelse.

Från vår erfarenhet av att bygga WordPress-webbplatser har vi funnit att anpassade scrollbars hjälper till att skapa den där polerade, avsiktliga looken som skiljer nybörjarwebbplatser från professionella.

Vi visar dig 2 enkla sätt att lägga till anpassade scrollfält till vilket element som helst på din WordPress-webbplats. Varje metod vi går igenom har testats i verkliga scenarier, så du kan välja det tillvägagångssätt som bäst passar din bekvämlighetsnivå.

När ska man lägga till ett scrollfält till specifika element i WordPress?

Att lägga till en scrollbar för WordPress-element kan avsevärt förbättra din webbplats användarupplevelse.

Men när ska du använda denna WordPress-designeegenskap?

Här är några vanliga WordPress-element som kan dra nytta av anpassade scrollfält:

• Navigationsmenyer – Perfekt för bloggar med 20+ kategorier och underkategorier som annars skulle sträcka sig ner över hela sidan.
• Sidofältswidgetar – Perfekt för innehållsrika sidofält där du vill behålla alla widgetar utan att kompromissa med utrymmet.
• Produktbeskrivningar – Håller långa produktdetaljer inom ramen samtidigt som en ren layout bibehålls.
• Kommentarsektioner – Visar snyggt hundratals kommentarer utan att överväldiga sidan.
• Bildgallerier – Visar flera bilder i ett galleri samtidigt som tillgängligheten bibehålls.

Med det i åtanke kommer vi att visa dig två alternativ för att lägga till en anpassad scrollbar till vilket element som helst på din WordPress-webbplats.

Vi rekommenderar att du väljer alternativ 1 om du precis har börjat med din webbplats och vill använda en sidbyggare med anpassad scrollfunktionalitet. Detta beror på att om du redan har använt ett annat tema, då behöver du byta tema för den här metoden.

Å andra sidan, om du gillar ditt nuvarande tema, kan du välja alternativ 2 för att lägga till en anpassad scrollbar med CSS-kod. Oroa dig inte, vi kommer att bryta ner processen steg för steg så att det är lätt för vem som helst att följa.

Du kan använda snabblänkarna nedan för att hoppa till din föredragna metod:

• Alternativ 1: Använd en sidbyggare med anpassade scrollfält för specifika element (ingen kod)
• Option 2: Use CSS Code to Add a Custom Scrollbar to a Specific Element

Alternativ 1: Använd en sidbyggare med anpassade scrollfält för specifika element (ingen kod)

Ett sätt att lägga till en anpassad scrollbar i ett specifikt element är att använda en sidbyggare med en scrollbarfunktion. På så sätt kan du enkelt anpassa scrollbaren utan att röra någon kod.

För den här metoden kommer vi att använda Thrive Architect. Förutom en scrollfältsfunktion har Thrive Architect över 300 mallar för att snabbt skapa professionellt utseende sidor och dynamiska innehållsfunktioner för att anpassa din besökares upplevelse.

Dessutom har vi funnit att dra-och-släpp-gränssnittet är användarvänligt, vilket gör det idealiskt för nybörjare inom WordPress. För en mer detaljerad titt på detta verktyg, kolla in vår recension av Thrive Architect.

Även om Thrive Architect inte erbjuder en gratisversion kan du använda vår speciella Thrive Themes rabattkod för att spara upp till 50% på ditt första köp.

Steg 1: Konfigurera Thrive Architect och Thrive Themes

För att börja behöver vi installera Thrive Architect-pluginet. Du kan komma åt detta genom att logga in på ditt konto på Thrive Themes webbplats.

Ladda sedan ner och installera pluginet Thrive Product Manager. Om du behöver hjälp, se vår guide om att installera WordPress-plugins för nybörjare.

Efter att ha aktiverat pluginet, navigera till Produktchef i din WordPress-instrumentpanel.

Klicka på 'Logga in på mitt konto' för att länka din WordPress-webbplats med ditt Thrive Themes-konto.

Du bör nu se en lista över Thrive Themes-produkter som finns tillgängliga på ditt konto.

Hitta 'Thrive Architect' och markera rutan 'Installera produkt'.

Scrolla ner för att hitta ‘Thrive Theme Builder‘ och välj alternativet ‘Installera tema’.

Klicka sedan på 'Installera valda produkter'. Detta steg är nödvändigt eftersom Thrive Architect fungerar tillsammans med Thrive Theme Builder.

Nästa skärm visar hur Thrive Product Manager installerar och aktiverar Thrive Theme Builder.

När du är klar, välj ‘Gå till Theme Builder Dashboard.’

Nu är det dags att välja en basdesign för din webbplats med hjälp av Thrives tema-bibliotek.

Om du är osäker på vilken du ska välja, använd knappen 'Förhandsgranska' för att se hur varje tema ser ut. När du har bestämt dig, klicka på 'Välj'.

Du kommer nu att gå in i guiden för temabyggaren.

Den här guiden hjälper dig att ladda upp din logotyp, välja varumärkesfärger för ditt tema och ställa in olika temastrukturer och mallar.

Se till att slutföra installationsguiden innan du går vidare till nästa steg.

Steg 2: Lägg till ett innehållsruta-element i ditt tema

Låt oss nu lägga till ett innehållslådeelement i ditt WordPress-tema, som har rullningslistsfunktionen som standard.

I Thrive Themes är en innehållsruta ett block du kan använda som en behållare för att gruppera flera block tillsammans. Detta kan vara användbart om du behöver en uppsättning element som ska stylas på samma sätt eller hanteras som en grupp.

För det här exemplet kommer vi att lägga till en innehållsruta som innehåller en lång lista med bloggkategorier. I det här scenariot vill vi kunna visa alla kategorier i sidofältet utan att göra det extremt långt.

Besök först en sida eller ett inlägg på din WordPress-blogg där du vill att scrollfältet ska finnas.

Klicka sedan, i den övre adminverktygsfältet, på ‘Redigera temamall [namn]’ eller ‘Redigera med Thrive’.

Du bör nu komma till redigeringsgränssnittet för Thrive Architect. För att lägga till innehållsrutans block, klicka på '+' tecknet på höger sida av sidan och välj elementet 'Content Box'.

Dra och släpp den sedan dit du vill att elementet med scrollfältet ska placeras.

Du kan nu lägga till fler innehållselement i innehållsrutan. Du kan till exempel klicka på '+' igen och lägga till 'Text'-blocket. Sedan kan du skriva in valfri text.

Thrive Themes erbjuder massor av visuella element, från grundläggande som text och bilder till formulär och prislistor.

Eftersom vi vill lägga till en lista över kategorier i sidopanelen, kommer vi också att lägga till elementet 'Dynamiskt stylad lista' i innehållsrutan.

Detta block hämtar i princip data från din webbplats för att dynamiskt visa en lista, som kategorier, taggar eller författare. Blocket uppdateras automatiskt när du bygger din webbplats.

När du har dragit och släppt den dynamiskt stilade listan till innehållsrutan, klicka på knappen 'Välj listtyp'.

Klicka sedan på 'Kategorilista'.

Nu är din lista över kategorier, din textruta och alla andra element du lägger till i innehållsrutan i samma behållare.

Och som du kan se är listan ganska lång, och det är därför vi vill lägga till en rullningslist till den.

Steg 3: Aktivera rullningslisten i innehållsrutan

Om du väljer den behållaren och klickar på den blå pilen till vänster, ser du många alternativ för att anpassa din innehållsruta.

Inställningarna för att lägga till ett scrollfält finns i fliken ‘Layout & Position’. Det är här du kan justera boxens marginaler, utfyllnad, bredd, höjd, justering och så vidare.

Det första vi gjorde var att klicka på den vita pilen inuti det blå utfyllnadsområdet, precis under sektionen 'Marginaler & utfyllnad'. Vi gjorde detta bara för att säkerställa att innehållsrutan stämmer överens med resten av elementen i sidofältet.

Utforska gärna andra alternativ här för att säkerställa att din ruta ser välproportionerlig ut.

Låt oss sedan scrolla ner till avsnittet Höjd. Klicka på knappen 'Max' och ändra pixelhöjden till ett mycket mindre antal. I det här fallet gick vi från 617px till 300px.

Detta kommer att göra innehållsrutan mycket kortare, vilket gör att kategorinamnen i den nedre sektionen försvinner.

När det är gjort, gå ner i panelen igen och öppna fliken ‘Avancerat’. Välj sedan ‘Scroll’ i Overflow-inställningarna och aktivera alternativet ‘Stil scrollfält’.

Ett scrollfält bör automatiskt läggas till ditt innehållsblock.

Och det var allt för att lägga till en anpassad scrollbar med Thrive Architect. Du kan fortsätta att redigera ditt WordPress-tema, sida eller inlägg, eller klicka på ‘Spara arbete’ längst ner för att publicera dina ändringar.

Så här ser vår scrollbar ut på demosidan:

Alternativ 2: Använd CSS-kod för att lägga till en anpassad scrollbar till ett specifikt element

Om du tycker att det är för mycket att byta WordPress-tema och använda en sidbyggare för att skapa en anpassad rullningslist, kan du använda CSS-kod istället. Den här metoden låter dig anpassa rullningslisten direkt på din WordPress-sida.

Oroa dig inte om du är ny på att arbeta med kodavsnitt. Vi guidar dig genom processen steg för steg, vilket gör det enkelt att aktivera den här funktionen på din WordPress-webbplats.

Först, låt oss förstå hur CSS fungerar. CSS står för Cascading Style Sheets. Det är ett språk som talar om för webbläsare hur de ska visa element på en webbsida. I vårt fall kommer vi att använda CSS för att lägga till och styla en anpassad scrollbar.

För att använda anpassad CSS behöver vi två saker:

1. En CSS-klass: Det här är som en namnskylt för ett element på din sida. Vi lägger till detta till det element vi vill ändra.
2. CSS-kod: Detta är uppsättningen instruktioner som talar om för webbläsaren hur elementet med CSS-klassen ska stylas.

Så, för att lägga till ett anpassat skrollfält, kommer vi först att ge en CSS-klass till elementet vi vill ändra. Sedan kommer vi att lägga till CSS-kod som skapar skrollfältet för element med den klassen. 

Du kommer att lägga till CSS-klassen scroll-bar till ditt element. Vi visar dig hur du gör detta nedan. Och här är hela CSS-kodavsnittet som lägger till scrollbaren:

.scroll-bar {
  max-height: 100px;  /* Adjust the maximum height as needed */
  width:250px;  /* Adjust the width as needed */
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}


/* Customizing the vertical scrollbar for Webkit-based browsers (Chrome, Safari) */
.scroll-bar::-webkit-scrollbar {
  width: 10px; /* Width of the vertical scrollbar */
}


.scroll-bar::-webkit-scrollbar-track {
  background: #eaeaea; /* Background of the scrollbar track */
}


.scroll-bar::-webkit-scrollbar-thumb {
  background: grey; /* Color of the scrollbar thumb */
  border-radius: 15px; /* Rounded corners for the thumb */
}


/* Hover state for the scrollbar thumb */
.scroll-bar::-webkit-scrollbar-thumb:hover {
  background: black; /* Change color when hovered */
}


/* For Firefox */
.scroll-bar {
  scrollbar-width: thin; /* Define scrollbar width */
  scrollbar-color: #888 #f1f1f1; /* Scrollbar thumb and track color */
}

Steg 1: Lägg till CSS-klassen till ditt element

Det finns flera sätt att lägga till en CSS-klass till ett element på din WordPress-webbplats.

Om du är i blockredigeraren eller redigeraren för hela webbplatsen, kan du bara klicka på valfritt block på din sida, inlägg eller blocktema-mall. Öppna sedan fliken 'Avancerat' i sidofältet för blockinställningar och ange din CSS-klass i fältet 'Ytterligare CSS-klass(er)'.

När du är klar klickar du bara på Uppdatera, Publicera eller Spara.

Om du använder ett klassiskt tema fungerar den här processen även med blockbaserade widgetredigeraren. Gå till Utseende » Widgets och klicka på valfritt block som du vill lägga till CSS-klassen till.

Efter det ser du samma Avancerat-flik i sidopanelen för blockinställningar. Ange bara CSS-klassen i fältet 'Ytterligare CSS-klass(er)' som tidigare.

Steg 2: Lägg till CSS-koden i ditt tema

Nu kör vi och lägger till vår anpassade CSS-kod. Vi visar dig 3 sätt att göra det: använda temaanpassaren, redigeraren för hela webbplatsen och WPCode.

Det första alternativet är för användare av klassiska teman. Dessutom är det en inbyggd funktion, så du behöver ingen plugin för att infoga koden eller ens öppna dina temafiler.

För att göra detta kan du öppna WordPress temaanpassare genom att gå till Utseende » Anpassa.

Notera: Om du inte ser den här inställningen i din WordPress använder du förmodligen ett blocktema och kan använda nästa metod istället. För mer information, kolla in vår guide om hur du åtgärdar saknad temaanpassare i WordPress-admin.

Metod 1: Lägga till CSS i klassiska teman

I anpassaren, hitta och klicka på ‘Ytterligare CSS’.

Klistra helt enkelt in koden vi visade dig tidigare här.

Du kommer automatiskt att se ändringarna på ditt tema när du har lagt till koden.

Som du kan se har elementet som du lade till CSS-klassen nu ett skrollfält. Sedan kan du helt enkelt klicka på 'Publicera'.

Metod 2: Lägga till CSS med hjälp av hela webbplatsredigeraren

Om du har ett blocktema måste du lägga till CSS-kod med hjälp av redigeraren för hela webbplatsen, gå sedan bara till Utseende » Redigerare.

Du hittar några menyalternativ för att anpassa ditt blocktema.

Klicka här på 'Stilar'.

På den här sidan bör det finnas några blocktemadesigner som du kan välja mellan.

Vi ignorerar det bara och klickar på knappen ‘Redigera’. Den är formad som en penna.

Du är nu inne i redigeringsgränssnittet.

I panelen till höger, klicka på menyn med tre punkter bredvid revisionsikonen och välj 'Ytterligare CSS'.

Nu, bara klistra in kodavsnittet från tidigare. Du bör se dina ändringar automatiskt.

När du är klar, klicka på 'Spara'.

En nackdel med att använda temaanpassaren och fullständig webbplatsredigerare för att infoga din CSS är att om du bestämmer dig för att uppdatera eller ändra ditt tema, kan du riskera att förlora din CSS-anpassning.

Det är därför vi rekommenderar att använda WPCode för att redigera din webbplats CSS, särskilt om du använder fullständiga webbplatsredigeraren och ett blockbaserat tema. Du kan följa den metoden nedan, och den fungerar även med klassiska teman.

Metod 3: Lägga till CSS med WPCode

Om du är rädd för att anpassa din webbplats med kod, då är WPCode den perfekta lösningen för dig. Detta kodsnuttplugin gör det säkert att infoga anpassad kod, eftersom du inte behöver interagera direkt med dina temafiler.

Om ett fel uppstår kommer WPCode automatiskt att upptäcka och inaktivera koden som orsakar problemet. På så sätt är det minimal risk att du bryter din webbplats.

Installera först WPCode-pluginet på din webbplats. Du kan läsa vår nybörjarguide om hur man installerar ett WordPress-plugin för mer information.

Gå sedan till Kodavsnitt » + Lägg till avsnitt i din WordPress-instrumentpanel. Välj ‘Lägg till din anpassade kod (nytt avsnitt)’ och klicka på ‘+ Lägg till anpassat avsnitt’.

Ge nu din nya anpassade kodsnutt ett namn. Det kan vara något enkelt som 'CSS-scrollbar'.

Ändra sedan Kodtyp till 'CSS-utdrag'.

I rutan Kodförhandsgranskning, klistra in kodavsnittet vi visade dig tidigare.

När du är klar, scrolla ner på sidan till avsnittet 'Infogning'. Se där till att Infogningsmetoden är 'Automatisk infogning' och Platsen är 'Hela webbplatsens sidhuvud'.

När det är gjort, växla bara knappen längst upp till höger så att det står 'Aktiv' och klicka på 'Spara avsnitt'.

Du bör nu se ett skrollfält på det element du har lagt till CSS-klassen till.

Här är ett exempel på hur vi lägger till en scrollbar till en lista med senaste inlägg:

Hur man lägger till ett anpassat scrollfält till ett menyalternativ med flera undermenyer

En av de saker som läsare är nyfikna på är hur man lägger till scrollfältet till sitt navigeringsmenyobjekt som har en lång lista med underordnade menyer.

Processen är faktiskt ganska lik den vi just visat dig. Men det finns några små justeringar här och där beroende på vilket tema du använder.

Om du använder ett klassiskt tema bör du bara lägga till klassen scroll-bar till ditt huvudsakliga menyalternativ. Du behöver inte lägga till den till dina undermenyalternativ.

För att lägga till en CSS-klass i din meny kan du öppna temaanpassaren.

Klicka sedan på knappen ‘Menyer’.

Klicka sedan på kugghjulsikonen ‘Inställningar’ och välj sedan ‘CSS-klasser’.

Detta låter dig lägga till en CSS-klass till varje menyalternativ.

Flytta nu ner i sidopanelen.

Öppna sedan din primära meny.

I det här skedet kan du välja menyalternativet som du vill lägga till CSS-klassen till och klicka för att expandera det.

Det bör finnas ett fält som heter 'CSS Classes', och du kan lägga till klassen där.

Annat än det, vill du se till att lägga till klassen sub-menu efter varje omnämnande av klassen scroll-bar i din CSS-kod, så här:

.scroll-bar .sub-menu {
  max-height: 100px;  /* Adjust the maximum height as needed */
  overflow-y: scroll; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */

Här ska navigeringsmenyn se ut:

Samma princip gäller för blockteman.

Du behöver bara lägga till klassen scroll-bar till ditt huvudsakliga menyalternativ, inte till undermenyerna.

Nu, här skiljer sig sakerna åt. Du måste besöka din WordPress-webbplats och öppna ditt webbläsarverktyg för inspektion.

För Chrome-användare, högerklicka bara på ditt menyalternativ med undermenyer och välj 'Inspektera'.

Tryck CTRL/Command + F på ditt tangentbord för att aktivera Sök-funktionen. Leta sedan upp HTML-koden <ul></ul> som innehåller klassen scroll-bar.

Den exakta koden kommer att skilja sig från tema till tema, men här är hur vår ser ut:

<ul data-wp-on-async--focus="actions.openMenuOnFocus" class="wp-block-navigation__submenu-container scroll-bar wp-block-navigation-submenu">...</ul>

Du vet att du väljer rätt kodrad om alla undermenyalternativ är markerade.

Nu vill du kopiera alla dessa CSS-klasser mellan class=" och ">.

I CSS-koden, ersätt klassen scroll-bar med alla dessa klasser och en punkt (.) före dem för att indikera att det är en klass. Det är också bra att lägga till !important på varje rad som anpassar scrollfältet för att säkerställa att temat inte åsidosätter dessa inställningar.

Här är ett exempel:

.wp-block-navigation__submenu-container.scroll-bar.wp-block-navigation-submenu {
 max-height: 100px !important; /* Adjust the maximum height as needed */
 overflow-y: auto !important; /* Enable vertical scrolling */
 overflow-x: hidden !important; /* Hide horizontal scrollbar */
}
/* Do the same to the rest of the code */

När du har lagt till den här koden bör din navigeringsmeny se ut så här:

Hur man anpassar designen på den anpassade scrollbaren

Nu när du har lagt till ett anpassat skrollfält, kanske du vill att det ska matcha din webbplats design. Du kan enkelt ändra skrollfältets utseende med CSS. Låt oss titta på hur du anpassar dess storlek, färg och form.

Säg att du vill ändra den maximala höjden på elementet som du lägger till en scrollbar till. I det här fallet kan du ändra siffran i max-height: högst upp till vilket nummer du vill, så länge det är i pixlar.

Du kan också justera siffran i width: för att göra bredden på elementet med scrollfältet bredare eller smalare.

För att justera storleken på scrollfältet, hitta raden width: 10px; under selektorn .scroll-bar::-webkit-scrollbar.

Öka detta nummer för att göra scrollbaren bredare, eller minska det för att göra den smalare. Till exempel kommer width: 15px; att skapa en bredare scrollbar, medan width: 5px; kommer att göra den tunnare.

För att ändra färgen på scrollfältet, hitta raden som säger background: grey; under selektorn .scroll-bar::-webkit-scrollbar-thumb.

Ersätt 'grey' med vilken färg du vill, som 'blue' eller vilken färg som helst med hjälp av hex-färgkoden (t.ex. #0000FF).

Om du vill göra scrollfältet mer rundat, leta efter egenskapen border-radius.

Ju högre nummer, desto rundare blir hörnen. Prova att ändra border-radius: 15px; till border-radius: 20px; för ett rundare utseende, eller border-radius: 0px; för skarpa hörn.

Notera att ändringarna ovan endast kommer att påverka Webkit-baserade webbläsare som Chrome och Safari.

För Firefox måste du justera egenskapen scrollbar-color. Den första färgen är för tummen (delen du drar), och den andra är för spåret (bakgrunden). Till exempel, scrollbar-color: blue #eaeaea skapar ett blått scrollfält på ett ljusgrått spår i Firefox.

Efter att ha gjort dessa ändringar, spara din CSS och uppdatera din WordPress-sida för att se det nya, anpassade scrollfältet i aktion. Experimentera gärna med olika färger och storlekar tills du hittar den perfekta looken för din webbplats.

Lär dig fler sätt att förbättra din WordPress webbdesign

Nu när du har lärt dig hur du lägger till anpassade scrollfält till din WordPress-webbplats, varför inte utforska andra sätt att förbättra din webbplats design och funktionalitet? Här är några användbara guider för att ta dina WordPress-kunskaper till nästa nivå:

• Om du vill visa dina sidor på ett visuellt tilltalande sätt, kolla in vår handledning om hur du enkelt visar en sidlista med miniatyrbilder i WordPress.
• För bloggar med mycket innehåll kan oändlig scrollning avsevärt förbättra användarupplevelsen. Lär dig hur du lägger till den här funktionen steg för steg.
• För att lägga till lite visuell känsla, prova att lägga till en parallaxeffekt till ditt WordPress-tema. Det är enklare än du kanske tror.
• För förbättrad tillgänglighet, överväg att lägga till en textstorleksändrare på din webbplats. Vi har en enkel guide som hjälper dig att göra just det.
• Om du inte är nöjd med sidofältets nuvarande position kan vi visa dig hur du ändrar sidofältets sida i WordPress.

Vi hoppas att den här artikeln har hjälpt dig att lära dig hur du lägger till ett anpassat skrollfält till vilket element som helst på din WordPress-webbplats. Du kanske också vill kolla in våra experters val av bästa WordPress-temabyggare och vår guide om hur man lägger till ett läsframstegsfält i WordPress.

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