How to Use Divi Divider Modules to Create Balance in Your Design

Posted on October 24, 2023 by Leave a Comment

How to Use Divi Divider Modules to Create Balance in Your Design
Blog / Divi Resources / How to Use Divi Divider Modules to Create Balance in Your Design

One of the easiest ways to create balance in your website design is by using Divi’s Divider module. Divi dividers are perfect for creating a sense of space between items on your page and establishing a balance in your design. They can also create white space in a design without simply creating blank areas. Not to mention, dividers are a great way to reflect your branding throughout the page, as they can be completely customized to your liking with colors, line styles, and more!

In this post, we will go over why dividers are helpful to include in your designs and show you some ways you can use dividers in your next web design project. Let’s get started!

Why You Should Use The Divider Module

Believe it or not, white space is one of the most important design elements on your website. It’s one of the first things you notice when visiting a website, and it plays a role in the way users scan through the elements on your website and interact with your page. Whitespace can help divide elements and create a sense of separation between sections of your website. It can also help direct the eye to the important elements of your page. For example, you can make an element stand out on the page just by increasing the white space around it. In fact, the white spaces between paragraphs and sections are often just as important to creating balance in your design as the text itself. When you’re designing a website, you don’t want the white space to feel empty or unbalanced—you want it to feel intentional so that it helps people move from one part of your page to the next more easily.

Divider modules are one of the most versatile tools in Divi and are straightforward to use. They help add white space to cluttered designs and can be a great way to break up your content. They can also be used to add color and style while creating balance between two elements on your page, like text modules or images. Here are some examples of how dividers can be used.

Define Headings

A great way to use dividers in your web design to create balance is to use them to define headings. By adding a divider between the heading text and the body text, you clearly distinguish the heading text from the body text. This can help your headings stand out more so your website visitors can easily skim through the page and find what they want.

In this example, we added a subtle divider line between the heading and the body to create some separation and balance the design. You can see it compared to the blurbs below without a divider.

Divi Use Divider Module to Create Balance in Design Example 1

Here’s another example of dividers used to distinguish headings. These dividers are styled to match the design of the page, which we will talk more about later.

Divi Use Divider Module to Create Balance in Design Example 2

Separate and Group Elements

Divider modules make it easy to create visual balance by separating sections of your website and clearly establishing what information is grouped and what information is not. Adding a simple divider module to your page to separate or group elements will help your visitors navigate your content and create a better overall user experience.

In this example, we added some light grey dividers to break up the major sections of the page and divide some bullet points. Because the divider is light and subtle, it isn’t very distracting to the overall design while still adding some separation to the page.

Divi Use Divider Module to Create Balance in Design Example 3

Reflect your Branding

Divi’s divider module can be customized with any color, so you can bring some of your branding colors into the layout. When combined with other divider settings like the width, weight, and line style, you can create unique dividers that reflect your branding while also bringing balance to your design.

In this example, we used a couple of different divider styles to show how you can modify the divider design to fit your branding. Not only are the divider modules functional and helpful to the user experience, it also becomes an opportunity to strengthen the design of your website and emphasize your brand colors.

Divi Use Divider Module to Create Balance in Design Example 4

How to Use Divi Divider Modules to Create Balance in Your Design

Now that we have discussed the benefits of adding dividers to your website design, let’s go ahead and get to the tutorial part of this article. We will add some dividers to a premade layout from the Divi Library.

Sneak Peek

Here is a preview of what we will design

Divi Use Divider Module to Create Balance in Design Final Design

What You Need to Get Started

Before we begin, install and activate the Divi Theme and make sure you have the latest version of Divi on your website.

Now, you are ready to start!

Create a New Page with a Premade Layout

Let’s start by using a premade layout from the Divi library. For this design, we will use the Virtual Assistant Landing Page from the Virtual Assistant Layout Pack.

Add a new page to your website and give it a title, then select the option to Use Divi Builder.

Divi Use Divider Module to Create Balance in Design Use Builder

We will use a premade layout from the Divi library for this example, so select Browse Layouts.

Divi Use Divider Module to Create Balance in Design Browse Layouts

Search for and select the Virtual Assistant Landing Page.

Divi Use Divider Module to Create Balance in Design Find Layout

Select Use This Layout to add the layout to your page.

Divi Use Divider Module to Create Balance in Design Use Layout

Now, we are ready to build our design.

Add Divider Modules to Create Balance

Modifying the Hero Section

For our first modification, we will add a divider and some body text to the hero section. First, open the settings for the “Virtual Assistant” text and navigate to the Heading Text settings under the Design tab. Change the font size.

  • Heading Text Size (Desktop): 80px

Divi Use Divider Module to Create Balance in Design Heading Text

Next, we’ll add the divider module below the “Virtual Assistant” text.

Divi Use Divider Module to Create Balance in Design Add Divider

Open the divider settings and navigate to the Line settings under the Design tab. Set the Line color.

  • Line Color: #000000

Divi Use Divider Module to Create Balance in Design Line Color

Next, modify the width and module alignment under the Sizing options.

  • Width: 75%
  • Module Alignment: Left

Divi Use Divider Module to Create Balance in Design Width

Then, set the bottom margin in the Spacing settings.

  • Margin Bottom: 0px

Divi Use Divider Module to Create Balance in Design Margin

Now add a text module below the divider and add the following text.

  • Body: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.

Divi Use Divider Module to Create Balance in Design Text

Open the text module settings and open the Text settings under the Design tab. Set the text size and line height.

  • Text Size: 16px
  • Text Line Height: 1.8em

Divi Use Divider Module to Create Balance in Design Text Size Line Height

The last modification we need to make in this section is to change the scroll effects for the black bar so that it doesn’t cover the body text we added. Open the image settings, then navigate to the scroll effects section of the Advanced tab. Change the Mid Offset and the Ending Offset.

  • Mid Offset: 0.5
  • Ending Offset: 0

Divi Use Divider Module to Create Balance in Design Vertical Motion

Modifying the Features Section

Next, let’s move on to the section with the “Save Time” “Stay Organized” and “Drive Revenue” blurbs. To add more balance to this layout, we will be adding dividers between the headings and the body. Because these are blurb modules, we can’t add a divider between the heading and the body just yet. First, we’ll have to move the body text to a separate text module so that we can add the divider.

“Save Time” Blurb

Copy the body text from the “Save Time” module, then delete the text from the blurb module, leaving just the heading and the icon.

Divi Use Divider Module to Create Balance in Design Copy

Navigate to the Spacing settings for the blurb module and set the bottom margin.

  • Margin Bottom: 0px

Divi Use Divider Module to Create Balance in Design Bottom Margin

Then, add a new text module below the blurb and paste the body text.

Divi Use Divider Module to Create Balance in Design Add Text

Open the text module setting and customize the text size and line height.

  • Text Size: 16px
  • Text Line Height: 1.8em

Divi Use Divider Module to Create Balance in Design Text Size

This module will be left-aligned on desktop and center-aligned on tablets and mobile devices. Use the responsive options to set different alignment options for different screens.

  • Text Alignment Desktop: Left
  • Text Alignment Tablet: Center
  • Text Alignment Mobile: Center

Divi Use Divider Module to Create Balance in Design Text Alignment

Next, open the Sizing options and set the Max Width. Additionally, use the responsive options to set the module alignment.

  • Max Width: 400px
  • Module Alignment Desktop: Left
  • Module Alignment Tablet: Center
  • Module Alignment Mobile: Center

Divi Use Divider Module to Create Balance in Design Module Alignment

Now, we can add the divider module between the blurb and text modules.

Divi Use Divider Module to Create Balance in Design Add Divider

Open the Divider settings. Under the Line settings, set the line color. We will pull in the brown color to match the page’s theme.

  • Line Color: #a78e6e

Divi Use Divider Module to Create Balance in Design Line Color

Next, open the Sizing settings and use the responsive options to set the width and module alignment as follows:

  • Width Desktop: 35%
  • Width Tablet: 40%
  • Width Mobile: 50%
  • Module Alignment Desktop: Left
  • Module Alignment Tablet: Center
  • Module Alignment Mobile: Center

Divi Use Divider Module to Create Balance in Design Width

Finally, remove the bottom margin.

  • Margin Bottom: 0px

Divi Use Divider Module to Create Balance in Design Margin Bottom

“Stay Organized” Blurb

Now, let’s modify the “Stay Organized” blurb. Remove the text from the blurb.

Divi Use Divider Module to Create Balance in Design Remove Text

Then, remove the bottom margin.

Divi Use Divider Module to Create Balance in Design Margin Bottom

To save some steps, copy the text module from the “Save Time” section and paste it below the “Stay Organized” blurb.

Divi Use Divider Module to Create Balance in Design Duplicate Text

We need to adjust the alignment of the text module, so first, open the Text settings under the Design tab. Set the Text Alignment on Desktop.

  • Text Alignment Desktop: Right

Divi Use Divider Module to Create Balance in Design Align Right

Next, open the Sizing settings and set the Module Alignment on Desktop.

  • Module Alignment Desktop: Right

Divi Use Divider Module to Create Balance in Design Align Right

Copy the divider module from the “Save Time” section and paste it between the Stay Organized blurb and the body text module.

Divi Use Divider Module to Create Balance in Design Duplicate Divider

Open the divider settings and change the module alignment in the Sizing section.

  • Module Alignment Desktop: Right

Divi Use Divider Module to Create Balance in Design Align Right

“Drive Revenue” Blurb

Finally, let’s modify the Drive Revenue blurb. Start by removing the text from the blurb.

Divi Use Divider Module to Create Balance in Design Delete Text

Next, remove the bottom margin.

  • Margin Bottom: 0px

Divi Use Divider Module to Create Balance in Design Margin Bottom

Copy the text module from the “Stay Organized” blurb and paste it below the “Drive Revenue” blurb.

Divi Use Divider Module to Create Balance in Design Duplicate

Then, open the text module settings and adjust the text alignment.

  • Text Alignment: Center

Divi Use Divider Module to Create Balance in Design Align Center

Under the Sizing settings, adjust the module alignment.

  • Module Alignment: Center

Divi Use Divider Module to Create Balance in Design Module Align Center

Then, copy the divider from the “Stay Organized” section and paste it between our blurb and text module.

Open the Divider settings and navigate to the Sizing section. Set the module alignment to center.

  • Module Alignment: Center

Divi Use Divider Module to Create Balance in Design Align Center 2

Now, our section design is complete, and as you can see, the dividers help define and separate the heading from the body and also help to bring some balance and additional design elements to the layout.

Add Dividers to the “How I Can Help” Section

For our next modification, we will add dividers to the “How I Can Help” section. Specifically, we will add dividers under the “Communication” “Organization” and “Administration” headings.

Add a new divider module below the “Communication” heading.

Divi Use Divider Module to Create Balance in Design Add Divider

Open the Divider setting and change the line color.

  • Line Color: #a78e6e

Divi Use Divider Module to Create Balance in Design Line Coor

Next, modify the width and module alignment in the Sizing settings.

  • Width: 34%
  • Module Alignment: Center

Divi Use Divider Module to Create Balance in Design Width Align

Then, copy the divider module and paste it under the “Organization” and “Administration” headings.

Divi Use Divider Module to Create Balance in Design Duplicate Dividers

Happy Clients Section

For our final modification, we will add a new section to this page to display testimonial quotes, which we will separate with dividers. Let’s get started.

Scroll down the page and add a new regular section between the “10 Reasons to Hire a Virtual Assistant” section and the “Let’s Chat” section.

Divi Use Divider Module to Create Balance in Design New Section

Then, add a row with a single column.

Divi Use Divider Module to Create Balance in Design New Row

Add Icon

Add an icon module to the new row.

Divi Use Divider Module to Create Balance in Design Icon Module

Open the icon settings and select the quote icon.

Divi Use Divider Module to Create Balance in Design Add Quote Icon

Customize the icon color and size.

  • Icon Color: #e4ded7
  • Icon Size: 50px

Divi Use Divider Module to Create Balance in Design Icon Color Size

Add Heading

Next, add a text module below the icon.

Divi Use Divider Module to Create Balance in Design Add Text Module

Set the text to “Happy Clients”.

  • H2: Happy Clients

Divi Use Divider Module to Create Balance in Design Happy Clients Text

Open the heading settings and customize the styles as follows:

  • Heading 2 Font: Merriweather
  • Heading 2 Font Weight: Light

Divi Use Divider Module to Create Balance in Design Font

Next, modify the text size using the responsive options. Additionally, modify the line height.

  • Heading 2 Text Size Desktop: 70px
  • Heading 2 Text Size Tablet: 40px
  • Heading 2 Text Size Mobile: 30px
  • Heading 2 Line Height: 1.4em

Divi Use Divider Module to Create Balance in Design H2 Size

Move to the Sizing options and customize the max width and alignment.

  • Max Width: 800px
  • Module Alignment: Center

Divi Use Divider Module to Create Balance in Design Max Width

Add Body Text

Add another text module below the heading text.

Divi Use Divider Module to Create Balance in Design Add Text Module

Then, add the following text to the body.

  • “Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.”
    Divi Client, Elegant Themes

Divi Use Divider Module to Create Balance in Design Testimonial Text

Under the design tab, modify the font.

  • Text Font: Merriweather.

Divi Use Divider Module to Create Balance in Design Text Font

Next, modify the text size by using the responsive options. Additionally, modify the line height.

  • Text Size Desktop: 16px
  • Text Size Tablet: 14px
  • Text Size Mobile: 14px
  • Line Height: 2.2em

Divi Use Divider Module to Create Balance in Design Text Size Height

Add Divider

Add a divider module below the testimonial text.

Divi Use Divider Module to Create Balance in Design New Divider

Under the line settings, set the line color and style.

  • Line Color:
  • Line Style: Double

Divi Use Divider Module to Create Balance in Design Divider Line Style

Next, open the sizing settings and customize as follows:

  • Divider Weight: 6px
  • Width: 25%
  • Module Alignment: Center

Divider Sizing

Then, duplicate the body text module twice so there are three body text modules, and duplicate the divider once so that there are two dividers. Arrange the modules so that the dividers are between the three text modules, like in the screenshot below:

Divi Use Divider Module to Create Balance in Design Text Divider Order

Now, our design is complete.

Final Result

Let’s take a look at our final design. You can see how we have added balance and structure throughout the page by adding dividers.

Divi Use Divider Module to Create Balance in Design Final Design

Final Thoughts

Hopefully, this article has shown you how dividers are a simple and effective way to create balance and add whitespace to your website design. With all of the customization options available for the divider module, you can create beautiful-looking dividers that add to the overall design of your website and reflect your brand style and colors. If you want to learn more about what you can do with the divider module, here is a tutorial for 10 Fun Ways to Use The Divider Module. How do you use the divider module in your web design projects? Let us know in the comments!

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

😍 20 Unique Divi Products You’ve Never Heard Of

😍 20 Unique Divi Products You’ve Never Heard Of

Posted on December 10, 2023 in Divi Resources

Our stellar Cyber Monday sale is quickly coming to a close, but there’s still plenty of time to take advantage of some killer deals on Divi memberships, products, and services. Read on to learn about everything on sale in the Divi ecosystem and some fantastic deals on lesser-known Divi...

View Full Post
👋 Download The Free Cyber Monday App Website Pack!

👋 Download The Free Cyber Monday App Website Pack!

Posted on December 7, 2023 in General News

This year as a special thank you to everyone who purchases an Elegant Themes Membership during our Cyber Monday Sale (and to our wonderful Lifetime customers!) we’ve created several exclusive gifts from our staff to you. Today we’re highlighting the first Divi Website Pack. This vibrant...

View Full Post

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

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