Select Page

How To Keep Text Static In Your Divi Sliders

by | Aug 7, 2022 | Recent, Tutorial | 0 comments

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! */
The CSS property animation-name can take as its setting a value of none, which effectively turns off animations despite the value(s) of any other animation settings.

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:





Submit a Comment

Group Activities

Viewing 1 - 5 of 5 items

Who’s Online

There are no users currently online

Latest Posts

Divi Community is supported by its audience. You might find affiliate links that help us pay for hosting and expenses, but do not cost you extra. You can also consider other support options if you’ve found this content helpful or interesting!

Terry Hale

Keymaster, Divi Community