Knowledge graph (kennisgrafiek)

Hoe u een aangepaste schuifbalk toevoegt in WordPress

3 min


110

Wilt u een aangepaste schuifbalk toevoegen in WordPress? Door het uiterlijk van de schuifbalk te wijzigen, kunt u vooral opvallen wanneer u een aangepast thema voor uw website maakt.

In dit artikel laten we u zien hoe u eenvoudig een aangepaste schuifbalk in WordPress kunt toevoegen. We laten u twee oplossingen zien en u kunt er een kiezen die het beste bij u past.

Een aangepaste schuifbalk toevoegen in WordPress

Problemen met aangepaste schuifbalkkleuren

CSS wordt standaard niet geleverd met een regelset waarmee u de eigenschappen van de schuifbalk kunt wijzigen. Er zijn enkele voorstellen om dit toe te voegen, maar deze worden momenteel niet door de meeste browsers ondersteund.

Om dit te verhelpen, gebruiken ontwerpers en ontwikkelaars browserspecifieke pseduo-elementen of JavaScript om het standaard uiterlijk van de schuifbalk te negeren.

We laten je beide technieken zien. Houd er echter rekening mee dat u uw site met verschillende browsers en apparaten moet testen om er zeker van te zijn dat deze correct werkt in alle browsers.

Dat gezegd hebbende, laten we eens kijken hoe u aangepaste schuifbalkkleuren in WordPress kunt toevoegen.

Methode 1. Voeg een aangepaste schuifbalk toe aan WordPress met een plug-in

Deze methode is eenvoudiger en wordt aanbevolen voor de meeste gebruikers. Het ondersteunt echter geen mobiele browsers.

Allereerst moet u de plug-in Advanced Scrollbar installeren en activeren . 

Na activering moet u naar de pagina Instellingen »Instellingen schuifbalk voor aangepaste kleuren gaan om de plug-in te configureren.

Schuifbalkkleur en achtergrondinstellingen

Vanaf hier kunt u de kleur van de schuifbalk en de achtergrondkleuren van de schuifbalk wijzigen. U kunt vervolgens de scrolstap van de muis selecteren, dit is de scrollsnelheid van het muiswiel.

U kunt ook selecteren of u de schuifbalk automatisch wilt verbergen of altijd wilt weergeven.

Je hebt de optie om de optie ‘Alleen cursor’ te kiezen, die de schuifbalk zou weergeven, maar niet de knop.

Scrolopties

Daaronder vindt u opties om de scrollsnelheid in te stellen, de uitlijning van de rails (links of rechts) te wijzigen en het aanraakgedrag in te schakelen.

Vergeet niet op de knop Wijzigingen opslaan te klikken om uw instellingen op te slaan.

U kunt nu uw website bezoeken om uw aangepaste schuifbalkkleuren in actie te zien.

Aangepaste schuifbalkkleurenvoorbeeld

Methode 2. Voeg aangepaste schuifbalkkleuren toe in WordPress met behulp van CSS

Deze methode gebruikt CSS om je schuifbalk op te maken, wat sneller is dan met jQuery.

Het werkt echter alleen op desktopbrowsers die gebruikmaken van de WebKit-rendering-engine zoals Google Chrome, Safari, Opera en meer.

Het heeft geen effect op mobiele browsers of Firefox en Edge op desktopcomputers.

U moet de volgende aangepaste CSS aan uw WordPress-thema toevoegen .

12345678910111213141516171819202122::-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; }

Voel je vrij om kleuren en andere CSS-eigenschappen te wijzigen.

Als u tevreden bent, vergeet dan niet uw wijzigingen op te slaan. Daarna kunt u een voorbeeld ervan bekijken in een ondersteunde browser.

Dit is hoe het eruit zag op onze demo-website tijdens het bekijken op Google Chrome op een Mac-computer.

Voorbeeld van aangepaste kleuren op de schuifbalk

We hopen dat dit artikel je heeft geholpen om te leren hoe je een aangepaste schuifbalk in WordPress kunt toevoegen.


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format