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.
