Adjust Slide Image Position in a Divi Slider Slide

Written by Dan Mossop

The Divi Theme slider module has the option to add an image beside the slide text. If you'd like to change the position of the image for a particular slide, there are two main ways to do so.

Move the Slide Image using Divi's Settings

Divi offers two options for the slide position. Either you can have the image centered vertically in the slide, or you can have it flush with the bottom of the slide. You can switch between them by going into the settings for your slide and changing the "Slide Settings > Design > Image > Image Alignment" option, as shown here:

Save the changes and update the post, then reload your slide to view the changes.

Move the Slide Image via CSS

More complicated, but more powerful, is to move the slide image with CSS. To do so, we can set the slide image's "top" and "left" values, at: 

Slide Settings > Advanced > Custom CSS > Module Elements > Slide Image

Like so:

If you enter the values as they are given above, this should leave the slide image unmoved. But now you can modify the values to your liking. Note that the required values aren't entirely intuitive and also somewhat dependent on the size of your slide image, so you may need to experiment to find the values that suit your slide best. But here are some to get you started:

Horizontally center the slide image

You can horizontally center the slide image by setting the left to 26%, e.g.: 

left: 26%;
top: 50% !important;

Horizontally right align the slide image

You can right align the slide image horizontally by setting the left to 52%, e.g.: 

left: 52%;
top: 50% !important;

Top align the slide image

You can top align the slide image by setting the top to 29%, e.g.: 

left: 0%;
top: 29% !important;

Optimize Your Membership Site with Divi ARMember Kit!

Seamlessly integrate Divi and ARMember with the Divi ARMember Kit. Add login and signup popups, and restrict content by ARMember plan effortlessly. Enhance your membership site's functionality and user experience with these tailored features.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

4 Comments

  1. I would like to change the text and the image around so the image on the rightside of the slider.

    And as well to be able to resize only the image

    could you help me out?

    Christa

    Reply
    • Hi Christa,

      This post explains how to swap the positions of the image and text:

      Put Divi Slide Images on the Right

      For the slide size, go into the slider settings and locate:

      Slide Settings > Advanced > Custom CSS > Module Elements > Slide Image

      And enter:

      max-width: 200px;

      Adjust to the image size you want. If you need to increase the size of the image, you can use "min-width" instead of "max-width".

      i hope that helps!

      Reply
  2. Thank you for sharing this (and for your fantastic plugin!)
    I was stuck trying to get one of my slides to have ONLY the image (no text) with it centered horizontally across what is normally two columns in the setup. I couldn't seem to get the code shared here to do what I needed, but this CSS below that I added to the slide module DID work for me and I thought it might help someone else as well:

    .et_pb_slides .et_pb_slide_1 .et_pb_slide_image {
    left: 25% !important;
    }

    Also, one simple suggestion – if anyone else needs to position just an image in the center of the slide with no text: don't use image place holder – instead use centered text content and place the image in the body copy. This also worked for me but I liked the first css fix better.

    Reply
    • Hey Cherissa, thanks very much for pointing this out! While generally correct, the post was getting quite dated, so I've rewritten it. I've included a part on centering the slide image which is basically doing the same thing as your suggested CSS, though added in a slightly different way. Note that on my test site, I found that setting the left to 26%, rather than 25% produced a better centering, though I think it will probably vary from slide to slide due to differences in the slide image dimensions, padding, etc. Thanks again!

      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 *.

We may earn a commission when you visit links on our website.

Latest From Divi Booster

How to Add the Post Status in Divi's Dynamic Content

Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

Fix Divi Text Module "Regular" Font Weight Not Working

Are you encountering an issue where the font weights in Divi's Text Module don't seem to apply as expected? In particular, you might find that when you set the text module's body text font weight to "Regular", your font is actually assigned a weight of 500 instead of...

Make the Divi Gallery Module Swipeable

The Divi Gallery Module comes with a slider mode that lets you display images in a slider with clickable left/right arrows to scroll through the images. For mobile / touchscreen users, you can improve the user experience by allowing your user to swipe to navigate to...

How to Use Divi Dynamic Content in Woo Modules Product Selector

Divi's Dynamic Content is a powerful feature that lets you populate your Divi modules and theme builder templates with data pulled in various sources, such as custom fields. This allows for efficient organization and maintenance of your sites.Unfortunately, Divi's...

Random Divi Posts