Positioning Slide Text on a Full-Width Divi Slider

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

Horizontal Positioning

Divi doesn't let you directly set the horizontal positioning of the slide text, but it's position can be controlled in a limited way using the text alignment option at:

Slide Settings > Design > Text > Text Alignment

 

This lets you left, center, or right align the text.

If your text is long it will still fill the full width of the slider, so you might also want to limit the text width to ensure that it stays in the area (left / center / right) of the slider defined by the alignment setting. You can limit the width by entering a width in:

Slide Settings > Advanced > Custom CSS > Slide Description

Like so:

Vertical Positioning

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 slide 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, if we set a top padding of 5%, we need to increase the bottom padding to 27% to balance it out (5%+27% = 32%).

This padding can be specified in:

Slide Settings > Advanced > Custom CSS > Slide Description

Like so:

Here's the copy-and-pasteable version:
padding-top: 5% !important; 
padding-bottom: 27% !important;

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

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

30 Comments

  1. Hi Ended up with too much headroom on the slider but the captions work great. Can't seem to move up?

    Reply
    • Hi Melody, the issue seems to be that pushing the slide text down below the slide image is causing the total height of the slider to be increased. Since the image is centered in this increased height, an empty space is left at the top. While there's probably a way to remove this gap, an easy alternative solution that seems to work is just to move the slider up a bit (e.g. with a negative margin). In your case, the following CSS should work:

      body.page-id-333 .et_pb_fullwidth_slider_0 {
          margin-top: -140px !important;
      }
      

      You can add this into the "Divi > Theme Options > General > Custom CSS" box. Alternatively, you could set the same negative margin via the slider module settings.

      Hope that helps!

      Reply
  2. Totally confused – you say "Divi has an option in the slide settings to toggle the vertical alignment between centered and bottom-aligned" – but I can't find that option ANYWHERE.

    Help?

    Reply
    • Hi Omar, sorry the post was getting a bit outdated. I'm not 100%, but I think that option has now changed to apply only to the slide image ("Slide Settings > Design > Image > Image Alignment"), not the slide text. I've removed the reference and done a quick refresh of the post to be applicable to the latest version of Divi. I hope it helps, but if anything isn't clear / doesn't do what you need just let me know. Thanks!

      Reply

Submit a Comment

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