How to Turn Horizontal Dividers into Vertical Ones with Divi

Last Updated on September 16, 2022 by 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!

Preview

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

Spacing

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

Sizing

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

Spacing

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

Preview

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 Anniversary Sale

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

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

Access The Sale
Divi Anniversary
Premade Layouts

Check Out These Related Posts

Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Posted on March 18, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Modeling Agency Layout Pack that’ll help you get your next Modeling...

View Full Post
Download a Free Bistro Theme Builder Pack for Divi

Download a Free Bistro Theme Builder Pack for Divi

Posted on March 15, 2024 in Divi Resources

Divi Theme Builder Pack

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a...

View Full Post
Get a Free Art Therapist Layout Pack for Divi

Get a Free Art Therapist Layout Pack for Divi

Posted on March 11, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Art Therapist Layout Pack that’ll help you get your next Art Therapist...

View Full Post

24 Comments

  1. 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 🙂

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

    Thanks

    • Thanks Shane, glad you like it! 🙂

  3. transform: rotate(90deg);

    🙂

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

  4. Thanks Elegantthemes perfect example ♥

    • You’re welcome!! 🙂

  5. Thanks again, great example!

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

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

    • Thanks, Dave! You’re very welcome 🙂

  7. 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 🙂

  8. 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.

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

    http://doctorsofcourage.org/8293-2/.

    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!

  10. 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 🙂

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

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

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

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

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

👋 It's The Divi
Anniversary Sale!
Get The Deal
Before It's Gone!
Join To Download Today