Customize the design of dot sliders in Webflow

Tools:

1. Add an embed element and add this code

Tips: Adding your code to an embed element rather than adding it to your page settings allows you to see the result directly in Webflow without having to publish your site. Super handy for iterating on your CSS design without wasting time. Only visible for HTML/CSS code.

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. Add the style you want

Default design

colour : Enter your desired color instead of the hexadecimal code #E0E1DD

Design: Enter the desired width, height, and radius by changing the width, height, and border-radius.

CSS Slider dot Webflow

Active design

Same as for the default game but in the active state selected by adding “w-active” To the class “.w-slider-dot”.

CSS Slider dot actif Webflow

3. Publish and you're done

Bonus Tips

To optimize the design of your dot sliders on the mobile version, you can use a media query to target mobile-sized screens.

The code below to add in your tag <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>
Author photo
Sandro D.
Updated on
8/10/2024
Growth Marketer, Webflow expert and a jack of all trades. I take care of commercial operations, ensure the smooth running of projects and take care of issues related to marketing (SEO, Tracking, Copywriting, etc.)
Are you stuck with your current site?
Let's talk ?
Welcome
>
Gemeos Academy
>
Customize the design of dot sliders in Webflow
These tutorials might interest you

Our tutorials in the same category

See all our tutorials
Illustration traits
We use the best tools

Your site is developed using the best tools and best practices

Gemeos doesn't just offer you a website, but expertise in the best tools to guarantee you the best possible return on your investment.

Figma

To design your custom website and optimize its conversion rate

Webflow

For pixel-perfect, optimized integration of your website

Client-first

Organizing your project to perfection

Wized

To add advanced features to your project

Make

Automate your workflows and save maximum time