For some reason, there is no easy or simple way to edit or customize the slider arrows on the Slider Module in the Divi Theme. I had to resort to using CSS codes to make the changes, and if you’re looking to play around with the slider arrows, you’ve come to the right place! If you have no experience on CSS codes, don’t worry; I got your back! Look at the Before and After photos below, you might notice 4 things that I have changed, and that we will talk about today:

1) Changing the color of the arrows (the only way without having to use CSS codes)

2) Changing the size of the arrows

3) Moving the arrows inwards or outwards

4) Removing the hover effect so the arrows are seen right away

I will be showing you how to edit just the arrows for the desktop version of your site, and then how to edit the mobile version as well. You don’t want to have the same changes on both desktop and mobile, and I will tell you why.

I will also show you how to edit ALL slider modules in case you don’t want to just edit a specific one.

So, let’s get started!

Sample

Before

After

Video Tutorial:

Tutorial

Change Number 1: Changing the Color of the Arrows

This is the easiest to edit as we don’t need to do any coding. It might just be a little hard to find within the module settings.

Okay, so this is what we got to do. Head to the Slider Module settings > Slide settings (any one that you want to edit) > Design > Navigation

There you go! Now the color of the arrows has changed.

Make sure to Save Changes! Now, if you want to make more edits or customization, let’s move on.

Change Number 2-4:

Step 1: Add CSS Class to Slider Module

If you’re looking to target only one specific slider module, let’s add a CSS Class to that slider To do that, go to the Slider Module Settings (make sure to NOT click on one of the sliders) > Advanced > CSS ID & Classes > Add CSS Class For this example, let’s add the CSS Class “slider-1

After all that, make sure to Save your changes!

Step 2: Add CSS Code to Theme Customizer

I have a tutorial here, on where & how to add CSS Codes to your website, which is very important to learn. Don’t worry, it’s really simple and will take you a very short amount of time to understand! After knowing where to add the CSS code, here’s the code that we will add:

@media only screen and (min-width: 980px) {
.slider-1 .et-pb-arrow-next {
font-size: 100px !important;
opacity: 1 !important;
right: 100px !important;
}
}

@media only screen and (min-width: 980px) {
.slider-1 .et-pb-arrow-prev {
font-size: 100px !important;
opacity: 1 !important;
left: 100px !important;
}
}

(This code targets the DESKTOP version of the website only, we will get to the mobile devices below.)

Here’s a bit of a simple explanation on these codes:

The bolded text in orange is the media query. What it does is the codes below it will target the desktop version of your website.

The bolded text in pink is the CSS class to target the “right” or next arrow of the slider. The “.slider-1” is the CSS class we added earlier to the Slider Module. You can change this CSS class to whatever you want. (If you want to make the changes to ALL slider, don’t add the “.slider-1”. So, it will just start with .et-pb-arrow-next without the .slider-1 in the beginning. (Click here for more more information)

The bolded text in gold is the CSS class to target the “left” or previous arrow of the slider. The “.slider-1” is the CSS class we added earlier to the Slider Module. You can change this CSS class to whatever you want. (If you want to make the changes to ALL slider, don’t add the “.slider-1”. So, it will just start with .et-pb-arrow-prev without the .slider-1 in the beginning. (Click here for more more information)

The bolded text in black is what the size of the arrow going to be. You can adjust this to be bigger or smaller just by changing the number. Make sure to keep the “px” after the number.

The bolded text in blue is, in simple terms, will show the arrow right away. Make sure to keep the number to 1 to show the arrows.

The bolded text in maroon (left & right) is if you want to move the arrows inwards or outwards. You can play around with the number once again.

KEEP IN MIND: Make sure that you have the right & left codes TOGETHER with the opacity code if you want to show the arrows right away. If you only have the opacity code, the original hover effect of the slider will still be there, while showing 2 arrows. And if you only have the right & left codes without the opacity, this will just move the arrows inwards or outwards while still having the hover effect.

Don’t forget to click the Publish button!

Additional Tips & Tricks

1) Editing the Mobile Version of the Website

For this, we’re just changing a little part of the CSS code above. Also, we are only changing 2 things via coding compared to the desktop version:

1) Changing the sizes of the arrows

2) Moving the arrows inwards or outwards Only 2 because, on mobile, the Slider Module immediately shows the arrows; there is no need to “hover” for it to show. And again, the color change on the arrows (done above) will be implemented on the mobile version as well.

So, here’s the code:

@media only screen and (max-width: 980px) {
.slider-1 .et-pb-arrow-next {
font-size: 30px !important;
right: 20px !important;
}
}

@media only screen and (max-width: 980px) {
.slider-1 .et-pb-arrow-prev {
font-size: 30px !important;
left: 20px !important;
}
}

(For the simple explanations of this CSS Code, have a look above)

As you can see, instead of using (min-width: 980px), we are now using (max-width: 980px), which is the media query for targeting mobile devices. Also, I have put smaller numbers for the font-size and the left & right as, of course, with mobile devices, we don’t want to put big arrows and we wouldn’t want them to be too inwards or outwards.

Feel free to play around with the numbers, too!

There you go! That’s about it on how to edit or customize the slider arrows on the Slider Module in Divi!

If you have any questions, don’t hesitate to leave a comment, and I will be more than happy to help!

If you’ve watched the video tutorial, and it has helped, please do Like, Comment & Subscribe to the YouTube channel! Thank you!

2) Editing & Customizing ALL Slider Modules

I explained a little bit on this earlier, that what we have to do is to remove the CSS Class we added earlier to the code, which is the “slider-1“. So, after removing that, the code will be:

FOR DESKTOP:

@media only screen and (min-width: 980px) {
.et-pb-arrow-next {
font-size: 100px !important;
opacity: 1 !important;
right: 100px !important;
}
}

@media only screen and (min-width: 980px) {
.et-pb-arrow-prev {
font-size: 100px !important;
opacity: 1 !important;
left: 100px !important;
}
}

FOR MOBILE:

@media only screen and (max-width: 980px) {
.et-pb-arrow-next {
font-size: 100px !important;
opacity: 1 !important;
right: 100px !important;
}
}

@media only screen and (max-width: 980px) {
.et-pb-arrow-prev {
font-size: 100px !important;
opacity: 1 !important;
left: 100px !important;
}
}

There you go! That’s about it on how to edit or customize the slider arrows on the Slider Module in Divi!

If you have any questions, don’t hesitate to leave a comment, and I will be more than happy to help!

If you’ve watched the video tutorial, and it has helped, please do Like, Comment & Subscribe to the YouTube channel! Thank you!