Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment ajouter une barre de défilement personnalisée dans WordPress

Avez-vous remarqué que certains sites ont des barres de défilement personnalisées et élégantes qui s’harmonisent parfaitement avec les couleurs de leur marque ? 🤩

Nous avons nous aussi remarqué cette fonctionnalité. Et beaucoup de nos utilisateurs nous ont demandé comment créer ces barres de défilement personnalisées accrocheuses sur leurs propres sites WordPress.

La bonne nouvelle ? Personnaliser votre barre de défilement WordPress est beaucoup plus facile que vous ne le pensez. Que vous souhaitiez assortir les couleurs de votre marque, améliorer la navigation ou ajouter une touche professionnelle à votre site, nous vous afficherons exactement comment procéder. Aucune expérience en matière de codage n’est nécessaire !

Adding a custom scrollbar in WordPress

Ce que vous devez savoir avant d’ajouter une barre de défilement personnalisée 💡

Vous souhaitez personnaliser votre barre de défilement WordPress. Mais avant de vous y plonger, il y a quelques choses importantes que vous devez savoir pour vous assurer que vous prenez la bonne décision pour votre site WordPress.

Tout d’abord, alors que les barres de défilement personnalisées peuvent être étonnantes, tous les navigateurs ne les affichent pas de la même manière. Les navigateurs modernes comme Outil de personnalisation les supportent bien, mais d’autres peuvent afficher une personnalisation limitée ou pas de personnalisation du tout – en particulier sur les appareils mobiles.

L’essentiel est de commencer subtilement. Nous recommandons toujours de commencer par des ajustements mineurs qui correspondent au jeu de couleurs de votre marque plutôt que de créer des designs tape-à-l’œil qui pourraient détourner l’attention de votre contenu. N’oubliez pas que votre barre de défilement doit améliorer le compte des utilisateurs/utilisatrices, et non pas les afficher.

Lorsqu’il est bien fait, cet élément de conception WordPress peut donner à votre site une touche professionnelle supplémentaire. Confirmez simplement que vous testez vos modifications sur différents navigateurs pour garantir une expérience cohérente à tous vos internautes.

Maintenant que vous savez à quoi vous attendre, voyons comment ajouter une barre de défilement personnalisée à votre site WordPress. Utilisez simplement les liens rapides ci-dessous pour passer à la méthode que vous souhaitez utiliser :

🔎 Vous souhaitez ajouter des barres de défilement personnalisées à des éléments spécifiques comme les boîtes de contenu ou les colonnes latérales ? Consultez notre guide sur la façon d’ajouter des barres de défilement personnalisées à n’importe quel élément dans WordPress.

Option 1 : Utiliser l’extension Advanced Scrollbar Plugin (gratuite et facile)

La façon la plus simple de personnaliser la barre de défilement dans WordPress est d’utiliser le plugin Advanced Scrollbar. Cette extension gratuite vous permet de modifier la largeur, la couleur, la vitesse de défilement de la barre de défilement, et plus encore, sans avoir à écrire une seule ligne de code.

La première chose à faire est d’installer et d’activer l’extension Advanced Scrollbar. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, allez dans Réglages  » Paramètres avancés de la barre de défilement.

The Advanced Scrollbar WordPress plugin

Ici, vous pouvez modifier le design de la barre de défilement, comme le jeu de couleurs et la couleur d’arrière-plan du rail.

Dans l’image abrégée, nous avons créé une barre de défilement bleue.

An example of a custom scrollbar

Vous pouvez également modifier l’étape par étape du défilement de la souris en saisissant un nouveau nombre dans le champ « Étape du défilement de la souris ».

Un nombre inférieur fera défiler votre site plus lentement, et un nombre supérieur le fera défiler plus rapidement.

Changing the scrollbar speed in WordPress

Vous pouvez également sélectionner si vous souhaitez masquer automatiquement la barre de défilement afin qu’elle apparaisse uniquement lorsque l’internaute est en train de défiler.

Cela peut être utile si vous avez créé une barre de défilement plus colorée et que vous craignez qu’elle ne détourne l’attention du reste de votre contenu.

Hiding the WordPress scrollbar

Par défaut, la barre de défilement apparaît sur le côté droit de la fenêtre du navigateur. Si vous le souhaitez, vous pouvez le déplacer vers la gauche en utilisant les Réglages d’alignement du rail.

Lorsque vous êtes satisfait de la configuration de la barre de défilement, n’oubliez pas de cliquer sur « Enregistrer les modifications » pour enregistrer vos réglages.

Vous pouvez maintenant visiter votre blog WordPress pour voir la barre de défilement personnalisée en action.

Option 2 : Création d’une barre de défilement CSS (avancée)

Si vous souhaitez apporter des modifications plus poussées à votre barre de défilement, une autre option consiste à utiliser le CSS.

La création d’une barre de défilement personnalisée avec CSS vous permet de personnaliser chaque partie de l’élément, mais elle fonctionne uniquement sur les navigateurs de bureau utilisant WebKit. Cela signifie que vos modifications ne s’afficheront pas sur tous les navigateurs, y compris les navigateurs mobiles.

Pour personnaliser votre barre de défilement à l’aide de CSS, allez dans Apparence  » Personnaliser.

Note: Si vous utilisez un thème en bloc, cette option ne sera pas disponible pour vous. Dans ce cas, vous pouvez ouvrir le personnalisateur en tapant l’URL https://example.com/wp-admin/customize.php. N’oubliez pas de remplacer exemple.com par le nom de domaine de votre propre site.

En savoir plus, consultez notre guide sur la façon de corriger l’absence du personnalisateur de thème dans l’administration de WordPress.

The WordPress customizer

Dans le client/cliente WordPress, cliquez sur « Additional CSS ».

Vous pouvez maintenant ajouter votre code dans le petit éditeur qui apparaît.

How to customize the scrollbar using the WordPress Customizer

Voici un exemple de code qui modifie l’aspect de la barre de défilement :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
::-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;
}

Vous pouvez ajouter le code que vous souhaitez. En savoir plus sur le CSS, Veuillez consulter notre guide terminé sur la façon d’ajouter un CSS personnalisé à votre thème WordPress.

Lorsque vous êtes satisfait de votre code, il vous suffit de cliquer sur le bouton « Publier ». Vous pouvez maintenant visiter votre site WordPress dans un navigateur WebKit pour voir vos modifications en action.

An example of a custom scrollbar in WordPress

Astuce bonus : Ajouter un effet de défilement vers le haut dans WordPress

Outre la création d’une barre de défilement personnalisée, vous pouvez également ajouter un effet de défilement vers le haut sur votre site WordPress. Cela peut être super utile si vous avez des publications de blog plus longues et que vous souhaitez fournir aux utilisateurs/utilisatrices un moyen rapide de revenir au début.

Pour ajouter cette fonctionnalité, vous devez installer et activer le plugin WPFront Scroll Top. Pour des instructions détaillées, consultez notre tutoriel sur l ‘installation d’une extension WordPress.

Lors de l’activation, rendez-vous sur la page Réglages  » Défilement vers le haut depuis le tableau de bord WordPress et cochez la case  » Activé  » pour activer l’effet de défilement vers le haut.

Vous pouvez ensuite modifier le décalage du défilement, la taille du bouton, l’opacité, la durée du fondu, la durée du défilement, etc. à partir d’ici.

Edit the plugin settings for adding the scroll to top effect

Une fois que vous avez terminé, n’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour stocker vos réglages.

Vous avez bien ajouté un effet de défilement vers le haut à votre site. Pour des instructions plus détaillées, consultez notre tutoriel sur l ‘ajout d’un effet de défilement fluide vers le haut dans WordPress.

Scroll to top button preview

Nous espérons que cet article vous a aidé à apprendre comment ajouter une barre de défilement personnalisée dans WordPress. Vous pouvez également consulter nos choix d’experts pour les meilleurs constructeurs de pages WordPress par glisser-déposer et notre guide ultime sur la façon de modifier un site WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

13 commentairesLeave a Reply

  1. Marcos

    Thank you! The CSS is plug&play.

    • WPBeginner Support

      Glad to hear our guide was helpful!

      Admin

  2. Luqman Essam

    THank You! It helped me!

    • WPBeginner Support

      Glad our guide was helpful! :)

      Admin

  3. Victor

    Is there any plugin for WP that will display sequential art as in a comic strip where installments can be posted on a weekly basis?

  4. ash

    it not working very fine on some websites, depends to the themes that the website uses, it might even hide the scroll bar and make the website loading time more than normal, i suggest using a CSS code it’s easy to use and customizable as well … i give a sample ans you guys just modify it as your own ;)

    ===

    ::-webkit-scrollbar {
    width: 14px;
    background-color: silver;
    }

    ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: silver;
    }

    ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    background-color: #0099cc;
    }

    • Vas

      Excellent…The cleanest solution.
      It would be nice to post the code for Firefox…if there is such option.

      Thanks for sharing.

  5. Karen

    What a fun plugin. I just installed it. Is there any way to control the opacity – of the color of the scrollbar when you aren’t hovered over it? Thanks for this post!

  6. Vernon Trent

    please correct your link to the plugin.
    there is a missing S in the url « pluginS »

  7. Guest

    Hi the link in the post seems broken may affect your site rank.
    Please place correct link for « Dewdrop Custom Scrollbar » plugin.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.