How Do You Set the Divi Slider Text Position?

 How To Set The Divi Slider Text Position?

Setting the text position in the Divi slider is quite a simple process once you know how to navigate through the builder. This short guide will teach you how to change the Divi slider text position but make sure you have installed WordPress . Here’s a quick tip for positioning the slider text on separate slides in the Divi Theme’s full-width slider.

Divi Slider Text Position: Horizontal

Although Divi does not let you change the slide text to a horizontal position directly, you can definitely do it in a roundabout manner by using the text alignment option. Once you’ve decided your Divi slider text position, go to the admin dashboard and navigate until you are on the page which has the text slider. Then open the Settings of the Divi slider and click on:

Design> Text> Text Alignment.

Here, you may adjust the alignment of your text but only within the limited area provided by the Divi theme. This allows you to align your text to the left, center, or to the right. However, if your text is on the larger side, it might fill up the entire width of the slider. Therefore, you may want to limit the text width to ensure it stays inside the slider area determined by the alignment setting (left, center, or right). You can set a width restriction in the custom CSS section with the following code: 

width: 40px;

Open the slider Settings and click on Advanced > Custom CSS > Slide Description. The width may vary with the size of text, so you may have to adjust your settings.

Divi Slider Text Position Horizontally

Divi Slider Text Position: Vertical

If you’d prefer a more vertical outlook, it is nearly the same process as the one above, with some minor adjustments added. It’s a little more difficult to control the vertical alignment, especially when top-aligning the text. 

However, we can adjust the padding at the top and bottom of the slide description. Normally, there is a 16 percent padding at the top and bottom for total vertical padding of 32 percent. To preserve the 32 percent padding we can move the text up by reducing the top padding, but we’ll need to increase the bottom padding in direct proportion to these changes.

The padding is totally up to your content; what size fits? You’ll have to do a little self-scan and define the percentage accordingly. Add these lines of code to the custom CSS section and supply the amount that works for your content.

Finally, log in to the WordPress admin dashboard and navigate the Divi slider text to set your desired position. Click on its Settings, then Advanced > Custom CSS > Slide Description.

Position Vertically 

padding-top: 5% !important; 

padding-bottom: 27% !important;

We hope we were able to help you on your publishing journey.

Leave a Comment

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

Related Posts

Regex is a useful string of characters that defines a search pattern. In the security world, regular
When developing an application or any other software, the security of the finalized product is one of
Sometimes the development teams employ unconventional practices to fix bugs or add new features without realizing the
Scroll to Top