Fonctionnel

Personnaliser le design des sliders dots dans Webflow

outils :
Illustration croce

Sommaire

1. Ajoutez un élément embed et ajouter ce code

Tips : Ajouter votre code dans un élément embed plutôt que l'ajouter dans les paramètres de votre page vous permet de voir le résultat directement dans Webflow sans avoir à publier votre site. Super pratique pour itérer sur votre design CSS sans perdre de temps. Visible uniquement pour le code HTML/CSS.

Custom code embed Slider dot Webflow
 <style>
.w-slider-dot {
background: #E0E1DD;
width:12px;
height:12px;
border-radius:24px;
}
.w-slider-dot.w-active {
background: #009BA6;
width:24px;
}
</style>

2. Ajoutez le style que vous voulez

Design par défaut

Couleur : Renseignez votre couleur souhaitée à la place du code hexadécimal #E0E1DD

Design : Renseignez la largeur, la hauteur et le radius souhaitées en modifiant la width, la height et le border-radius.

CSS Slider dot Webflow

Design actif

Même chose que pour la partie par défaut mais dans l'état actif sélectionné en ajoutant "w-active" à la class ".w-slider-dot".

CSS Slider dot actif Webflow

3. Publiez et c'est gagné

Bonus Tips

Pour optimiser le design de vos sliders dot sur la version mobile, vous pouvez utiliser une requête média (media query) pour cibler les écrans de taille mobile. 

Le code ci-dessous à ajouter dans votre balise <style>

 <style>
/* Media query pour les écrans de taille mobile */
@media (max-width: 768px) {
    .w-slider-dot {
        width: 44px;
    }
    
    .w-slider-dot.w-active {
        /* Ajoutez ici les modifications spécifiques pour la version active mobile */
        /* Par exemple, si vous souhaitez changer la couleur d'arrière-plan : */
        background: #FDBC71; 
    }
}
</style>
Ces tutoriels pourraient vous intéresser

Nos tutoriels de la même catégorie

Ajouter un sommaire dans Webflow

Webflow
Finsweet
Fonctionnel

Automatiser l’envoi d’un mail aux prospects qui remplissent un formulaire

Webflow
Zapier
Fonctionnel

Ajouter un datepicker dans Webflow

Webflow
Embed
Fonctionnel
Voir tous nos tutoriels
Illustration traits
Nous utilisons les meilleurs outils

Votre site est développé avec les meilleurs outils et les meilleurs pratiques

Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal. 

Figma

Pour designer votre site web sur mesure et optimiser son taux de conversion

Webflow

Pour une intégration pixel perfect et optimisée de votre site web

Client-first

Pour une organisation aux petits oignons de votre projet

Wized

Pour ajouter des fonctionnalités avancées à votre projet

Make

Pour automatiser vos fluxs de travail et vous faire gagner un max de temps