Ensuring that navigation arrows in your slider module are always visible can enhance user interaction by making navigation intuitive and straightforward.
Having the arrows visible all the time helps users easily navigate through slides without the need to hover over the slider.
This article will guide you through the steps to make the navigation arrows in Divi’s Slider Module always visible, ensuring a user-friendly and engaging browsing experience.
The navigation arrows that the Slider or the Fullwidth Slider modules will only show if we hover over the module.
How to make the Slider/Fullwidth Slider's navigation arrows always visible
Open the Slider/Fullwidth Slider module settings
Go to Advanced Tab → Custom CSS → Free-Form CSS
Paste in this code:
selector .et-pb-slider-arrows a.et-pb-arrow-prev,
selector .et-pb-slider-arrows a.et-pb-arrow-next {
opacity: 1;
}
selector .et-pb-slider-arrows a.et-pb-arrow-prev {
left: 22px;
}
selector .et-pb-slider-arrows a.et-pb-arrow-next {
right: 22px;
}
Note: We are using the selector as the parent CSS selector. This is a special function of Divi, which will replace that keyword selector with the actual CSS selector of the slider.
The result can be seen in the screenshot below:
