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;
}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; /* set the width of controllers depending on the number of slides */
border-radius: 0px !important;
margin-right: 0px !important;
}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;
}/**
* Line-style Slide Controllers.
* @source https://divicio.us
*/
.et-pb-controllers {
height: 7px;
bottom: 0px !important;
}
.et-pb-controllers a {
width: 20% !important;
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 */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! ;)
This is great! Thanks!
Hi, Thanks for your kind tutorial. It is really helpful.
But I have an issue on background color (hover)..
I only applied the code above but it shows different color in one part.
When I move mouse cursor on the controllers, they are all white that time,
but when I click the third slides (among 8 slides), orange color (which I used on my webpage) shows not only on the slide controllers but the arrows. What should I do in this case?
I’m not sure whether I deliver my message exactly… but please help me. Thanks you in advance!
Hi Jenna. It might be the cache, try clearing it, or something else, a link would be helpful for me to understand your issue, please provide the URL if you can.