Comment personnaliser le design des sliders dots dans Webflow ?

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. Ajoutez un élément embed code dans votre slider

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>

3. Définissez vos propres styles

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