Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
Recipe #12 is a variation on Recipe #8 where I showed you how to align the fullwidth slider text to the left or right. I have been asked a few times now how to align the text to the left on one slide, then to the right on the next slide, so this recipe shows you how. It’s actually really simple and requires no external CSS, it’s all within the module!.
As always, you can click here to see the live demo and download the json file (you need Divi 2.7 for this as it uses the new portability functionality).
Ingredients
The Divi Theme or Divi Builder Plugin from Elegant Themes
A few suitable images (mine are 1920 x 1080px)
Cooking time
This should take you around 10 minutes max.
Preparation
The first thing we need to do is create our module.
Create a new fullwidth section and add a fullwidth slider module.
Open up the module settings and configure the main slider options how you want them. I’m not going to go through them all in this recipe, they are pretty self explanatory.
Method
Next we are going to set up a couple of slides. Click on add new slide.
In the slide settings add your heading text, button text, button URL and background image.
If you scroll down a bit further you can choose to add background and text overlays, set the font colour and also add some extra text to the content area if you wish which will show below the heading but above the button.
Once you have everything the way you want it, click on the Custom CSS tab for the slide (not the slider).
There are three sections where we need to add some CSS and we will start with the content left aligned.
1. The Slide Description Container
2. The Slide Description
3. The Slide Button
Here is the CSS for each section. You will see there are no selectors (.element-name) and no curly brackets, we don’t need them when adding CSS in the Custom CSS tab. Also be aware that at the time of writing, you can’t use media queries in these sections, if you need additional styling for mobile you will need to add that to your child theme stylesheet.
Once you have added the CSS don’t forget to Save & Exit.
Left Align CSS
/*-----Fullwidth Slider Left Alignment-----*/ /*Add this CSS to the Slide Description Container section*/ float: left !important; /*move the slider text container to the left*/ /*Add this CSS to the Slide Description section*/ text-align: left !important; /*align the slider text to the left*/ padding: 10% 8% !important; /*adjust the padding around the slider text container, this will help you to control the height of your slides. You can remove this if you want the default height*/ /*Add this CSS to the Slide Button section*/ float: left !important; /*move the button to the left*/
Next, we are going to add another slide and right align the content. Set everything up the way you want it as you did before with your header text, button and background image and then click on the Custom CSS tab and add the following CSS to the same sections you did in the previous step.
Right Align CSS
/*-----Fullwidth Slider Right Alignment-----*/ /*Add this CSS to the Slide Description Container section*/ float: right !important; /*move the slider text container to the right*/ /*Add this CSS to the Slide Description section*/ text-align: right !important; /*align the slider text to the right*/ padding: 10% 8% !important; /*adjust the padding around the slider text container, this will help you to control the height of your slides. You can remove this if you want the default height*/ /*Add this CSS to the Slide Button section*/ float: right !important; /*move the button to the right*/
Once that is done Save & Exit.
Now you have one left and one right aligned slide, so you can just use Divi’s duplicate option to create as many slides as you need and then just swap out the content of each slide.
And that’s it. Now you can align your slide content how you want depending on the images you are using. If you need the content center aligned, just don’t add any CSS to the Custom CSS tab, center is the default alignment.
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.
Michelle X
Hi Michelle X
I followed your steps and It dosen’t work at all, the only way that works is as follow:
– Slider Title
float: left !important;
– Slider Description:
float: left !important;
text-align:left;
– Slider Button
float: left !important;
– Slider Image
float: right !important;
margin-left:50%;
When I put the code in Slider Description Container -> float: left; doesn’t work as I was spect, moving all container to left and breaking the apparence centered for all.
Please tell me if I am doing something wrong and therefore dosen’t works as spected.
Kind regards.
Luis U
Be sure you are putting the code in the SLIDE settings, not the Slider settings.
Hi,
Thanks for this code!
I would like to adjust the slider height and had this code ind custom css:
.homeSlider .et_pb_container {width: 100%; height: 150px !important; }
.homeSlider
It looks like it is impacted by your code. How can I manipulate slider height?
The slider height is affected by the amount of content, the more content you have the taller it will be. You can adjust the top and bottom padding on the .et_pb_slide_description class to make it taller or shorter.
gracias , lo necesitaba!!
If we wanted to move the heading text to the far left edge of the image so the left sides are flush, how would we do that? I have added this custom css to the fullwidth slider module: padding-left: 0% !important; padding-right: 40% !important;
but I can’t get any closer to the flush edge.
Thanks so much!
If you can post a link and switch of automatic animation I can take a look
Ah… alter padding on slider not slides!
If I want to move the text further to the left or right depending on the alignment, how do I do that?
Want to know that too, I cant move the Header Text of a slide to the very Top, no matter if I change top or Bottom padding …
You can change the default padding values to move your content up, for instance this is default:
.et_pb_slide_description {
width: auto;
margin: auto;
padding: 16% 8%;
}
Add in this:
.et_pb_slide_description {
padding: 0 8% 32% 8% !important;
}
And adjust as needed