How to Recreate Elegant Theme’s Section Divider Examples with Divi

Section dividers are part of a long-awaited Divi update that changes the entire look and feel of any website. Within the Divi update announcement blog post, a ton of design examples we’re included and they simply blew us away.

To help you get started with these new section dividers, we’re going to show you how to recreate each one of these examples. Not only can you use them for your own website or next project, but they will also help you understand how section dividers within Divi work.

What You Need to Know

Before we show you all of the examples and how to recreate them, there are some things you need to know (and understand) before you start:

Always start off each section by choosing a background color
You can always add a gradient background on top of your background color, but the background color needs to be there
The color difference between neighboring sections allow a bottom divider to pick up on the color of the next section
Likewise, this color difference allows a top divider to pick up on the color of the previous section
We’re recreating the section dividers of each example only

Let’s See the Good Stuff

Let’s take a quick look at the different examples we’ll be recreating. After every example showcase, you can find a button that will take you to the tutorial steps of that specific example.

How to Recreate the Section Divider Examples with Divi

Subscribe To Our Youtube Channel

Recreate Example #1

section dividers

Section 1

Background Color

We’ve mentioned at the beginning of this post that you should always start off by choosing a background color for your section, even if you’re going to add a gradient background on top of it. For this example, use ‘#ff8790’.

section dividers

Gradient Background

On top of the background color, we’re adding the following beautiful gradient background:

First Color: #ff56f0
Second Color: #ffbe28
Gradient Type: Linear
Gradient Direction: 28deg
Start Position: 0%
End Position: 100%

section dividers

Top Divider

The first section you’re working on contains both a top and a bottom section divider. The divider style and settings are almost the same. However, the top divider is a lot more subtle which gives a kind of reflection effect. To achieve the exact same top section divider, use the following settings:

Divider Style: Find in List
Divider Color: rgba(255,255,255,0.13)
Divider Height: 200px

You can choose for yourself, depending on the modules and rows you’re using, whether or not you want the divider to appear underneath the section content or on top of it.

section dividers

Bottom Divider

The bottom divider of this example contains the following settings:

Divider Style: Find in List
Divider Color: Clear
Divider Height: 149px

section dividers

Section 2

Background Color

To create a beautiful transition between both sections, without having to set a color for the divider, we’re going to add a background color to the second section of this example. Although you could use whichever color you want, we’ve chosen the ‘#FFFFFF’ white color code to emphasize the contrast between both sections.

section dividers