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

Avez-vous remarqué que certains sites web ont ces barres de défilement personnalisées et élégantes qui correspondent parfaitement aux couleurs de leur marque ? 🤩

Nous avons également remarqué cette fonctionnalité. Et bon nombre 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 web, nous vous montrerons exactement comment le faire. Aucune expérience en codage requise !

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

Vous souhaitez donc personnaliser votre barre de défilement WordPress. Mais avant de vous lancer, il y a quelques points importants que vous devriez savoir pour vous assurer de prendre la bonne décision pour votre site Web WordPress.

Considérations clés pour les barres de défilement personnalisées :

• Compatibilité du navigateur : Alors que les navigateurs modernes comme Chrome, Safari et Edge (navigateurs basés sur WebKit pour le CSS) prennent bien en charge les barres de défilement personnalisées, d'autres peuvent offrir une personnalisation limitée, voire aucune. Testez toujours vos modifications sur différents navigateurs pour garantir une expérience cohérente.
• Limitations des appareils mobiles : Sur les appareils mobiles, les barres de défilement traditionnelles sont souvent remplacées par des gestes tactiles intuitifs (balayage). Cela signifie que les barres de défilement personnalisées ne s'afficheront généralement pas sur les smartphones ou les tablettes.
• Expérience utilisateur et accessibilité : Votre barre de défilement doit améliorer votre contenu, pas le distraire. Des conceptions trop tape-à-l'œil ou difficiles à voir peuvent avoir un impact négatif sur la navigation de l'utilisateur. Visez des ajustements subtils qui correspondent aux couleurs de votre marque et améliorent le flux général de votre site.
• Impact sur les performances : Bien que généralement minime, l'ajout de plugins ou de CSS étendus peut légèrement affecter la vitesse de chargement du site Web. Choisissez des solutions optimisées et gardez votre code propre pour maintenir de bonnes performances.
• Tests cruciaux : Quelle que soit la méthode choisie, testez minutieusement votre barre de défilement personnalisée sur différents navigateurs, appareils et tailles d'écran pour vous assurer de son bon fonctionnement.

Lorsqu'il est bien fait, cet élément de conception WordPress peut donner à votre site cette touche professionnelle supplémentaire tout en maintenant une excellente convivialité.

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

Option 1 : Utiliser le plugin Advanced Scrollbar (Gratuit + Facile)

La manière la plus simple de personnaliser la barre de défilement dans WordPress est d'utiliser Advanced Scrollbar. Ce plugin gratuit 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 le plugin Advanced Scrollbar. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, rendez-vous dans Paramètres » Paramètres Advanced Scrollbar.

Ici, vous pouvez modifier la conception de la barre de défilement, comme le schéma de couleurs et la couleur d'arrière-plan du rail.

Dans l'image suivante, nous avons créé une barre de défilement bleue.

Vous pouvez également modifier le pas de défilement de la souris en saisissant un nouveau nombre dans le champ « Pas de défilement de la souris ».

Un nombre plus bas ralentira le défilement de votre site, et un nombre plus élevé l'accélérera.

Vous pouvez également sélectionner si vous souhaitez masquer automatiquement la barre de défilement afin qu'elle n'apparaisse que lorsque le visiteur fait 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.

Par défaut, la barre de défilement apparaît sur le côté droit de la fenêtre du navigateur. Cependant, vous pouvez la déplacer sur le côté gauche en utilisant les paramètres « Alignement du rail » si vous préférez.

Lorsque vous êtes satisfait de la configuration de la barre de défilement, n'oubliez pas de cliquer sur « Enregistrer les modifications » pour sauvegarder vos paramètres.

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

Option 2 : Créer une barre de défilement CSS (Avancé)

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

La création d'une barre de défilement personnalisée avec CSS à l'aide des pseudo-éléments ::-webkit-scrollbar (comme dans l'exemple ci-dessous) vous permet de personnaliser de nombreuses parties de l'élément.

Cependant, ces règles CSS spécifiques fonctionnent principalement sur les navigateurs de bureau basés sur WebKit comme Chrome, Safari et le nouveau Microsoft Edge.

Cela signifie que votre barre de défilement personnalisée pourrait ne pas s'afficher ou apparaître différemment sur d'autres navigateurs (comme Firefox) ou sur la plupart des appareils mobiles.

Pour personnaliser votre barre de défilement à l'aide de CSS, accédez à Apparence » Personnaliser.

Dans le personnaliseur WordPress, cliquez sur « CSS additionnel ».

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

Voici un exemple de code qui modifie l'apparence de la barre de défilement :

::-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 n'importe quel code que vous souhaitez. Pour plus d'informations sur le CSS, veuillez consulter notre guide complet sur comment ajouter du CSS personnalisé à votre thème WordPress.

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

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

En plus de créer une barre de défilement personnalisée, vous voudrez peut-être également ajouter un effet de défilement vers le haut sur votre site WordPress. Cela peut être très utile si vous avez de longs articles de blog et que vous souhaitez offrir aux utilisateurs un moyen rapide de revenir en haut.

Pour ajouter cette fonctionnalité, vous devez installer et activer le plugin WPFront Scroll Top. Pour des instructions détaillées, consultez notre tutoriel sur comment installer un plugin WordPress.

Après l'activation, visitez la page Paramètres » Retour en haut depuis le tableau de bord WordPress et cochez la case « Activé » pour activer l'effet de retour en haut.

Après cela, vous pouvez modifier le décalage de défilement, la taille du bouton, l'opacité, la durée du fondu, la durée du défilement, et plus encore à partir d'ici.

Une fois que vous avez terminé, n'oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour sauvegarder vos paramètres.

Vous avez maintenant ajouté avec succès un effet de défilement vers le haut à votre site Web. Pour des instructions plus détaillées, consultez notre tutoriel sur comment ajouter un effet de défilement fluide vers le haut dans WordPress.

Foire aux questions sur l'ajout d'une barre de défilement personnalisée dans WordPress

Voici quelques questions que nos lecteurs nous ont fréquemment posées concernant l'ajout d'une barre de défilement personnalisée dans WordPress :

Comment ajouter une barre de défilement dans WordPress ?

Vous pouvez ajouter une barre de défilement en utilisant du CSS personnalisé ou un plugin comme Advanced Scrollbar qui permet de faire défiler des zones de contenu à l'intérieur des articles, des pages ou des widgets dans WordPress.

Comment insérer un slider dans WordPress ?

Vous pouvez insérer un curseur en utilisant un plugin de curseur comme Soliloquy, en créant votre curseur, puis en l'ajoutant à une page à l'aide d'un bloc. Pour plus d'informations, consultez notre tutoriel sur la création d'un curseur réactif dans WordPress.

Quel est le meilleur plugin de slider pour WordPress ?

Soliloquy est le meilleur plugin de curseur WordPress car il est simple pour les débutants, flexible et fonctionne bien avec la plupart des thèmes et des constructeurs de pages.

Comment créer une bannière personnalisée ?

Vous pouvez utiliser OptinMonster pour créer une bannière personnalisée avec ses modèles prédéfinis. Le plugin vous permet également de personnaliser entièrement le contenu, d'ajouter un CTA et d'utiliser différentes couleurs selon vos goûts. Pour des instructions détaillées, veuillez consulter notre tutoriel sur comment créer une bannière dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment ajouter une barre de défilement personnalisée dans WordPress. Vous voudrez peut-être aussi consulter notre sélection d'experts des meilleurs constructeurs de pages WordPress par glisser-déposer et notre guide ultime sur comment modifier un site WordPress.

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.