How to Turn Horizontal Dividers into Vertical Ones with Divi

Posted on August 14, 2018 by in Divi Resources 24 Comments

How to Turn Horizontal Dividers into Vertical Ones with Divi
Blog / Divi Resources / How to Turn Horizontal Dividers into Vertical Ones with Divi

Every week, we provide you with new and free Divi layout packs which you can use for your next project. For one of the layout packs, we also share a use case that’ll help you take your website to the next level.

This week, as part of our ongoing Divi design initiative, we’re going to show you how to turn the standard horizontal Divider Module that we all know into a vertical one using Divi’s Moving Company Layout Pack as an example. This approach will come in particularly handy if you’re trying to create timelines on your pages. It’s great to use for ‘how it works’ sections too, and so much more. After setting up the vertical divider, we’ll add Blurb Modules on top of it to create the timeline effect. This tutorial doesn’t require any CSS code and is based on Divi’s built-in options only.

Let’s get to it!


Before we dive into the tutorial, let’s take a look at the result on different screen sizes.

vertical divider

Let’s Start Creating: Add a New Page  & Upload Moving Company Layout Pack’s Landing Page

Add a New Page & Switch Over to Visual Builder

Let’s start by adding a new page, adding a title and switching over to Visual Builder.

vertical dividers

Choose a Premade Layout

Once you do that, you’ll have the ability to build from scratch, choose a premade layout or clone an existing page. We’re going to use the Moving Company Layout Pack’s landing page to create the end result so go ahead and browse through the premade layouts.

vertical dividers

Select the Moving Company Layout Pack’s Landing Page

Scroll down the premade layouts until you come across the Moving Company Layout Pack and upload the landing page to your page.

vertical dividers

Start Creating the Vertical Divider Timeline

Find Timeline Section

We’re now ready to start turning horizontal dividers into vertical ones and using that divider to create a timeline. Go ahead and locate the following section on your landing page:

vertical dividers

Add a New Standard Section Below

Right below this section, add a standard section.

vertical dividers

Place ‘How it Works’ Row in New Section

Continue by dragging the ‘How it Works’ row of the previous section to your new section.

vertical dividers

Add New Row

Column Structure

Right below the row you’ve just placed in your section, add another one with the following column structure:

vertical dividers


Before adding any modules, open your row settings and add ’60px’ to the top margin.

vertical dividers

Add Divider Module to Column 1

Hide Divider

We can now start adding modules! We’ll start with the first column and once we’re done, we’ll move on to the second one. The first thing we’ll need in the first column is a Divider Module. As mentioned before, we’re going to turn it into a vertical one. The first step towards achieving our desired result is disabling the Show Divider option.

vertical dividers

Gradient Background

Instead of using the actual divider, we’ll create a divider using the background of the Divider Module. We’re using the following gradient background:

  • Color 1: #e0aa25
  • Color 2: #c11000

vertical dividers


Now, we’ve already made sure the divider isn’t visible. The next crucial step towards creating a vertical divider is decreasing the width of our divider drastically. We’re using ‘2%’ but you can make it appear as thick as you want. We’re also enabling center Module Alignment.

vertical dividers


To stretch the Divider Module vertically, we’re going to add ‘480px’ to the top and bottom custom padding of our Divider Module. Et voilà, we have our vertical divider!

vertical dividers

Add Blurb Modules of the Previous Section to Column 1

The next thing we’re going to do is create a timeline using this vertical divider. Within the previous section, you’ll find three Blurb Modules. Go ahead and place each one of them in the first column of the row you’re working on, right below the Divider Module.

vertical dividers

Modify Blurb Module #1

Add Background Color

We’re going to use one of Divi’s efficiency features to speed up the process while editing our Blurb Modules. We’ll apply all changes to the first Blurb Module and afterwards, we’ll simply copy the module styles and add them to the other Blurb Modules in one click. Open your first Blurb Module and add ‘rgba(255,255,255,0.73)’ as the background color.

vertical dividers

Change Icon Font Size

The next thing you’ll need to do is change the Icon Font Size into ’65px’.

vertical dividers

Remove Spacing

We’ll also remove all the margin in the Spacing settings. Later on, we’ll add the margin to each Blurb Module individually because the values differ.

vertical dividers

Copy Blurb Module Style & Add it to Remaining Blurb Modules

Copy Blurb Module Styles

We’re done modifying the first Blurb Module. Right click on it and select ‘Copy Module Styles’. This will copy all the modifications we’ve just made.

vertical dividers

Paste Module Styles on Remaining Blurb Modules

And paste the module styles on the two remaining Blurb Modules. You’ll notice that it doesn’t change the content, it only changes the design settings which saves you a lot of time.

vertical dividers

Spacing Blurb Modules

Blurb Module #1

As mentioned before, the spacing of the Blurb Modules differs. The second one doesn’t have any but the first one uses ‘-900px’ for the top margin. Once you add this negative margin, you’ll notice the Blurb Modules become part of the timeline. Within the Visual Builder, it seems like the Divider Module is on top of the Blurb Modules. But once you exit the Visual Builder, you’ll watch everything fall into place so don’t worry about that.

vertical dividers

Blurb Module #3

Open your last Blurb Module next and add ‘150px’ to the bottom margin.

vertical dividers

Drop Image Module in Column 2

Locate Image

We can now move on to column 2! The only module we’ll need there is an Image Module. We’re reusing one that’s already on our page so go ahead and locate it:

vertical dividers

Drop Image in Column 2

Drop and drag it to your second column next.

vertical dividers

Change Spacing

To center it vertically, we’re going to add some margin to it:

  • Top Margin: 300px (Desktop), 30px (Tablet & Phone)
  • Bottom Margin: 50px (Tablet & Phone)

vertical dividers

Remove Previous & Next Section

We’re done creating our section! The last thing remaining to do is deleting the excessive sections.

vertical dividers

vertical dividers


Now that we’ve gone through all the steps, let’s take a final look at the result on different screen sizes.

vertical divider

Final Thoughts

In this use case blog post, we’ve shown you how to turn vertical dividers into vertical ones using Divi’s Moving Company Layout Pack. This approach is ideal if you want to create timelines on your page without having to use any additional code. It’s solely based on Divi’s built-in options. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday
Premade Layouts

Check Out These Related Posts

Divi Plugin Highlight: WP and Divi Icons Pro

Divi Plugin Highlight: WP and Divi Icons Pro

Posted on November 20, 2022 in Divi Resources

WP and Divi Icons Pro is a third-party plugin that adds over 3900 icons with 11 different styles to the Divi Builder. Icons include Font Awesome, Material Design, and custom icons. You can also upload your own and use them with all the others. In this post, we’ll take a close look at WP and Divi...

View Full Post
Divi Plugin Highlight: Divi Shop Builder

Divi Plugin Highlight: Divi Shop Builder

Posted on November 19, 2022 in Divi Resources

The Divi Shop Builder adds 14 new modules to the Divi Builder that allow you to customize the design of default WooCommerce pages with Divi. The plugin also comes with some premade shop layouts to give you a jump start on customizing your site. If you run an online store using WooCommerce and want...

View Full Post


  1. Donjete, as always. grat and excelent Job. Thank you.

    • Thanks a lot, Octavio! Happy you like it 🙂

  2. Great idea and so helpful. Thank you Donjete !!! How creative of you !!!

    • Glad I could help, Silvia! Thanks for the comment 🙂

  3. Very good idea as always, thank you Donjete.
    A lot of possibility of customization.
    We had to think about it

    • There are definitely a lot of things possible with Divi’s built-in options if you give it some thought! Thanks for the comment, Bruno 🙂

  4. I believe I followed all directions, but the divider doesn’t show. The blurbs appear to cover it up.

    Doesn’t something have to be translucent to see the divider through?

    • Hi Linda, make sure you give your Divider Module a gradient background + a semitransparent background color to the Blurb Modules. Hope that helps!

  5. Thanks this is great! Is it easily customisable for people with more than 3 steps? The process I’m trying to show is 10 steps and I’d like to use this layout for mobile. I’m guessing I can just keep adding blurbs and add to the padding of the divider?

    • Thanks for the comment, Joel! Yes, you can add as many steps as you want. Keep adding the padding to the Divider Module and make sure there’s enough negative top margin for the first Blurb Module.

  6. Very clever 🙂 There’s so much you can do by thinking outside the square a little.

    • The possibilities are really endless! Thanks for the comment, Neil. Happy you like it 🙂

  7. Great ideas only come from here. Thanks for the post.

    • Thanks, Dave! You’re very welcome 🙂

  8. Thanks again, great example!

    • You’re welcome, Joost. Happy you like it! 🙂

  9. Thanks Elegantthemes perfect example ♥

    • You’re welcome!! 🙂

  10. transform: rotate(90deg);


    • Where’s the fun in using CSS, Nelson 😉

  11. This layout is excellent in different screen sizes. Very nice tutorial.


    • Thanks Shane, glad you like it! 🙂

  12. Obviously a little CSS would have the same effect. But I really appreciate these balances of manipulation from our visual builder. It makes my brain elongate with Divi, and customers love receiving their designs and manipulating them without having to look at codes. Thank you!

    • Couldn’t have described it better! We love to show the community all the ins and outs of Divi! Thanks for the comment, Rangel 🙂

Join To Download Today