The Divi Slider module is an effective tool for showcasing your content, but its default behavior of hiding the navigation arrows, until hovered over, can be frustrating for users. This can delay the user experience and make it difficult and confusing for visitors to navigate through your slides.
Luckily, with a simple CSS snippet, you can ensure those arrows (next and previous) are always visible, providing a better user experience and enhancing the overall functionality of your slider. This tutorial will walk you through the steps to achieve this.
How to Make the Divi Slider Arrows Always Visible
1. Create the Slide Content
Well, first we need to create the slide content for your page. Go to the Divi Visual Builder, then navigate to the page where you want to include the slide content.
Divi has three built-in modules to create the slide content; Slider, Post Slider, and the Video Slider module. This tutorial works to make the arrows always visible in those modules. So, please choose one of the three modules, then edit and tweak it according to your preference.
2. Add the CSS Snippet
Next, we will add the CSS snippet to your site. You can add the CSS snippet to your module (Module Settings -> Advanced tab-> Custom CSS -> Main Element), to your current page (Page Settings -> Advanced tab -> Custom CSS), or to your Divi Theme Option.
We will put the code in the Divi Theme Options for this example.
On your WordPress dashboard, navigate to Divi -> Theme Options-> Custom CSS. Afterward, copy the simple CSS snippet below and paste it into the Custom CSS input field.
.et-pb-slider-arrows a.et-pb-arrow-prev,
.et-pb-slider-arrows a.et-pb-arrow-next {
opacity: 1;
}
.et-pb-slider-arrows a.et-pb-arrow-prev {
left: 24px;
}
.et-pb-slider-arrows a.et-pb-arrow-next {
right: 24px;
}
Once you’ve added the CSS snippet, apply the changes by clicking the Save Changes button.
To see the result, you can return to your slide’s content page and refresh the page.
What did the code do?
- Targeting the Slider Arrows
.et-pb-slider-arrows a.et-pb-arrow-prev: This selector targets the anchor link element (a) that holds the “previous” arrow within the .et-pb-slider-arrows container class..et-pb-slider-arrows a.et-pb-arrow-next: Similarly, this targets the anchor link element with the “next” arrow.
- Making the arrows permanently displayed (first line)
opacity: 1;: This property sets the opacity of the targeted elements (both previous and next arrows) to 1. By default, these arrows might have an opacity of 0, making them invisible. Setting it to 1, it ensures full opacity, making them fully visible.
- Positioning the arrows (second and third lines)
These sections target the previous and next arrows individually:.et-pb-slider-arrows a.et-pb-arrow-prev { left: 24px; }: This sets the “left” property of the previous arrow to 24 pixels.
.et-pb-slider-arrows a.et-pb-arrow-next { right: 24px; }: Similarly, this sets the “right” property of the next arrow to 24 pixels.
The Bottom Line
This article shows how easily you can make your Divi slider arrows always visible, even when not hovering over the content of the slides, by adding simple CSS code to your site.
With the arrows permanently displayed, your website visitors can seamlessly navigate through your slider content, increasing engagement and potentially boosting conversions. Feel free to experiment with different arrow styles; such as colors, sizes, and positions, to match your website’s overall design.
