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;
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
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!
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.
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!