The Divi slider is designed to display different text on every slide and animate it as it appears, but what if you want the images to change and the text to remain the same with no animation? Well, you can, with just one line of CSS. In this tutorial, I’m going to show you how.

The Example

As you’ll see in the example below, the images slide across but the text remains fixed.

Africa

experience the majesty

Africa

experience the majesty

Africa

experience the majesty

Slider Image credits:

First Photo by Sergey Pesterev on Unsplash
Second Photo by Johann S. on Unsplash
Third Photo by Lisa H on Unsplash

How To Fix The Text

The process is really simple. Add the slider module (fullwidth or regular) and then add your slides, keeping the contents consistent across all the slides, just changing the background images of each slide. Once you’re done, head on over to the Slider Module’s Advanced tab (not the individual Slide Settings screen).

Now, all that’s left to do is to add the following CSS to the Slider Description custom CSS field.

Wrapping It Up

It’s really that simple to create a slider that has fixed text and sliding images.

Photo by Shirly Niv Marton on Unsplash

 

Support Divi Notes

Divi Notes started as a way to document my own WordPress and Divi web design/development journey and, to my delight, has grown to become a helpful resource to many other Divi users out there. If you’ve found Divi Notes to be useful in your journey, I’d appreciate it if you would consider supporting me using the form below.

$
Personal Info

Donation Total: $5.00