Put Divi Slide Images on the Right

Divi includes a slider module (and fullwidth slider module) which lets you display a slideshow of slides, each containing a description and (optionally) an image. By default the image is on the left and the description on the right. If you'd like to swap the position of the image and the text, to place the text on the left and the image on the right, here's how to do it.

Swap the Slide Image and Description with Divi Booster

Divi Booster includes an option to switch the default position of the slide text / image, placing the slide images on the right and the text on the left. You'll find the setting at:

Divi > Divi Booster > Modules > Slider > Put slider images on the right

This is a global setting and will apply to all sliders on the site.

Swap the Slide Image and Description in Module Settings

The slider / fullwidth slider don't directly have an option to switch the position of the slide image and text, However, the slider module settings do contain "Custom CSS" boxes which can be used for this purpose. To apply the effect to a particular slide, open up the settings for the slide, and then, on the "Advanced" tab under "Custom CSS", configure it like so:

Save the settings, and your slide image should now be on the right.

Similar Custom CSS boxes are available for the slider as a whole, allowing you to swap the image position for all slides in one go. You'll find those at:

Slider Settings > Advanced > Custom CSS > Slide Description
Slider Settings > Advanced > Custom CSS > Slide Image

Swap the Slide Image and Description with CSS

To place 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

Divi Booster

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

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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