Comment personnaliser le design des sliders dots dans Webflow ?

Tutoriel
17/12/2022
3 min
Slider webflow en arrière plan avec une flèche montrant des points personnaliser
Key points

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

2025 SEO Stats
Documentation
SEO

Tendances SEO 2025 : 20 statistiques pour améliorer son référencement

Tendances SEO 2025 : 20 statistiques pour améliorer son référencement
Un diamant 3D brillant avec “Site of the Day” écrit en arrière-plan et quatre trophées affichés à l’avant.
Storytelling
Digidop

Awards & Distinctions : Digidop.com récompensé par des organismes prestigieux.

Awards & Distinctions : Digidop.com récompensé par des organismes prestigieux.
Deepseek vs ChatGPT
News
IA

DeepSeek vs ChatGPT : La comparaison complète 2025 qui bouleverse l'industrie de l'IA

DeepSeek vs ChatGPT : La comparaison complète 2025 qui bouleverse l'industrie de l'IA

Transformez votre site web en un moteur de croissance.

Nous contacter