Working with Divi sliders

I've seen several times in the Facebook groups where there is a request to have a Slider Module with rotating backgrounds while keeping the text the same and not moving or animating. Well, it turns out there is a fast and easy way to make it seem like the text stays the same with no animation while your images are sliding!

The little CSS trick we will talk about below will work on both regular and fullwidth Slider modules. The technique is to simply remove the animation of the .et_pb_slide_description CSS class. This is the container that holds the Title, the Button and the Body Text of each slide. That CSS class has the following Divi styling:

.et-pb-active-slide .et_pb_slide_description {
animation-duration: .7s;
animation-delay: .9s;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-name: faceBottom; /* <-- This is the crucial part! */
}

We'll wind up with animation-name: none;

Where can we put this Divi slider CSS?

We can easily put the styling in one of several places. The first is within the module itself, in the Advance tab as shown below. Note that you can hover over any CSS field to show a (?) button which when clicked will give you the class(es) that are affected by the CSS you put into that field.

What if you want maybe just *some* of the slide text to stay static? You can do that by going into the settings for each slide! You will put the CSS into each slide that you want to remain static, instead of putting the CSS into the styling for the whole slider. Notice below that we are working with an individual slide within the Slider module.

Where else can we put the Divi slider styling?

While the above options fit most into how Divi is supposed to be used, you can also put the following CSS into the custom CSS for the page, or within the Custom CSS area in Theme Options.

/** Note that slider_0 is the 1st slider on the page
 ** You will need to change this if you are targeting a different slider on the page. **/
.et_pb_fullwidth_slider_0 .et_pb_slide_description {
  animation-name: none;
}
/* OR - for a single slide */
.et_pb_slide_0 .et_pb_slide_description {
  animation-name: none;
}

You can change some of those other animation settings, also!

If you want to go beyond the basic Divi settings of just turning animation on or off, you can adjust some of the settings shown at the top of this article for some interesting effects. Changing the animation-duration and animation-delay settings should be self-explanatory.

One effect to look at is the animation-timing-function setting. This doesn't change the speed of the animation, but rather how that animation acts within the timeframe specified.

Here's a great article about that:

The CSS Animation Timing Function: How to Use It + 9 Examples

Learn how to control the acceleration of your animations with the animation timing function, and check out some examples of the different values you can use.