How to Creatively Combine Row & Column Backgrounds with Divi's New Options

In this Divi tutorial, we’re going to show you how you can combine row and column background options to create stunning results. By choosing the right combinations and settings, you can achieve designs that enhance the overall look and feel of your website. To demonstrate what we’re talking about, we’ve made an example that we’ll help you build step by step. We’ve created this result by using the Divi built-in options only, so you won’t need to add any additional CSS.

Table Of Contents

1 Result
2 Switch to Visual Builder
3 Create Section
4 Add One-Column Row
5 Add Three-Column Row
6 Add One-Column Row
- 6.1 Row & Column Settings
7 Result
8 Final Thoughts

Result

If you follow this tutorial step by step, you’ll be able to achieve the following result:

Although we’ve used three different rows to achieve this result, it looks like they’re all part of a bigger picture. Let’s get started!

Switch to Visual Builder

Create a new page and enable the Divi Builder and switch over to the Visual Builder.

Create Section

The first thing we’ll need to do is create a new standard section. All the rows we’ll be creating and combining with each other will be part of this section. To create a box shadow effect on the rows, we’ll add the following section gradient background:

First Color: rgba(61,65,86,0.59)
Second Color: #f7f7f7
Gradient Type: Radial
Radial Direction: Bottom
Start Position: 31%
End Position: 76%

Add One-Column Row

The next thing we’ll need to do is add a one-column row to the section. This row will represent the following part of our end result:

Row & Column Settings

Make Row Fullwidth

Go ahead and make the row fullwidth within the Design tab.

Row Background Settings

Then, you can go back to the Content tab and add the following gradient background:

First Color: #3d4156
Second Color: rgba(114,81,114,0.91)
Gradient Type: Linear
Gradient Direction: 180deg
Start Position: 0%
End Position: 65%

Upload a background image (in this case a pattern) and choose ‘Multiply’ as your Background Image Blend.

Column Background Settings

Next, scroll down and assign the following gradient background settings to the column of your row:

First Color: rgba(255,255,255,0.15)
Second Color: rgba(214,44,104,0)
Column Gradient Type: Linear
Column Gradient Direction: 161deg
Column Start Position: 43%
Column End Position: 43%

Spacing

Continue by adding the following padding to your row:

Top: 20px
Right: 30px
Left: 30px

And the some padding to your column as well:

Top: 200px
Bottom: 200px

Add Text Module

The next thing we’ll do is add a Text Module to the row and make the following changes to the Text subcategory of that Text Module:

Text Font: Playfair Display
Text Font Size: 77px (Desktop), 64 (Tablet), 51 (Phone)
Text Color: #f7f7f7
Text Line Height: 1.7 (Desktop), 1em (Tablet & Phone)

Add Divider Module

Continue by adding a Divider Module below the Text Module you’ve just created and enable the ‘Show Divider’ option within the Visibility subcategory.

Scroll down that same tab and use ‘rgba(114,57,114,0.91)’ as the background color.

Move on to the Design tab and select ‘#3d4156’ as your divider color.

Open the Styles subcategory and use ‘Solid’ as your Divider Style and ‘Top’ as your Divider Position.

Next, assign the following settings to the Sizing subcategory:

Divider Weight: 11px
Height: 23px
Width: 0%
Module Alignment: Left

Last but not least, add a left padding of ‘48%’ to the Custom Padding option.