How to Horizontally Overlap Row Borders with Divi

Creating page designs that interact isn’t always an easy task. Besides focusing on user experience, design principles and design trends, you also need to create something that matches your company branding and mesmerizes your visitors at first glance.

If you search our blog, you’ll find a ton of creative ways to approach your web design using Divi and Divi’s versatile built-in options. Today, we’re adding another creative approach to that list. We’ll show you how to creatively overlap row borders to create a stunning design. We’re making sure we have the same type of design on all screen sizes.

Let’s get to it!

Subscribe To Our Youtube Channel

Preview

We’ll create an example from scratch but before we dive into it, let’s take a look at the end result on different screen sizes.

Download Free Mightype Font

The first thing you’ll need to do is download the free Mightype hand-lettered font by AF studio. Go to the following link and enable the free download via email.

Add New Section

Spacing

Once you’ve downloaded the free font mentioned in the previous step, you can go ahead and create a new page. After you do so, enable the Visual Builder, open the first section of your new page and add some custom padding:

• Top Padding: 250px
• Bottom Padding: 250px

Add New Row

Column Structure

We’ll need two rows in total. We’ll start with the first one and clone it afterwards once it’s done. Add a new row to your section using the following column structure:

Column 1 Gradient Background

Without adding any modules yet, open your row settings and add the following column 1 gradient background:

• Color 1: #ffffff
• Color 2: rgba(0,255,233,0.25)
• Column Gradient Type: Radial
• Column Radial Direction: Left
• Column Start Position: 59%
• Column End Position: 59%
• Column Place Gradient Above Background Image: Yes

Column 1 Background Pattern

Continue by saving the following pattern to your computer and uploading it as your column 1 background image:

Once you’ve uploaded the pattern, make use of the following background image settings:

• Column Background Image Size: Actual Size
• Column Background Image Repeat: Space

Row Alignment

Enable right Row Alignment as well.

Sizing

We’re also using some custom Sizing settings for this row:

• Use Custom Width: Yes
• Custom Width: 950px

Spacing

These are the Spacing values you need to add next:

• Bottom Margin: 100px
• Right Margin: -30px (Tablet & Phone)
• Top Padding: 0px
• Bottom Padding: 0px

Border

Last but not least, add a border to the top, left and bottom of your row:

• Border Width: 14px
• Border Color: #000000
• Left Border Style: Double

Add Title Text Module

Add H2 Copy

We can now start adding our modules! Add a title Text Module and make sure your copy is H2.

Background Color

We’re going to interrupt the left border of our row by adding a white background color to the Text Module.

Upload Mightype Font

Locate the Mightype font on your computer next and upload it to your font library by clicking on the upload button in your list of fonts.

Select the Mightype font file, give your font a name and upload it to your font library.

H2 Text Settings

Once you’ve added the new font, go ahead and make some other changes to the H2 text settings:

• Heading 2 Font: Mightype
• Heading Text Color: #000000
• Heading 2 Text Size: 150px (Desktop),  100px (Tablet), 60px (Phone)

Spacing

For each one of the modules you want to overlap the row borders, you’ll need to add negative margin. This negative margin will only affect the module in question, not the row it was placed in. The negative margin you’ll need to add depends on the number of characters that are used in your copy.

• Top Margin: 200px
• Bottom Margin: 100px
• Left Margin: -35%
• Top Padding: 50px
• Bottom Padding: 50px

Blend Mode

And to make sure the Text Module background color only affects the border of the row, and not the column 1 background, enable the ‘Multiply’ Blend Mode in the Filters settings.

Add Description Text Module

Background Color

Right below the title Text Module, go ahead and add a description Text Module with a white background color.

Text Settings

Go to the text settings and make some changes:

• Text Size: 22px (Desktop), 18px (Tablet), 15px (Phone)
• Text Line Height: 1.8em
• Text Orientation: Center

Sizing

Decrease the Sizing of this Text Module to ‘96%’ next.

Spacing

Add some spacing as well:

• Bottom Margin: 200px
• Left Margin: -50%
• Top Padding: 20px
• Bottom Padding: 20px

Blend Mode

And use the ‘Multiply’ Blend Mode here too.

Clone Row

We’re done modifying the first row! Let’s create the same result but on the other side of the page. To save ourselves some time, we’ll clone the row we already have and make some changes along the way.

Change Row Settings

Column 1 Gradient Background

The first thing you’ll need to change is the column 1 gradient background:

• Color 2: rgba(255,187,0,0.33)
• Column Radial Direction: Right

Row Alignment

We want the row to appear on the other side, that’s why we’ll choose left Row Alignment.

Spacing

We’re adjusting the Spacing settings as well:

• Left Margin: -25% (Tablet & Phone)

Border

Remove the left border that’s been applied to your row and apply it to the right side instead:

• Right Border Width: 14px
• Right Border Color: #000000
• Right Border Style: Double

Change Title Text Module Settings

Spacing

Change the Spacing settings of your title Text Module next:

• Left Margin: 52% (Desktop & Tablet), 58% (Phone)
• Right Margin: -52% (Desktop & Tablet), 58% (Phone)

Change Description Text Settings

Spacing

Last but not least, the description Text Module needs some other Spacing values as well:

• Left Margin: 50%
• Right Margin: -50%

Preview

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

Final Thoughts

Overlapping row borders using Divi’s built-in options can bring your website the customization and personalization you might have been looking for. In this post, we’ve shown you exactly how to do that. We’ve recreated a beautiful example from scratch. This example looks great on all screen sizes and we’ve used Divi’s built-in options only! If you have any questions or suggestions, make sure you leave a comment in the comment section below!