Home / Divi Tips and Tricks / How to change Divi slider arrows to TEXT
Divi Tips and Tricks

How to change Divi slider arrows to TEXT

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

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 *