Published April 12, 2024 • Divi / WordPress

Older Divi Slider Arrows: Show Them and Check the Controls

Can people see how to move through an older Divi slider? These earlier CSS rules show matching arrows before a mouse hovers.

These examples use older Divi selectors. They don't prove that every new module or Divi 5 layout works the same way.

Check the existing controls first

Check that your module has its arrows turned on. CSS can't show a control the module hasn't made.

Elegant Themes explains how to show and place arrows in its Slider and Fullwidth Slider modules. Check where those rules belong.

Try the adjustment on a copy before applying it to an important page. Save the old rules so the change can be reversed.

The archived arrow visibility CSS

This version puts matching desktop arrows 22 pixels from the sides. At phone widths, its rules move them to the edges.

/*------------------------------------------------------*/
/*---------[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;
    }
}

Check whether that placement crowds your text or makes the control hard to reach. Edge positioning alone doesn't establish a usable phone layout.

Where your theme supports it, Appearance > Customize > Additional CSS accepts theme overrides. A different editor may expose another CSS location.

Change the images for one matching slider

The narrow rule uses the class customProductSlider. Give your chosen module that class before trying this CSS.

The image addresses are placeholders. Use your own files. Check their size and whether they stand out against each slide.

/*------------------------------------------------------*/
/*--------------[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;
}

The wider image rule has a wider effect

This version has no custom class, so it can change other matching sliders. Prefer the narrow rule for a single module.

/*------------------------------------------------------*/
/*--------------[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;
}

An arrow image doesn't prove the control has a useful name or works with a keyboard. Check both after the change.

Check the saved page, then the cache

Leave the builder and inspect the saved page as a visitor. Check phone spacing and button contrast, then mouse and keyboard use.

If the old look remains, find which cache serves it before adding CSS. Change one thing at a time.

A site change is a larger decision. My platform guide discusses the editor and upkeep choices.