R12: Alternating Left and Right Aligned Fullwidth Slider

by | Apr 22, 2016 | Headers and Sliders

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

Alternating Left and Right Aligned Fullwidth Slider

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.

Alternating left and right aligned fullwidth slider tutorial for divi

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.

Alternating left and right aligned fullwidth slider tutorial for divi

 

In the slide settings add your heading text, button text, button URL and background image.

Alternating left and right aligned fullwidth slider tutorial for divi

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

Alternating left and right aligned fullwidth slider tutorial for divi

       2.  The Slide Description

Alternating left and right aligned fullwidth slider tutorial for divi

       3.  The Slide Button

Alternating left and right aligned fullwidth slider tutorial for divi

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

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.
Join the Divi Soupies Facebook Group

Like us on Facebook

Categories

Archives

WP Theme FAQs
WordPress Theme Editor
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!