Positioning Slide Text on a Full-Width Divi Slider

This post may contain referral links which may earn a commission for this site

Note: I'm still developing this tip, so it hasn't been tested extensively and isn't yet available as an option in Divi Booster.

Here's a quick tip for positioning the slide text on individual slides with the Divi Theme's full width slider.

Suppose you start with a full-width slider with a background image and some text, similar to that shown in the featured image above. Divi has an option in the slide settings to toggle the vertical alignment between centered and bottom-aligned. However, if you want more control over the text position, you will need to resort to CSS.

For example to align the slider text to the top right corner of the slide, we can add the following into the slide's custom CSS field for the slide description:

Here's the copy-and-pasteable version:

text-align: right; padding-top: 5% !important; padding-bottom: 27% !important;

Breaking it down, there are two components. First, we can easily control the horizontal alignment by setting the "text-align" property to either "left", "right", or "center".

Controlling the vertical alignment, especially to top-align the text is slightly trickier. We can do this by changing the top and bottom padding of the slider description. Normally there is a top and bottom padding of 16%, for a total vertical padding of 32%. We can move the text up by reducing the top padding, but need to correspondingly increase the bottom padding to keep 32% padding. So for example, the above sets a top padding of 5% and increases the bottom padding to 27% to balance it out (as 5%+27% = 32%).

The result is that we now have a top right aligned slider text, like so:

Hundreds of new features for Divi
in one easy-to-use plugin

26 Comments

  1. Great, thank you. one question, is it also possible to get the titel to the bottom of the slider? a deep bow of respect.

    Reply
    • please forgive me….. I just manage to get it right!
      again deep bow of respect.

      Reply
      • Great! I'm glad you were able figure it out, Dick πŸ™‚

        Reply
  2. Many many thanks

    Reply
    • You're welcome, Darren πŸ™‚

      Reply
  3. I was just trying to resolve this on my own Divi slider and got stuck. I did a Google search and came across this post. Thanks so much for posting this and contributing to the Divi world!

    Reply
    • You're welcome, Greg!

      Reply
  4. Hi, Your tutorials are great! I am new to divi and still learning atm one thing i am having problems with is the text overlay of a slider! I would like the text overlay / title and description etc to be full screen, is this an easy thing to achieve?
    Many Thanks Simon

    Reply
    • Hi Simon, do you mean you want to overlay the entire slide with a color, rather than just having a small box around the text as you get with the "Text Overlay" option? If so, then you can simply use the "Use Background Overlay" option which is located just above the "Use Text Overlay" option in the slide's "Design" tab. The background overlay is similar to the text overlay, but the overlay will be as large as the slider itself (i.e. full screen if you slider is). You can then use the font size options, etc, to make the title and description bigger if you'd like. Or have I misunderstood what you're after? Thanks!

      Reply
      • Hi, Thanks for getting back to me, i have now managed to get the slider to show how i wanted. It was kinda of half and half! I wanted the overlay to not be the full height as in a background overlay, i just wanted the middle portion where the text is to have the overlay (basically show up text better without changing whole image) but i wanted this overlay to cover the full width. I did this in the end by removing the text overlay in divi and adding some custom css to do the full width overlay πŸ™‚ Thanks very much for your help! I will look into getting your tool once im fully up to speed πŸ™‚

        Reply
        • Ah, I get you now! I'm glad you were able to get the effect you wanted, Simon πŸ™‚

          Reply
  5. Worked great for me. Thanks Dan, for this tip and code!

    Reply
  6. This didn’t work for me. I’m trying to move the text on the first slider for http://www.ndis.prorehab.com.au

    Could you tell me why it’s not working? I’ve googled it for the last 48 hours and it’s making me want to pull my hair out!!

    Reply
    • Hi Lauren, at the moment it looks like you have the following in "Slider Settings > Advanced > Slide Description":

      .et_pb_slide_description{padding-right:60%!important;padding-left:0%!important}
      

      Am I right? If so, change it to just:

      padding-right:60%!important;padding-left:0%!important;
      

      You don't need to (and shouldn't) add the ".et_pb_slide_description{…}" bit, as Divi adds this itself. If you add it too, you end up with invalid CSS that doesn't end up doing anything.

      I think with that change you should be able to control the position of the description, but let me know if you still can't get it to work. Thanks!

      Reply
  7. Great post Dan. By default the text is right and the image is left on the fullwith slider. Is there a way to get the text to the left and the image to the right?

    Reply
  8. I have text that I want moved to the side (this works great!) , but I need the lines of text center justified with each other. Is this possible?

    Reply
    • Hi Gretchen, you should be able to do it just by changing "text-align: right;" to "text-align: center;" in the above. Alternatively, you might want to try "text-align: justify;" which should make each line of text take up the same width. Let me know if that doesn't help. Thanks!

      Reply
  9. Hi, I've try your instruction on my site, it works perfect!! Cheers!
    But somehow I can't make it work on the mobile, any idea ?

    Reply
    • Hi Gary, any chance you can send me a link to the page you're working so that I can take a look (as it seems to be working on my site)? Thanks!

      Reply
  10. By design, slide text is supposed to stay centered on mobile as well, isn't it? Can't figure out why Divi's default positioning is keeping it to the right on phone view. Your code above should work on mobile because it's using percentages, correct? (sorry for lots of q's in one comment!)

    Reply
    • Found my issue – when adding new code, need to check old code first! πŸ™‚

      Reply
      • Ha ha! Glad you found the problem, Randall πŸ™‚

        Reply
  11. Dan, that would be awesome!! hope so.

    Reply
  12. Is there a way to do this with the plugin? I don't see it. Thanks.

    Reply
    • Hi Katie, there isn't at the moment, I'm afraid. It is on my to-do list though, so hopefully I'll be able to add it in a future update.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *