Comment personnaliser le design des sliders dots dans Webflow ?

Tutoriel
December 17, 2022
3 min
Slider webflow en arrière plan avec une flèche montrant des points personnaliser
Résumez cet article avec une IA
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 

{{custom-blog-cta}}

Formation Webflow Gratuite
Commencer la formation
Florian Bodelot
Florian Bodelot
Co-fondateur

Articles qui devraient vous intéresser

Conférence AI Tech Summit 2025 avec un conférencier sur scène devant un large public, entouré de grands écrans diffusant « AI » et « Tech Summit 2025 ». (Génération par IA)
Evénements

Calendrier 2025 des événements Web, Design, IA à ne pas manquer pour la rentrée

Calendrier 2025 des événements Web, Design, IA à ne pas manquer pour la rentrée
Capture d'écran de la page d'accueil de la recherche Google avec la barre de recherche et le logo Google.
Documentation
SEO

3 outils pour suivre vos positions SEO dans la SERP

3 outils pour suivre vos positions SEO dans la SERP
ChatGPT 5.0 OpenAI
News
IA

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1 : Le comparatif IA ultime 2025

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1 : Le comparatif IA ultime 2025

Transformez votre site web en un moteur de croissance.

Nous contacter