Adjust Slide Image Position in a Divi Slider Slide

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 screen for your slide and changing the "Slide Image Vertical Alignment" option shown here:

divi slide settings - vertical alignment

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

Move the Slide Image via CSS

More complicated, but much more powerful, is to move the slide image with CSS. To do so, we first need to give the slider module a unique ID with which we can refer to it. This can be done from within the Slider Module's settings, as shown:

divi slider module settings - css id

You can enter any value for the CSS ID – but choose something that isn't likely to be used elsewhere, and use lowercase and hypens instead of spaces. In this example we're using "my-slider-module" as the slider module's ID.

Now we can add CSS to Divi to tell it how we want to position our slide image. Here's an example:

#my-slider-module .et_pb_slide:nth-of-type(1) .et_pb_slide_image { top: 20%; right: 0%; }

This rule states, from left to right, that it applies only to the slider with id "my-slider-module", to just the first slide of that module (change the number in the nth-of-type(1) part to apply the style to a different slide), and to just the image of that slide (not the text, etc). The body of the rule (the bit within the braces {}) says position the image at the top of the slide and to the right, so that it sits above the slide text, rather than to the left of it. You may need to adjust the percentages to suit your particular image size.

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

0 Comments

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