R8: Aligning The Fullwidth Slider Text Left or Right

by | Feb 29, 2016 | Headers and Sliders

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

Aligning The Fullwidth Slider Text Left or Right

Recipe #8 is something I was asked to create by some members of the Facebook groups and it seems to be something a lot of people are struggling with. It does seem a little odd that left and right alignment is not included as a setting in the fullwidth slider module but I expect those lovely guys over at Elegant Themes have a huge list of feature requests to work through. So in the meantime, let’s do it ourselves πŸ˜‰ We will also use some padding to control the height of the slider.

Click here to see the live demo of all three effects and download the xml file

Aligning The Fullwidth Slider Text Left or Right tutorial for Divi

ingredients

The Divi Theme or Divi Builder Plugin from Elegant Themes
Some suitable images (mine are 1920x1080px)

cooking-time

This should take you around 10 minutes max.

preparation

The first thing we need to do is create our module. Add a fullwidth section with a fullwidth slider. Choose the settings you want to use, I have turned automatic animation on and removed the inner shadow.

Aligning The Fullwidth Slider Text Left or Right tutorial for Divi

Next, open the Custom CSS tab and give the module a CSS Class. For left alignment use ds-slider-left, for right alignment use ds-slider-right. If you want center alignment then that is the default setting so you don’t need to do anything, but if you want to have some control of the slider height then use ds-slider-center. Then save & exit.

Aligning The Fullwidth Slider Text Left or Right tutorial for Divi

method

Next, open up your slider module and add a new slide, thenΒ add in your heading, button text & URL and your background image.

Aligning The Fullwidth Slider Text Left or Right tutorial for Divi

Set the background image position to center and leave the background image size at default

Aligning The Fullwidth Slider Text Left or Right tutorial for Divi

Then scroll down to the content area and add any extra text you want.

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, choose which alignment option you want and 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 epanel custom CSSΒ section.

The CSS for center alignment doesn’t move the text or button as this is the default option, what it does is allow you to control the height of your slides by adding some padding to the slider text container, it just makes it a little easier to get the exact height you want rather than having Divi decide for you! Don’t forget to save.

Left Alignment CSS
/*---Left---*/
.ds-slider-left.et_pb_slider .et_pb_container {
    float: left !important; /*move the slider text container to the left*/
}

.ds-slider-left .et_pb_slide_description  {
	text-align: left !important; /*align the slider text to the left*/
	padding: 35% 8%; /*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*/
}

.ds-slider-left.et_pb_slider .et_pb_button {
    float: left !important;  /*move the button to the left*/
}

 

Right Alignment CSS
/*---Right---*/

.ds-slider-right.et_pb_slider .et_pb_container {
    float: right !important; /*move the slider text container to the right*/
}

.ds-slider-right .et_pb_slide_description  {
	text-align: right !important; /*align the slider text to the right*/
	padding: 35% 8% !important; /*adjust the padding around the slider text container, this will also help you to control the 
	height of your slides. You can remove this if you want the default height*/
}

.ds-slider-right.et_pb_slider .et_pb_button {
    float: right !important; /*move the button to the right*/
}

 

Center Alignment CSS
/*---Center---*/

.ds-slider-center .et_pb_slide_description  {
	padding: 35% 8% !important; /*adjust the padding around the slider text container, this will also help you to control the 
	height of your slides. You can remove this if you want the default height*/
	
}

 

And that’s it. Now you have your slider text aligned just where you want it.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. πŸ™‚

Michelle X

Share On: [wp_social_sharing social_options=’facebook,twitter,googleplus,linkedin,pinterest’ twitter_username=” facebook_text=’Share on Facebook’ twitter_text=’Share on Twitter’ googleplus_text=’Share on Google+’ linkedin_text=’Share on Linkedin’ pinterest_text=”Share on Pinterest” icon_order=’f,t,g,l,p’ show_icons=’1′ before_button_text=” text_position=” social_image=”]

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer 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!