Comment personnaliser le design des sliders dots dans Webflow ?

Tutoriel

December 17, 2022

3 min

H2 Example

Points clés de l'article

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

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

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

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

Formation Webflow Gratuite

Commencer la formation

Florian Bodelot

Co-fondateur

Articles qui devraient vous intéresser

IA agentique vs IA générative : Comprendre les différences fondamentales et leurs applications

Client-First vs Lumos : Quel framework Webflow choisir en 2025 ?

ChatGPT 4o vs Midjourney : quel est le meilleur outil pour générer des images IA ?

Voir tous les articles

Transformez votre site web en un moteur de croissance.

Nous contacter