Published April 12, 2024 • Divi / WordPress

The Problem

By default, Divi only shows slider arrows when you hover over the slider. This is terrible for usability. People don't know the slider exists unless they accidentally mouse over it.

Here's how to keep the arrows visible all the time.

Make Slider Arrows Always Visible

Add this CSS to your child theme or go to Appearance → Customize → Additional CSS in WordPress:

/*------------------------------------------------------*/
/*---------[Always Show Arrows On Slider]---------------*/
/*------------------------------------------------------*/

@media all and (min-width: 768px) {
    .et-pb-arrow-next {
        opacity: 1;
        right: 22px;
    }
    .et-pb-arrow-prev {
        opacity: 1;
        left: 22px;
    }
}

@media all and (max-width: 767px) {
    .et-pb-arrow-next {
        opacity: 1;
        right: 0;
    }
    .et-pb-arrow-prev {
        opacity: 1;
        left: 0;
    }
}

This forces the arrows to stay at full opacity instead of hidden. The mobile version pushes them to the edges so they don't cover content on small screens.

Use Custom Arrow Graphics

If you want to replace Divi's default arrows with custom images, you can do that too.

Option 1: Target a Specific Slider

First, add a custom CSS class to your slider. In the Divi builder, edit the slider module, go to Advanced → CSS ID & Classes, and add a class like "customProductSlider".

Then use this CSS:

/*------------------------------------------------------*/
/*--------------[Change The Arrow Look]-----------------*/
/*------------------------------------------------------*/
.customProductSlider .et-pb-arrow-prev:before {
    content: url(https://www.yoursite.com/path-to/prev-arrow.png) !important;
}

.customProductSlider .et-pb-arrow-next:before {
    content: url(https://www.yoursite.com/path-to/next-arrow.png) !important;
}

Replace the URLs with the actual paths to your custom arrow images.

Option 2: Change All Slider Arrows Site-Wide

If you want to change every slider on your site, skip the custom class and use this instead:

/*------------------------------------------------------*/
/*--------------[Change The Arrow Look]-----------------*/
/*------------------------------------------------------*/
.et-pb-arrow-prev:before {
    content: url(https://www.yoursite.com/path-to/prev-arrow.png) !important;
}

.et-pb-arrow-next:before {
    content: url(https://www.yoursite.com/path-to/next-arrow.png) !important;
}

Clear Your Cache

After adding this CSS, make sure to clear your cache if you're using a caching plugin. Otherwise you'll be refreshing the page wondering why nothing changed.

If you're using Cloudflare, put it in development mode for a few minutes to see changes immediately.

Why This Matters

Hidden navigation is bad design. Users shouldn't have to guess that content exists.

Always-visible arrows make it immediately obvious that the slider is interactive. This is especially important on touch devices where "hover" doesn't exist.