By default, Divi slider text and buttons are placed centrally, after transitioning in from below. This article explains positioning and animating Divi Slider text with CSS, allowing you far greater control. This can be useful if it is difficult to read the text against the background, or when text obscures an important part of the background or simply when you want your text animation to be more impactful.

We are going to use CSS to position and animate the slider content. We recommend using a child theme for this. There are many good articles on the internet about creating child themes. You can, of course, either use a CSS plugin or put your CSS into Divi->Theme Options->Custom CSS.

Browser And Device Support

Please be aware, to keep our code simple, we have not included vendor prefixes, so these may need to be added to get this code to work properly on all browsers. Similarly, some of the positioning and font sizes used here may need to be modified for optimum display on small devices.

Structure of The Slider

Before we talk about animating Divi slider text though, we are going to take a look at the structure of the slider. We do this so we can understand what we need to target when we make changes.

As an example, in the slider below, we have used two slides, each with a heading and content. We have not used a background image on the slides for now but we have set the background colour. We have set the slider to automatically transition between slides, every 4 seconds, and, to simplify things, we have switched off the controls and arrow buttons.

Slide One

Hi, I am a Divi Slide

Slide Two

Hi, I am another Divi Slide

If you use the Inspect feature of Google Chrome (or equivalent), you should be able to see the internal structure of the slider above. Here is what it looks like –

Drawing a diagram of this structure it would look like this –

et_pb_slider (the slider module)
    et_pb_slides 
        et_pb_slide (the first slide)
            et_pb_container
                et_pb_slider_container_inner
                    et_pb_slide_description (the container for the title and body)
                       H2 et_pb_slide_title (the slide title)
                       et_pb_slide_content 
                          (this is where the body content goes)
                       et_pb_slide_content                  
                    et_pb_slide_description
                 et_pb_slider_container_inner 
             et_pb_container 
        et_pb_slide (the end of the first slide) 
        et_pb_slide (the next slide etc)
            (lots of stuff for the next slide) 
        et_pb_slide (the end of the next slide) 
    et_pb_slides (the end of the slides) 
et_pb_slider (the end of the slider module)

Hopefully, you can see a relationship between the structure above and the code revealed by Google Chrome Inspect. There are a lot of other objects in the web page, of course. The diagram above is just trying to outline the structure.

The key elements to note are that the slides are contained in objects called et_pb_slide and that the container holding the title and body text is called et_pb_slide_description. It is this container that the default animation is applied to. The slide title is in an H2 called et_pb_slide_title and the body of the content is held inside an object called et_pb_slide_content.

Animations Using Keyframes

The default Divi text animation in sliders is achieved using keyframes. Keyframes are a very flexible way of specifying animations. Here is an example. For the sake of simplicity, we are applying the animation to a button for now.

Here is the CSS code we used to achieve this.

The .alarm class was attached to the button. It, in turn, uses the animation property to associate Flasher with the button. It also specifies that the animation is to be run every two seconds, with a linear transition (the speed of the transition is constant) and that this is to be repeated forever.

The @keyframesrule describes the timeline for the animation. The different ‘states’ are represented within the @keyframes. So, in this example, the button color is white for the first 50% of the duration of the animation, then blue (#0e9fb4) for the next 30% of the duration then returns to white for the final 20% of the duration. For each ‘state’, the CSS within the brackets can be anything. So this could include both positioning (objects can fly around) and font styling and colors etc.

.alarm {
    width:50%;
    font-weight:700;
    animation: Flasher 2s linear infinite;
}

@keyframes Flasher {
    0% {color: white;}
    50% {color: #0e9fb4;}
    80% {color: white;}
    100% {color: white;}
}

If you want to try this in your website, add the CSS to your website (ideally, in your child theme), create a button and attach the .alarm class to the button by adding alarm (without the initial dot) to the Button Settings->Advanced->CSS ID & CLasses->CSS Class.

What do you think would happen if you used this CSS instead? Try it now. You will need to change the alarm class to use BigUp instead of Flasher.

@keyframes BigUp {
    0% {}
    50% {font-size:1.2em}
    100% {}
}

Changing The Divi Slide Animation

As it happens, Divi’s default animation is called fadeBottom and here it is along with (simplified) CSS that attaches it to the .et_pb_slide_description –

So, fadeBottom starts with the text being invisible and 10% below its ‘normal’ position and gradually moves it back to its original position and makes it visible. The actual animation has a 0.9 second delay before it starts and it lasts 0.7 seconds. It uses a transition called ease-in-out. It is intended to be quite a smooth transition as it has a slow start and end.

.et-pb-active-slide .et_pb_slide_description {    
    animation: fadeBottom 0.7s ease-in-out 0.9s;
}

@keyframes fadeBottom {
    0%  {   
        opacity: 0;
        transform: translateY(10%);
    }
    100% {   
        opacity: 1;
        transform: translateY(0);
    }
}

In fact, there are a number of transitions pre-defined in Divi and we have listed them here with a very short description of what each does. We have deliberately only included the inward animations.

fadeBottom – starts 10% below and invisible and fades in

fadeLeft – starts 10% left and invisible and fades in

fadeRight – starts 10% right and invisible and fades in

fadeTop – starts 10% above and invisible and fades in

fadeInLeft – starts offscreen left and fades in

fadeInRight – starts offscreen right and fades in

fadeInTop – starts 60% above and fades in

fadeInBottomn – starts 60% below and fades in

Grow – starts invisible and 50% sized then fades in and grows

fadeIn – starts invisible and fades in

To change the animation on the slide content simply choose one of the alternative, built in animations and set the animation-name to use it. Our example CSS below uses fadeLeft. You need to modify the example code to use your chosen built-in animation. Don’t forget to also attach the slide-from-left class to the slider by adding the class name to Slider Settings->Advanced->CSS ID & CLasses->CSS Class.

.slide-from-left .et_pb_slide_description {    
    animation-name: fadeLeft;
}

No great suprise then when we see this in action on our slider below. It slides in from the left!

Slide One

Hi, I am a Divi Slide

Slide Two

Hi, I am another Divi slide

Making Your Own Animation

So far, we have modified the animation of the slide by using the built in animations from Divi. It’s not diffiuclt , though, to make your own animations. If you think back to our descriptions of how animations work, all you need to do is define the animation and attach it to the slide. Here is an example (again, don’t forget to attach the bounce-from-left class to the slider) –

@keyframes BounceFromLeft {
    0% { opacity: 0;
         transform: translateX(-70%);
       }
       50% { opacity: 1;
             transform:translateX(30%);
       }
       60% { transform:translateX(0%);
       }
       70% { transform:translateX(15%);
       }
       80% { transform:translateX(0%);
       }
       90% { transform:translateX(5%);
       }
       100% { transform:translateX(0%);
       }
}

.bounce-from-left .et_pb_slide_description {
    animation: BounceFromLeft 2s linear 1;	
}

…and here is what is does.

Slide One

Hi, I am a Divi Slide

Slide Two

Hi, I am another Divi slide

Animation End Position

One thing to just mention before we go any further is that if the final state of your animated object isn’t the state it would have been in if no amination had been applied,  it will appear to ‘jump back’ at the end of the animation to its ‘non-animated’ state position. Here is an example where, at the end of the animation, the text is 20% further to the right than it would be without any animation. So, it jumps back to the ‘original’ position  –

@keyframes JumpyEnding {
	0% { 
            transform: translateX(-50%);
	}
	100% { 
            transform:translateX(20%);
	}
}

.jumpy-ending .et_pb_slide_description {
	animation: JumpyEnding 4s linear 1;	
}

Slide One

Hi, I am a Divi Slide

Slide Two

Hi, I am another Divi slide

So, one way to avoid this is to make sure that the position at the end of the animation is the same as the position if no animation had been applied. If you actually want the text to end in a position that is different, you can use the slightly obscure animation-fill-mode:forwards. Here is some CSS to demonstrate this –

@keyframes NoJumpyEnding {
	0% { 
            transform: translateX(-50%);
	}
	100% { 
            transform:translateX(20%);
	}
}

.no-jumpy-ending .et_pb_slide_description {
	animation: NoJumpyEnding 4s linear 1;
        animation-fill-mode:forwards;	
}

Animating Individual Divi Slides

So far, when we add an animation we have targeted .et_pb_slide_description. Since every slide contains an object with this name, every slide is targeted with the same animation. To target individual objects we would normally give that object its own, unique classname. Unfortunately, Divi does not provide a field for each individual slide to let us enter a new CSS Class for each. So, we think there are only really two choices for targetting individual slides… Either add your own CSS directly to the Advanced->Custom CSS field of each slide or add the new ‘target class’ directly to the slide content. We prefer to avoid adding CSS into the Advanced->Custom CSS field because we don’t like distributing our CSS around Divi like this. We like to keep all of our CSS in one place, in our child theme.

So, to get this to work we are going to put everything into the slide content, including the title. Create a new slider with a slide then go to the Content field of the slide and switch the tab to Text (make sure you do this or bad things will happen – the HTML will not be recognised) then add this HTML code to the content –

<div class="hps hps-1">
<h1>Slide One</h1>
<p>Hi, I am a Divi Slide</p>
</div>

Slide One

Hi, I am a Divi Slide

Slide Two

Hi, I am another Divi slide

Now, the ‘heading’ is a little smaller on slide one than on slide two. This is because we are not using the same styling as the slider uses fore the heading. We are going to have to do that ourselves in a moment. For now though, just note that we have got the default animation, which is fine. You may not think this looks all that exciting but what you have done is awesome! We can now target the first slide specifically and do things to it without effecting any other slides. We did this by adding two extra classes to the first slide. We haven’t actually defined these classes yet, so they are doing nothing for now. We will make use of them in a moment to make some more changes. One of the classes, .hps, will be used on all slides and we can use it to make changes that effect all slides (we may not actually make any changes here but…. it’s available for us if we need it). The other class will only be used on this first slide so it will effect that slide only. When we style the next slide we will use hps-2, a new classname for a new slide. This will allow us to target specific slides.

So, in effect, we no longer need to target.et_pb_slide_description. We will use our new classes to taget the slide content instead. The .hps class will allow us to make ‘all slide’ changes and .hps-1, .hps-2, .hps-3 etc. will allow us to target individual slides. The actual names of the classes do not matter, so long as the individual class names are eh…. individual.

Now do the same for the second slide. Remove the heading, go to the Content field, be sure to use the Text version of the editor and enter this as the HTML to be used –

<div class="hps hps-2">
<h1>Slide Two<h1>
<p>Hi, I am another Divi Slide</p>
</div>

Let’s use this to give each slide its own animation. To do this we need to target .hps-1 and .hps-2 with different animations. We also, importantly, need to switch off the default animation on the slider description. We do that by giving this slider a class name of .custom-slider-one. Put this classname (without the initial dot) into Slider Settings->Advanced->CSS ID & CLasses->CSS Class then add this CSS to switch off the default animation and add our animations to each slide. Put this CSS into your child theme to see the effect.

/* switch off the default animation style */
.custom-slider-one .et_pb_slide_description {
	animation-name: none;
}

.hps-1 {
	animation: fadeInLeft 4s linear 1;	
}
.hps-2 {
	animation: fadeInRight 4s linear 1;	
}

So, by giving each slide its own name, we can target them individually. If we want to add styling that is common to all slides, we can use the .hps class to do that. Here is what the above CSS looks like –

Slide One

Hi, I am a Divi Slide

Slide Two

Hi, I am another Divi Slide

Animating Objects Within Slides

In exactly the same way as we targeted different slides by using different class names for each of them, we can target different objects within a slide by using thier class name. Now, if we simply want to target the title and body, we can do that with the built in classes. On our slides, we are using H1 for the title and P for the body text. For the sake of clarity we have added a new slide and targeted it with the class .hps-3.The HTML used for the slide content is –

<div class="hps hps-3">
<h1>Slide Three</h1>
<p>Hi, I am yet another Divi Slide</p>
</div>

 

Here is the CSS needed to target the title and body text separately (you will not need the CSS to switch off the default slider animation if you have that already in your child theme) –

/* switch off the default animation style */
.custom-slider .et_pb_slide_description {
	animation-name: none;
}

.hps-3 h1 {
	animation: fadeInRight 4s linear 1;	
}

.hps-3 p {
	animation: fadeInLeft 4s linear 1;	
}

You can see the effect here. We have added a third slide. It is this third slide where we have animated the title and body separately. Be sure to wait for for it!

Slide One

Hi, I am a Divi Slide

Slide Two

Hi, I am another Divi Slide

Slide Three

Hi, I am yet another Divi Slide

Positioning Slide Content

So far, we have not used an image as a slide background. When we do use an image, the text position changes slightly depending on the image position chosen. Let’s assume, for the sake of simplicity, that we have a centrally positioned image that is covering the slide. In this scenario, the slide content is also centered. We probably want to make sure that our text is not obscuring the point of interest within the image, that we can actually read the text and that we have enough contrast between the text and background colour. The example below isn’t awful, but we might want to move the content to the right.

Slide Four

Hi, I am a cheetah

Now, before we get too far into positioning the text there is one other issue to talk about briefly. Most people know that the height of the slider is determined by the content of the slides and not by the size of the background image. Once we start moving the content around, there is a good chance that this will effect the height of the slide. So, we will force the minimum height (min-height) of the slider (of all of the slides in fact) to be 400px. The choice of 400px is an arbitrary one but it seems to work well for this image and the slides we plan to use with it. The .custom-slider class can conveniently be used to do this.

So, the example below has a single slide, called Slide Four, with a class name of .hps-4. Using the default centre position is ok but we might improve this by moving the text to the right.

.custom-slider div.et_pb_slide {
	min-height:400px;
}

.hps-4 {
    position:absolute;
    left:60%;
}

Slide Four

Hi, I am a cheetah

We can position the text in the vertical as well, of course (again, there is no need to include the min-height if it already present in your styling file). We also adjusted the horizontal position a little to reflect the new vertical positioning –

.custom-slider div.et_pb_slide {
   min-height:400px;
}

.hps-5 {
   position:absolute;
   left:65%;
   top:20%;
}

Slide Five

Hi, I am a cheetah

If we wanted to change the position of the content on all slides, we could simply use the hps class for that.

.hps {
   position:absolute;
   left:65%;
   top:20%;
}

Positioning Individual Slide Content

As you might guess, just as we did earlier, we can also target and position individual elements within the slide content by targeting .hps-6 h1 etc. Here is some code and wht this looks like –

.custom-slider div.et_pb_slide {
   min-height:400px;
}

.hps-6 h1 {
   position:absolute;
   left:45%;
   top:80%;
}

.hps-6 p {
   position:absolute;
   left:65%;
   top:20%;
}

Slide Six

Hi, I am a cheetah

When positioning the H1 and P elements separately, the only thing you need to be aware of is that you are no longer easily able to center align them. You can, of course, easily left align these elements by giving them the same left value.

Combining Positioning and Animation

Animation and postioning can be easily combined.  As an aside, though we are using one of the built in animations, fadeInBottom, we could just as easily use an animation that we define ourselves. Here is an example of using animation and positioning together –

.hps-7 {
    position:absolute;
    left:65%;
    top:20%;
    animation: fadeInBottom 4s linear infinite;	
}

Slide Seven

Hi, I am a cheetah

Again, we can treat the title and body text separately if we want to  –

.hps-8 h1 {
    position:absolute;
    left:65%;
    top:20%;
    animation: fadeInLeft 4s linear infinite;	
}

.hps-8 p {
    position:absolute;
    left:65%;
    top:40%;
    animation: fadeInRight 4s linear infinite;	
}

Slide Eight

Hi, I am a cheetah

Timing Divi Slide Animations

All of the animation examples so far have happened simultaneously. Having multiple text objects moving in different directions at the same time could be distracting and might make it difficult to read the text. If we are prepared to define the animations ourselves, it is easy to arrange for them to follow on from one another, in effect, separating them and giving them an ordering, making it easier to read them-

@keyframes TitleAppear {
    0% {opacity:0; top:0%;}
    33% {opacity:1; top:20%;}
    66% {opacity:1; top:20%;}
    100% {opacity:1; top:20%;}
}

@keyframes BodyAppear {
    0% {opacity:0; top:0%;}
    33% {opacity:0; top:0%;}
    66% {opacity:1; top:40%;}
    100% {opacity:1; top:40%;}
}

.hps-9 h1 {
    position:absolute;
    left:65%;
    top:20%;
    animation: TitleAppear 6s linear infinite;	
}

.hps-9 p {
    position:absolute;
    left:65%;
    top:40%;
    animation: BodyAppear 6s linear infinite;		
}

Slide Nine

Hi, I am a cheetah

The CSS used here is a little more complicated than usual so we will pause and just explain a few points.

Firstly, we have defined our own animations, TitleAppear and BodyAppear. We need to do this to get maximum flexibility in defining the timings of these animations. Next, the animation actually has three different periods or sections. The first is the period during which the title appears, the second is the period during which the body appears and the final period is simply there to allow a ‘pause’ when both title and body are visible. Otherwise, the slider would flip to the next slide immediately after the body finishes appearing. Because there are three periods, the animation is set to last for a multiple of three and the definitions of the animations have four ‘endpoints’. In other words, they define three periods. Now, some of these endpoints are not needed, because there is no change from one period to the next, for example, the second and third periods for TitleAppear have identical characteristics and the 66% endpoint could be romoved. Nonetheless, we choose to leave it in, to make the CSS easier to change. The periods could be made different in the future.

Working With More Than Two Elements

We used the H1 and P classes in the content and targeted them in the CSS. If we only used built in classes we would quickly run out of class names to use. So, the number of elements we can use is limited. We can target more elements by changing our HTML to add our own classnames rather than using the built in classes. Here is the slightly modified CSS and HTML needed to do this. Enter the HTML as the slide content –

@keyframes SubTitleAppear {
    0% {opacity:0; top:80%;}
    33% {opacity:1; top:40%;}
    66% {opacity:1; top:40%;}
    100% {opacity:1; top:40%;}
}

@keyframes ContentAppear {
    0% {opacity:0; top:80%;}
    33% {opacity:0; top:40%;}
    66% {opacity:1; top:40%;}
    100% {opacity:1; top:40%}
}

.hps-10 h1 {
    position:absolute;
    left:65%;
    top:20%;
    animation: TitleAppear 6s linear infinite;	
}

.hps-10 p.subtitle {
    position:absolute;
    left:65%;
    top:40%;
    animation: SubTitleAppear 6s linear infinite;		
}

.hps-10 p.content {
    position:absolute;
    left:82%;
    top:40%;
    animation: ContentAppear 6s linear infinite;	
    color:red;	
}
<div class="hps hps-10">
    <h1>Slide Ten</h1>
    <p class="subtitle">Hi, I am a cheetah</p>
    <p class="content">I'm very hungry</p>
</div>

Slide Ten

Hi, I am a cheetah

I’m very hungry

Positioning And Animating Buttons

Though this article is about positioning and animating Divi slider text, we can use the same approach for the slider buttons as well. The default slider button is called a.et_pb_more_button. If we use the earlier example for alarming a button, we can target the slider button with this CSS code (remember to add the slider-alarm class to the Slider Settings->Advanced->CSS ID & CLasses->CSS Class for this to work – and remember to add a button to the slide!). We have not duplicated the earlier definition of Flasher here as we have assumed you already have it in your CSS. If not, you will need to include it for this to work. We have removed the image from the slides just to keep things simple.

.slider-alarm a.et_pb_more_button {
    width:50%;
    font-weight:700;
    animation: Flasher 2s linear infinite;
}

Now, the CSS above is applied to all of the buttons on all of the slides. If we want different slides to have different buttons (and behaviours) we need to be able to target individual slides. We can use the same approach as earlier, adding our own HTML directly into the slide content, to create (and name) each individual button. It may not be sensible to style buttons differently on different slides, but it might be very useful to be able to position them differently. Here is some HTML that we can add to the slide content to ‘make’ a button (we are simply using an HTML Anchor element and applying the built in ET button classes to it). Don’t forget to remove the button you set up in the slide previously – we are making the buttons ourselves now!

<div class="hps-11">
    <a href="#" class="et_pb_more_button et_pb_button">Click Me</a>
</div>

We can now target this button on this specific slide with some appropriate CSS  –

.hps-11 a.et_pb_more_button {
    position:absolute;
    left:70%;
    animation: ButtonAppear 4s linear infinite;	
}

@keyframes ButtonAppear {
   0% {}
   25% {transform:scale(2, 1);}
   50% {transform:scale(2, 2);}	
   75% {transform:scale(2, 1);}	
   100% {}
}

Switching Off The Divi Slider Text Shadow

The Divi slider module adds a drop shadow to text in slides. If you prefer to not have a drop shadow on the slider text, you can switch it off with this CSS code –

div.et_pb_slide_description {
	text-shadow:none;
}

If you found our blog article useful, why not subscribe? Get all of our articles and tutorials delivered direct to your inbox!

You have Successfully Subscribed!