How to modify the default transition of the Divi slider + 2 extra tips

When we create a slider module in Divi, either in order to create an ad, show messages, etc., we can include images, text, background and even a button with a call to action to expand the information.

Divi has a default transition when the user clicks on the arrows, but today we will show you how to modify them so they have the movement you need.

To add the code of the transition we want, we must go to the custom CSS tab of the slider module settings. In the fields Description of the slide and Image of the slide, you can copy the code of the transition you want. Remember that you can add different codes to the image and the text of the slide.

All you have to do is copy the code of the transition you want from this list and add it to the fields we have just indicated.

Normal cast

animation-name: fadeIn;

Entering from above

animation-name: fadeTop;

Entering from the left

animation-name: fadeLeft;

Entering from below

animation-name: fadeBottom;

Fade entering from above

animation-name: fadeInTop;

Cast entering from the left

animation-name: fadeInLeft;

Fade entering from the right

animation-name: fadeInRight;

Cast entering from below

animation-name: fadeInBottom;

Flip horizontal (on the x axis)

animation-name: flipInX;

Vertical Flip (on the y-axis)

animation-name: flipIny;

Extra tip 1: How to create a slider with several images but the same text

First we created the slider module and added the first slide.

In the settings, we will place the text that will take and will be shared with all the slides.

We upload a background image in the Background line, not in image or video.

We adjust the slide and duplicate it. Then in each of the slides we change the background image we want.

We leave the settings of the slides and go to the custom CSS tab of Advanced in Module Settings.

In Description of slide we will place the following code, and thus the text will not have animation.

animation-name: none;

Extra tip 2: How to create a slider with an image but different text

We created the slider module filling the Title and Content fields, but we ignore the image upload for now.
We duplicate the slides as we need and change the texts of each one.

We leave the configuration of the slides and upload the desired image in Background, from the General Options of the background.

Ready to customize your website to the maximum?

Jefferson Maldonado
the authorJefferson Maldonado
UX WordPress Designer
Ux & Web Designer. Portafolio: Divi Blogger, WordPress Expert, UX Designer, Business Consultant.

Leave a Reply

× Hey there !