Put Divi Slide Images on the Right

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.

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

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

11 Comments

  1. Stuck on the slider… I wish the image would stay actual size, instead of stretching to fill the space (the background is fine, I mean the extra image, that slides in with the text).
    I'm using a book cover and it can't stretch, how do I stop it?

    https://urbanepics.com/blog/

    Reply
    • Hey Derek, it looks like your raw image is actually much bigger than the slider, at 692x1107px. Which means it's actually being shrunk down to fit the available space. that said, if you want a fixed size, you could force one with CSS such as this:

      .page-id-2204 .et_pb_fullwidth_slider_0 .et_pb_slide_0 .et_pb_slide_image img {
          max-height: 400px !important;
      }
      

      I've set it to 400px here as that was about the largest size that looked (to me) reasonable at the lowest screen width at which the image is displayed. With it in place the image will display at 400px height irrespective of how the slider is sized. Note that the page-id-2204 part restricts it to the page you the blog page you linked to.

      I hope that helps, but let me know if I've misunderstood what you need. Thanks!

      Reply
  2. 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
  3. 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
  4. 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
  5. 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

Submit a Comment

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