Put Divi Slide Images on the Right

This post may contain referral links which may earn a commission for this site

If you'd like to swap the position of slide images in the Divi Theme to have your slide images on the right instead of the left, you can use the following CSS:

.et_pb_slide_description { float:left !important; padding-left:100px !important }
.et_pb_slide_image { right:100px; }

To make the change to just a single slide (e.g. the first one) on a particular slider, give the slider a CSS class, such as "myslider" and use:

.myslider .et_pb_slide:nth-of-type(1) .et_pb_slide_description { 
    float:left !important; padding-left:100px !important 
}
.myslider .et_pb_slide:nth-of-type(1) .et_pb_slide_image { 
    right:100px; 
}

The nth-of-type bit determines which slide is switched. For example nth-of-type(1) will switch the image and text on the first slide, nth-of-type(2) will switch it on the second slide, etc.

Hundreds of new features for Divi
in one easy-to-use plugin

9 Comments

  1. Given the first slide is .et_pb_slide_0. You can use the following:

    .et_pb_slide_0 .et_pb_slide_description {
    float:left !important; padding-left:100px !important
    }
    .et_pb_slide_0 .et_pb_slide_image {
    right:100px;
    }

    Reply
    • Thanks Alan, you're spot on. Back when I originally wrote the post Divi wasn't adding the "order class" (i.e. the "et_pb_slide_n" class) to the slides, hence the use of "nth-of-type" in the selector. Either should work in modern versions of Divi. If you need to support older versions of Divi, the "nth-of-type" version would still be necessary, but for recent versions the .et_pb_slide_0 syntax is a nicer way to do it. Cheers!

      Reply
  2. Hey guys, just a quick update. This can be possible with display flex, instead of float.

    /*make the slide container flex*/
    .et_pb_slider_container_inner {
    display:flex;
    }

    /*make both columns inline-block, relative and with a % width*/
    .et_pb_slider_container_inner .et_pb_slide_image, .et_pb_slider_container_inner .et_pb_slide_description {
    display:inline-block;width:50%;margin:0;position:relative;
    }

    /*target the image and add the order 2*/
    .et_pb_slider_container_inner .et_pb_slide_image {
    order:2;
    }

    This basically will make the container flex and its element to be inlined. Then you make them 50% width and change the flex order of the img to 2.

    You can see the results in this image
    https://ibb.co/GsWs2Gk

    Hope it helps!

    Reply
    • Hey Martin, that's a nice way to do it. Thanks for sharing!

      Reply
  3. Dan: If I wanted to set up a class called, for example rightimage, could I add that to the CSS in epanel and just use that class everytime I want the image on the right?

    Reply
    • Yeah, that will work if you want to apply the rightimage class to whole sliders (so that all the images in the slider show up on the right).

      If you want to be able to control it on a slide-by-slide basis, it's a bit trickier as Divi doesn't give you a way to set a CSS id on an individual slide. One way you could do it is to create a copy of the class for each slide position (based on the second code snippet above), so something like:

      .rightimage1 .et_pb_slide:nth-of-type(1) { ... rest of CSS
      .rightimage2 .et_pb_slide:nth-of-type(2) { ... rest of CSS
      .rightimage3 .et_pb_slide:nth-of-type(3) { ... rest of CSS
      

      Then if you wanted, say, the first and third images on the slider to be right-aligned you would enter the CSS class for the module itself as "rightimage1 rightimage3" (no quotes). You can actually add multiple CSS classes to a module by separating them with a space, so this will add the two classes needed for styling just the first and third modules.

      Hopefully that makes sense!

      Reply
      • It does! Thank you for your help.

        Reply
  4. I'm so new I didn't really understand the whole nth thing, but this post clears up it, although I know the purpose was for the slides. I've been just learning through trilal and error, small things like this, really help,clarify and give me confidence going forward, thanks

    Reply
    • Yeah, the nth stuff can be a bit tricky, but very handy. The good news is that if you're learning this you've already learned most of the CSS you'll need day to day to customize sites (except perhaps the million annoying browser incompatibilities… but no one knows all of them!).

      Reply

Leave a Reply to Susan Cancel reply

Your email address will not be published. Required fields are marked *