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:
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:
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 “slider-image” as the slider module’s ID.
Now we can use css to tell it how we want to position our slide image. Here’s an example:
#slider-image .et_pb_slide:nth-of-type(1) .et_pb_slide_image {
top: 20%;
right: 0%; }
This rule above states, from left to right, that it applies only to the slider with id “slider-image”, 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, i.e. (2) for slide 2, 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.
Or apply the css to all slides to move and resize the slide image. Adjust the % to suit your image size and required placement:
#slider-image .et_pb_slide_image {
right: 44%!important;
height: 100%!important;
width: 100%!important;
top: 50%!important;
}
