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:
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:
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.
0 Comments