The Divi Theme includes a versatile gallery module for showcasing your images in both grid and slider formats. In slider mode, the gallery module displays navigation arrows (previous and next) when the gallery is hovered, enhancing user navigation. However, they are grey by default, with no built-in option to change them. If you want to style these arrows to better match your site's design or make them more visible, here’s how to do it.
First, here's a before / example showing the default gallery module slider arrow styles (left) and restyled slider arrows (right):
Before
After
Styling Divi Gallery Slider Arrows with Divi Gallery Booster
Divi Gallery Booster provides intuitive settings to style your gallery slider arrows. You can customize the arrow color, size, and shadow through easy-to-navigate settings.
First, ensure you're in slider layout mode:
Gallery Settings > Design > Layout > Layout = Slider
With this setting enabled, Divi Gallery Booster will show additional options under:
Gallery Settings > Design > Slider Arrow Text
Here, you can customize:
- Arrow Color
- Arrow Size
- Arrow Shadow
You can access and modify these settings as shown in the screenshot above. In my test example, I've changed the arrow to yellow for better contrast with the dark blue sky background, increased the size to 60px, and added a shadow to make it stand out more against the light sky patch on the left.
These options are available in both Divi Gallery Booster and Divi Booster.
Styling Divi Gallery Slider Arrows with CSS
If you prefer or need to style the arrows with CSS, here are the equivalent CSS snippets for each of the three customization options available in Divi Gallery Booster.
Set the Arrow Color
.et_pb_gallery .et-pb-arrow-prev,
.et_pb_gallery .et-pb-arrow-next {
color: yellow !important;
}Set the Arrow Size
.et_pb_gallery .et-pb-arrow-prev,
.et_pb_gallery .et-pb-arrow-next {
font-size: 60px !important;
}Set the Arrow Shadow
.et_pb_gallery .et-pb-arrow-prev:before,
.et_pb_gallery .et-pb-arrow-next:before {
text-shadow: 0em 0.08em 0em rgba(0, 0, 0, 0.4);
}Related Post: Adding CSS to the Divi Theme
Conclusion
Customizing the appearance of your Divi gallery slider arrows can greatly enhance the visual appeal and usability of your site. Whether you use Divi Gallery Booster’s settings or CSS, these changes can make your galleries stand out and provide a better user experience.
0 Comments