In my latest Divi child theme I wanted to change the default Divi slider arrows to text. 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.

First you need to add a slider. 🙂 yes, add a section, then a row with class name ‘shm-slider’ and then add your slider.

Next bring the arrows to the visible area. Add this code to the style sheet or Divi code area where you can add custom CSS.

.shm-slider .et-pb-arrow-next {
  opacity: 1;
  right: 22px;
}

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

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

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

Lastly, add the following code. It will change the arrows to the text you want. Please change the code according to your needs.

It is that easy to  change Divi slider arrows to TEXT

.shm-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;
}

.shm-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;
}

3 thoughts on “How to change Divi slider arrows to TEXT

    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 *

Pin It on Pinterest

Share This