/ / How to change Divi slider arrows to ‘Next’ and ‘Prev’
Divi Tips and Tricks

How to change Divi slider arrows to ‘Next’ and ‘Prev’

How to change Divi slider arrows to 'Next' and 'Prev'

Divi slider is a simple but powerful slider you can use on your website. Easy to handle. If you know a little bit of CSS you can do interesting things.

One of my Divi child themes, I wanted to change the default Divi slider arrows to something unique. So I decided to change them to text instead of arrows, to ‘Next’ and ‘Prev’. It is not possible to do it on the dashboard. So I had to find a custom solution for that. Let me show you how I achieve the result.

First of all lets have a look at what I did there.

Divi slider

Add the slider

First, you need to add a slider. 🙂 yes, add a section, then a row with the class name ‘ds-slider’, and then add your Divi slider module inside.

Divi slider

Bring Divi slider arrows to the visible area

By default, the slider arrows are placed outside the viewport. When we hover on the slider, arrows come to the visible area. That’s how it works. So, let’s bring the arrows to the visible area first. Add the below CSS snippet to the style sheet or inside a Divi code module where you can add custom CSS.

Info: To add custom codes to WordPress sites I always use Simple Custom CSS and JS plugin which you can download from the WordPress repository for free.

simple custom css and js
.ds-slider .et-pb-arrow-next {
  opacity: 1;
  right: 22px;
}

.ds-slider .et-pb-arrow-prev{
  opacity: 1;
  left: 22px;
}

.ds-slider .et-pb-arrow-next {
opacity: 1;
right: 0;  
}

.ds-slider .et-pb-arrow-prev{
  opacity: 1;
  left: 0;
}

Change arrows to text

As you can see now, the arrows are always visible inside the slider. Now we need to change those arrow to ‘Next’ and ‘Prev’ text.

Finally, again, add the following CSS snippet. It will do the trick and change the arrows to the text you want. Please change the code according to your needs. You can use whatever text for next and previous buttons.

.ds-slider .et-pb-arrow-prev:before {
	content:'PREV'!important;
	font-family: 'Quicksand',Helvetica,Arial,Lucida,sans-serif !important;
	font-size: 19px;
	letter-spacing: 2px;
	transform: rotate(-90deg) !important;
        display: inline-block;
}

.ds-slider .et-pb-arrow-next:before {
	content:'NEXT' !important;
	font-family: 'Quicksand',Helvetica,Arial,Lucida,sans-serif !important;
	font-size: 19px;
	letter-spacing: 2px;
	transform: rotate(-90deg) !important;
        display: inline-block;
}

It is that easy to  change arrows to TEXT. 🙂

Changing the Divi post slider arrows

Also, I tried this with the Divi post slider module and it works perfectly without any issues. See the below image.

There are many other ways you can give a facelift to the slider module. Learn how to do that below.

How to give a facelift to slider module

Similar Posts

3 Comments

  1. Hi! Sampath

    I was trying to implement on fullwidth slider, but dosen’t work. Could you please explain where I have to add the css 2 step and 3 step! Thank you so much!

    1. Hi Hector, Did you add the class to the row? I have added a class to target the specific slider. First try pasting those CSS in to a code module. If you no need target a specific slider you can remove the class name .shm-slider from the CSS snippet.

Leave a Reply

Your email address will not be published. Required fields are marked *