How to adjust slide image position and size in Fullwidth Slider

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 position



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:

slide position css


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;
}
  • how to move divi slide image
  • 11 Users Found This Useful
Was this answer helpful?

Related Articles

6 of the best online bookings plugins for WordPress

Whether you run a hair salon, work as a consultant or manage a hotel or guesthouse, being able to...

Change Divi Primary Menu font weight

In order to change your Divi Primary Menu font weight then insert the following css code under...

Divi Layout & Typography Customizer Settings

In Divi Theme you can customize just about everything when it comes to layout & typography....

Divi Resources Blog

Stay up to date with Elegant Themes most recent news and updates...

Documentation and Tutorials

Please click on the link below for useful tutorials on using Divi Builder to build your perfect...