Simple Line-style Slide Controllers for Divi Slider Module

by | May 1, 2017 | 0 comments

In this short tutorial we will apply custom styling to Divi Slider module slide controllers which will make them look like a continuous line instead of the default dot-shaped style, see the demo below.

Demo:

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

This can be done easily in a few steps described below.

Step 1:

Slide controllers are located inside the div having the et-pb-controllers CSS class which has by default a bottom offset of 20px. So, first we need to remove this offset. Then we’ll need to make it’s height equal to the controllers height(which is 7px by default) so that controllers “touch” the bottom of the slider. This can be achieved using the folowing CSS snippet:

.et-pb-controllers {
    height: 7px; /* this should be equal to controllers height */
    bottom: 0px !important;
}

Step 2:

By default Divi Slider module slide controllers are round shaped with equal width and height of 7px, the border-radius of 7px and have the margin-right of 10px. We need to change the width, border-radius and margin-right values to make controllers look like a continuous line sticked to the bottom of the slider. You can apply the width of controllers in px but if you want them to be fullwidth you’ll need to apply in % and find the required width value by dividing 100% by the number of slides. For this tutorial we make controllers fullwidth using the following CSS snippet:

 

.et-pb-controllers a {
    width: 20% !important; /* define the width of controllers depending on the quantity of slides */
    border-radius: 0px !important;
    margin-right: 0px !important;
}

 

Step 3:

We can also make the background-color of controllers change on hover by using this CSS snippet:

.et-pb-controllers a:hover {
    background-color: #ffffff !important;
    transition: all 0.2s ease-in-out;
}

Here is the whole CSS snippet for the line-style slide controllers:

/* Line-style Slide Controllers  */
.et-pb-controllers {
    height: 7px;
    bottom: 0px !important;
}
.et-pb-controllers a {
    width: 20% !important; /* define the width of controllers here */
    border-radius: 0px !important;
    margin-right: 0px !important;
}
.et-pb-controllers a:hover {
    background-color: #ffffff !important;
    transition: all 0.2s ease-in-out;
}
/* End Line-style Slide Controllers  */

Step 4:

Copy the line-style slide controllers CSS code snippet above and add it into the Divi -> Theme Options -> General -> Custom CSS field.

That’s all, hope you’ll find this effect useful. Feel free to share your thoughts and suggestions below and don’t forget to share this post with your friends! 😉

Pin It on Pinterest

Shares