Turn it – Create a Vertical Divider

Here and there and where I looked : I began to see some fancy vertical divider lines popping up. It’s an exciting new approach and a really cool graphical element. Fasten your seatbelt – Here’s how you turn the line from an horizontal to a vertical divider line in Divi.

Bring in the Divider Module !

Go to your Divi Builder and create a new section with one row and one column. So that we don’t end up with “just” the divider we will add one text module on top and at the bottom as well – for a header and a paragraph.

Prepare the Turnaround !

Before we actually turn the divider line from horizontal to vertical we need to make some minor settings within the divider module seettings.

Visibility: Show the Divider
Color: #555555; (in case you choose to have a white BG, otherwise adapt ! )
Divider Weight: 3px
Divider Position: Vertically Centered;

All other Settings can stay by default.

Now flip it !

Get yourself into the Divider Module Settings again and jump into the advanced tab. Focus on the custom css “Main Element” text field, copy and paste the following snippet:

max-width:100px;
margin: 0 auto;
transform: rotate(90deg);

Hit save ! Now you can add some sample header text into the first text module above the divider module, and some example text in the second text module below the divider.

Vertical Divider

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Now that was easy !

You got it ! Now fly away and spread those vertical dividers for they will bring you fame and glory ! If you like it so much you can’t stand it – share this post with your Divi Friends 🙂