Comment personnaliser facilement la scrollbar de votre site avec un générateur de CSS ?

‍Introduction

Dans le domaine du web design, chaque détail a son importance. Ces subtiles nuances peuvent radicalement transformer le design ET son impact, sur votre site. Un de ces détails est la barre de progression, aussi appelée scrollbar.

Dans cet article, nous allons vous montrer comment personnaliser facilement la scrollbar de votre site Webflow en utilisant du code CSS personnalisé. Bien que cela puisse paraître technique, rassurez-vous, nous avons simplifié la tâche en utilisant une extension Chrome.

Celle-ci vous permet "d'écrire" le code CSS de manière visuelle, à partir d'une interface conviviale.

Pourquoi personnaliser votre barre de défilement ?

Il y a en a sûrement d'autres, mais voici quelques raisons qui peuvent vous motiver à personnaliser le design de votre barre de défilement.

→ Personnaliser la scrollbar de votre site peut :

• Améliorer l'expérience utilisateur : Une scrollbar personnalisée peut rendre votre site plus cohérent et attrayant, offrant une expérience utilisateur plus fluide et agréable.
• Renforcer votre image de marque : Aligner l'apparence de votre scrollbar avec le reste de votre design peut aider à renforcer votre image de marque. C'est une autre façon de montrer votre identité de marque unique.
• Vous démarquez de la concurrence : Dans un marché en ligne de plus en plus saturé, chaque détail compte. Une scrollbar personnalisée peut être ce petit plus qui fait ressortir votre site.

Bref, la personnalisation de la scrollbar est un processus simple mais efficace qui peut améliorer l'expérience des visiteurs de votre site internet et renforcer votre image de marque.

Alors, pourquoi ne pas essayer ?

Comment personnaliser votre scrollbar ? (couleur, track, etc...)

→ En utilisant du CSS personnalisé

Vous vous demandez peut-être : qu'est-ce que le CSS ?

Le CSS, qui signifie Cascading Style Sheets (ou Feuilles de Style en Cascade en français), est un langage utilisé pour donner du style à votre site web. Il détermine l'apparence de différents éléments sur votre page, comme la couleur du texte, la taille des images, et oui, en l'occurence, l'apparence de la scrollbar. (En apprendre plus sur le CSS et le HTML avec cette vidéo)

En utilisant du CSS personnalisé, vous pouvez donner à votre scrollbar une touche unique qui correspond au design de votre site.

Vous vous sentez un peu dépassé à l'idée d'écrire du code CSS ? Pas de panique ! Grâce à l'extension Chrome de Finsweet, vous pouvez générer du CSS personnalisé visuellement, ce qui signifie que vous pouvez voir les changements (color, scrollbar-thumb, background color, width, etc) en temps réel pendant que vous les faites. C'est un moyen facile et intuitif de personnaliser le CSS de votre barre de défilement pour votre site Webflow.

Voici comment l'utiliser 👇

🎁 Générer facilement votre custom CSS avec le générateur de Finsweet !

Pour rendre le processus encore plus facile, nous allons utiliser l'extension Chrome de Finsweet. Cette extension permet d'écrire le code CSS personnalisé visuellement depuis une interface, ce qui rend le processus beaucoup plus accessible pour ceux qui ne sont pas familiers avec le codage. Vous pouvez l'installer depuis le Chrome Web Store.

1. Installer l'extension Chrome de Finsweet : depuis ce lien, installer l'extension sur votre navigateur

2. Personnaliser la scrollbar : Une fois l'extension installée, ouvrez la en cliquant dessus et utilisez l'extension pour personnaliser visuellement la scrollbar de votre site. Vous pouvez modifier la couleur, la taille, et d'autres aspects de la scrollbar. (Bonus : vous pouvez même scroller pour tester le comportement au scroll de votre barre de défilement personnalisée).

3. Copier le CSS : Une fois que vous avez personnalisé la scrollbar à votre goût, l'étape suivante consiste à copier le code CSS généré par l'extension. Vous pouvez le faire en cliquant sur le bouton "Copier le CSS" dans l'extension.

4. Insérer le CSS dans votre site : Ensuite, vous devez insérer le code CSS dans votre site Webflow. Si vous utilisez la méthode Client-First, vous pouvez le mettre dans l'embed code global-style. Sinon, vous pouvez le mettre dans le head tag de votre site. Pour ce faire, allez dans les paramètres de votre site, puis dans l'onglet "Custom Code" et collez le code CSS dans la section "Head Code".

5. Publier votre site : Enfin, n'oubliez pas de publier votre site pour que les modifications soient visibles. Vous pouvez le faire en cliquant sur le bouton "Publish" dans le coin supérieur droit de l'interface Webflow.

Et voilà ! Vous avez maintenant une scrollbar personnalisée sur votre site Webflow. N'hésitez pas à expérimenter avec différentes couleurs et styles pour trouver ce qui convient le mieux à votre site !

Conclusion

La personnalisation de la scrollbar peut sembler être un détail mineur, mais comme nous l'avons vu, elle peut avoir un impact significatif sur l'expérience utilisateur et l'image de marque de votre site. Avec l'extension Chrome de Finsweet et un peu de CSS personnalisé, vous pouvez facilement donner à votre site Webflow une touche unique qui se démarque. Alors, n'hésitez pas à expérimenter et à voir comment une scrollbar personnalisée peut améliorer votre site.

Bonne personnalisation !