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 #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
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.
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.
Method
Next, open up your slider module and add a new slide, then add in your heading, button text & URL and your background image.
Set the background image position to center and leave the background image size at default
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=”]
hi ,great tutorial ,
how do you break a line in a divi full-width slider title ?
or do you have any tutorial outline here ?
Thanks
Don’t use the title block. Insert your title with header tags in the content section.
Greeting from Brazil, Michelle.
Thank you for your excelent article!
I got a weird issue.
This site that I am working in (http://espacoceno.com.br/) has a fullwidth slider which is deslocating itself after the actual slide moves on. So the whole thing goes on and on until the last slide on the slider.
Do you have any clue?
Sorry, we can’t troubleshoot issues on our recipes. You may wish to seek assistance in our Facebook group or one of the other Divi groups.
Hi Michelle, greetings from Mexico
I have seen your article and it seems excellent, to align the buttons
but I tried to move down the slider button and I have not found a way to do it
you know how we can do that?
annex a link of an image
If you have any suggestions how to do it, I thank you
You can just add some top margin to the button like this:
.et_pb_slider .et_pb_slide .et_pb_button {
margin-top: 100px;
}
I am completely stuck. Is there a way to get the two lines of text center justified with each other (as they are now), but over to the right a bit more?
I would really need a link to help but try adding a left margin
Hi Michelle, I am a first time writer and new to coding and wanted to see if you would be able to help me. I have created a fullwidth slider and having trouble with the text. As you can see in my example:
?dl=0, I need the text to be centered above the logo. NOT aligned to the right. I would really appreciate your suggestions. Thank you!
I know I am late in replying but I get a 404 from your link
This is great, thanks! I just have one more adjustment i want to make on this page. I would like the text to move to the left more than it currently is. I have tried playing with the margins and padding and am not having any luck. I appreciate any suggestions you have!
Do you have a link please Lottie, its usually the container margin you need to adjust
Hello Michelle Im a long time Lurker and first time writer, hope you can help me out, im trying to make a fullwidth slider appear like this: http://i65.tinypic.com/2d17jnd.png. As you can see i need to have the text block on the left and a logo on right, basically backwards from what the default thing is in Divi, i managed to put the content on the left following this recipe, but i cant do anything bout the image, could you maybe please help me out? And on a side note, do you think is possible to include a Countdown timer module… Read more »
Hey Christian. I actually helped someone with this in a facebook group a while back, check out this post for the solution https://www.facebook.com/groups/DiviThemeUsers/permalink/882803388515925
Hi there,
Is it possible to left align the text in ‘slider’ module rather than ‘fullwidth slider’ – I have tried but the slider then tends to have a huge height to it.
Any help on this would be great thank you!
Can you provide a link please?
Michelle,
thank you so extremely wholeheartedly very much! You really made my day today, after having spend half the night trying to get to this point – but I just messed things up more and more. Resetting everything and using your solution did the trick! Also thanks for #12, which is even more helpful! I will definetely read through your other recipes – and hopefully improve my poor CSS knowledge…
Best wishes,
Axel Hess
Thank you Axel, glad it worked for you
Ah, I see I need to add the button in at the time of setting up the slide rather than being able to add the button in after the slide has been saved and returned to at a later date. I just need to review how to change the alignment for each slide which hopefully you have done a post on.
Of course
https://divisoup.com/alternating-left-and-right-aligned-fullwidth-slider/
This has been a really useful tutorial. I can’t seem to get the button to align with the text though. Do I need additional css for this?
Hi there Michelle!
Thank you so much for this post. I’ve been finding the right tutorial on this issue and your post was the answer.
I would just like to know if is it also possible to separate the title description and the paragraph? I mean I wanted to display the title at the top right or left of the slider while the paragraph at the bottom left or right of the slide.
Your kind help would be greatly appreciated.
Yes Sachi this is possible, each have their own selector so you can style indiviually
Hi Michelle – Thanks for these tips! I just started my site today and I’m guessing I will be a regular visitor to your site. I’m wondering how I would know if I am using a child theme, or how would I do that? I purchased the Divi theme from Elegant themes. I know that’s probably the most basic question. Thanks in advance for your help.
Hi Jennifer
If you don’t know if you are using a child theme then most likely you aren’t. You can create one easily here which will also allow you do edit the footer credits https://elegantmarketplace.com/child-theme-maker/ You simply upload and activate it like any other theme and then you can make changes in those files without it being overwritten.
For the reasons why you should be using one you can check out this article https://elegantmarketplace.com/what-happens-if-i-dont-use-a-child-theme/
Hope that helps
Thanks Michelle! I got my child theme!
Welcome Jennifer
Hi Jennifer
For an easy to use child theme make you can go here: https://elegantmarketplace.com/child-theme-maker/
For reasons why you should use one check out this article https://elegantmarketplace.com/what-happens-if-i-dont-use-a-child-theme/
You install the child theme and activate just like any other theme and then you can start saving edits in those files so they don’t get overwritten.
Hope that is helpful
Hi! really happy with this tutorial! Thanks a million!
Question, can I use this trick also on the Divi Post Slider module?
Potentially it could work yes Jill but would take some major adjustements
Is there a tutorial to get the slider IMAGE to center and drop below the border of the slider, and float over the module below it?
Hi Justin, I don’t have a tutorial for this but the way I would do that is create a module below the main slider and move it up using negative margin
Thank you Michelle! Exactly what I wanted.
Just wanted to ask if there’s a way to change the width of the text area. Right now that text area comes right up to the center and more. Making the right padding 0% doesn’t seem to work.
It now looks like this : http://i.imgur.com/y5MKXIj.jpg
How can I limit the text area to just the left side of center?
Hey Visakh
You need to adjust the size of the text container, if you have a link I can take a look but use dev tools to find the ID and the set a max width. You may also want some media queries so it doesn’t get too small on mobile
Michelle, love the fix but on mobile, the button is all off now. I know you change the button text size for “smartphone” but is there a code I should put in the Divi Theme Options that makes this look good on mobile too? Thanks for you assistance!!
No sure what you mean by ‘all off’ , can you provide a link so I can take a look please?
Hi Michelle
I’m trying but I can’t get it to work. I want to add it just to one slide rather than the child CSS. Is it possible that one slide could be left aligned and another slide right aligned? I don’t see how to mark individual slides with this code other than through the CSS on the slide only??
Hi Tricia
I have been asked this a few times now so today’s Recipe will cover this exact functionality, keep an eye out
Thanks for sharing. I have four slides and I want to align the slide image of one slide on the left and the next on the right and so on. How can I achieve that?
Like this one – (dev.hbintimatelingerie.com), I also tried to get that share text on the monarch sidebar share buttons, but I couldn’t. Please help me with this one too. Thanks in advance.
This is achievable, you would need to create custom classes for both left and right alignment and then use these on the slides themselves rather than the slider.
You are quite a cook! Thank you so much for all that you do!
Thanks Dani
I used this code and it worked beautifully to move my slider text to the right. But, it’s sitting a little lower than I’d like it to. I know there is probably a really small change I can make to this code to move the text up slightly, but I’ve tried guessing and checking and nothing is working (not a coder at all). Can you help by chance? It’s my homepage: http://www.tamibrehse.com
Hi Tami
Sure, just play around with the padding for the description, so change this bit:
padding: 25% 15% !important;
To this:
padding: 20% 15% 30% 15% !important;
And then play around with the values to push the text up. Padding and margin values work clockwise, so top, right, bottom, left. The original code is in shorthand so it says make the top and bottom padding 25% and the left and right 15%.
Hope that helps
Michelle,
Still astonished of what can be done with these tricks and Divi !
I’m just wondering why the CSS code can’t be entered in the Custom CSS section ipo the General Section CSS or a child theme ?
Hope you can clarify this for me…
Best regards,
Hi Claude Thank you for your comments In theory, the code can be entered in the custom css tab in the section/row/module (I think that is what you mean?) as long as the relevant custom css sections are available to target which sometimes they are not. The reason I teach this way is that the majority of Divi users who read my recipes are beginners and I like to make things as simple as possible. In my view, pasting all of the css into the child theme style sheet is simpler than going through the section, row, module settings and… Read more »
Yes Michelle of course !
That’s why I always return to DiviSoup : everything is clear and WORKS, compared to other Divi related sites AND you get answers…
Tired of stuffing code into the Divi CSS box, I have now created a child theme to add the CSS code that I comment, how I understand it works…
Let there be more interesting Divi tricks and ideas !
Regards,
Claude
Really useful. Thanks!!
Welcome Alastair
You are my Divi guardian angel #2 as Geno is the #1
thanks a ton for this. You will surely see this on my website’s home page in few hours.
Cheers Michelle!
Thanks Rambo, I have no problem playing second fiddle to Geno
Thanks very much for the tutorial. I wonder if there’s also a way to move the text towards the bottom of the slide? Don’t know enough of css to experiment with the float command. (Maybe it’d be sink..?) It’d be awesome to have control over the placement of the text and height of the fullwidth right in Divi, hope they give us that in an update. Thank you.
Hi Ricky, check my previous reply on this post to Tami, the solution applies to your question too