Want to learn how to use CSS with Divi?
Our CSS & Divi Beginner Course is now open for enrollment!
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).
The Divi Theme or Divi Builder Plugin from Elegant Themes
A few suitable images (mine are 1920 x 1080px)
This should take you around 10 minutes max.
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.
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.