| |

Divi – Aligning the fullwidth slider image right

divi fullwidth slider image right


It does seem a little odd that image left and right alignment is not included as a setting in the divi fullwidth slider module. By default when you place an image in fullwidth slider it places left side of the text, what if you want to place the image in right and text on left.

The first thing we need to do is create our module. Add a fullwidth section with a fullwidth slider.
Next, open the Custom CSS tab and give the module a CSS Class. For right alignment use ts-slider-image-right. If you want left alignment image then that is the default setting so you don’t need to do anything.

fullwidth-slider-image-right

Once you are happy with all your settings, duplicate the slide as many times as you need and go into each slide and change the images and text as required, then save & exit.

Now for the CSS, copy and paste the code below into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi > Theme Options > General > Custom CSS section.


/* fullwidth slider image position to right */
.et_pb_slide_description {
float:left !important;
}
.et_pb_slide_image { right: -100px; }

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

4 Comments

  1. It was help full though it’s much easier when you apply the code in the custom are per slide element, what your method does is over ride the custom settings of Divi and moves every element right and say if on another slide I wanted to the image on the left I would get the same headache like when using the Divi default