Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

Comment personnaliser le design des sliders dots dans Webflow ?

Florian Bodelot
Florian Bodelot
December 17, 2022
Slider webflow en arrière plan avec une flèche montrant des points personnaliser

Nativement, la personnalisation des "Slider Dot" dans webflow est très limitée. Heureusement, il existe deux méthodes simples pour les rendre complètement personnalisables !

Découvrez comment personnaliser le design des sliders dots (points de navigations) de vos sites webflow dans ce tutoriel 👇

Méthode 1 : intégrer du code CSS

Pour ce tutoriel, nous allons personnaliser la couleur et la taille des points de navigation de notre slider. Mais vous pouvez personnaliser à 100% votre slider en ajoutant des propriétés CSS.

1.1 Ajoutez un élément embed code dans votre slider

Intégration d'un embed code sur Webflow
Ajout d'un élément Embed

1.2 Collez le code CSS ci-dessous

<style> .w-slider-dot { background-color: #C7D2D6; width: 12px; height: 12px; } .w-slider-dot.w-active { background-color: #67777E; width: 12px; height: 12px; } </style>

1.3 Définissez vos styles

Code CSS custom sur Webflow
Exemple de code CSS pour slider dots

Le tutoriel en vidéo 🍿

Méthode 2 : utiliser les attributs de Finsweet

Finsweet propose une solution no-code, avec les attributs pour aller encore plus loin et en "no-code" !

Avec les attributs (Fs Slider Dots) de Finsweet vous pouvez définir n'importe quel élément : une image ou bien un div block par exemple, et le faire remplacer les dots natifs de votre slider Webflow. Une solution flexible, et 100% no-code pour aller encore plus loin dans la personnalisation de votre site web

Découvrir comment en suivant ce court tutoriel vidéo (Version EN uniquement, pour l'instant)

Découvrir comment en accédant à la documentation 

Vous méritez un site Webflow qui fait l'effet " Wahouu " !

Prenez contact avec nous aujourd'hui. L'équipe fantastique de Digidop est prête pour vous aider à construire un site web qui répond à vos besoins 🚀

Site digidop.fr sur un écran d'ordinateur avec un badge de recommandations et des réactions