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 site Web. In the Divi Update Announcement Blog a ton of design examples we are included and they just blew us away.

To help you get started with these new section separators, we will show you how to recreate each of these examples. You can not only use them for your own website or your next project, but also to help you understand how Divi section separators work.

What you need to know

Before showing you all the examples and how to recreate them, there are things you need to know (and understand) before you begin:

Always start each section by choosing a background color
You can still add a gradient background above your background color, but the background color must be present
The difference in color between the adjacent sections allows a bottom divider to take the color of the following section
Similarly, this difference in color allows a superior divider to take the color of the previous section
We recreate the section dividers of each example only

Let's see the good things

Let's take a look at the different examples we are going to recreate. After each sample presentation, you can find a button that will take you to the tutorial steps in this specific example.

Example # 1

Recreate this example

Example 2

Recreate this example

Example # 3

Recreate this example

Example # 4

Recreate this example

Example # 5

Recreate this example

Example # 6

Recreate this example

Example # 7

Recreate this example

Example # 8

Recreate this example

How to recreate the examples Section divider with Divi

Subscribe to our Youtube channel

Recreate Example # 1

Section 1

Background color

We mentioned at the beginning of this post that you should always start by choosing a background color for your section, even if you are going to add a gradient background over it. For this example, use & # 39; # ff8790 & # 39;

Gradient background

In addition to the color of the background, we add the following beautiful gradient background:

First color: # ff56f0
Second color: # ffbe28
Gradient type: Linear
Gradient direction: 28deg
Starting position: 0%
Final position: 100%

Upper divider

The first section you are working on contains both an upper section divider and a lower section section. The style and parameters of the divisor are almost the same. However, the top divisor is much more subtle which gives a kind of reflection effect. To get exactly the same top section divider, use the following parameters:

Divider Style: Find in the list
Color of the partition: rgba (255,255,255,0.13)
Divider Height: 200px

You can choose, depending on the modules and rows you use, whether or not you want the separator to appear under or above the content of the section.

Background divider

The lower divisor of this example contains the following parameters:

Divider Style: Find in the list
Separator Color: Clear
Divider Height: 149px

Section 2

Background color

To create a nice transition between the two sections, without having to define a color for the divider, we will add a background color to the second section of this example. Although you can use the color of your choice, we chose the white color code "#FFFFFF" to emphasize the contrast between the two sections.

Recreate Example # 2

Section 1

Background color

Again, start by choosing a background color for your first section. In this case, we use & # 39; # ff2a00 & # 39 ;.

Gradient background

In addition to the background color of your section, add the following gradient background:

First color: # ff2a00
Second color: # ffc9c9
Gradient type: Linear
Gradient direction: 90deg
Starting position: 0%
Final position: 100%

Upper divider

Go to the Design tab of your section, open the sub-category Dividers and use the following section divisor:

Divider Style: Find in the list
Separator Color: Clear
Divider Height: 274px
Horizontal Repeat Divider: 0.6x

Background divider

The bottom divisor we use is almost the same. One of the things that is different is that this divider has to be flipped horizontally. Use the following parameters to reach the same bottom divider:

Divider Style: Find in the list
Color of the separator: # ff2a00
Divider Height: 277px
Horizontal Repeat Divider: 0.7x
Flip divider: Horizontal

Section 2

Background color

We are using, again, # ff2a00 & # 39; as the background color for our second section.

Gradient background

In addition to our background color, let's add a gradient background. We match the gradient background of the second section with the background separator color used in the previous section. This will allow us to have a smooth transition. The exact gradient background used is as follows:

First color: # ff2a00
Second color: # 9b47ef
Gradient type: Linear
Gradient direction: 180deg
Starting position: 0%
Final position: 87%

Background divider

The next and last divisor we will need for this example is the following lower divisor:

Divider Style: Find in the list
Separator Color: Clear
Divider Height: 300px
Divider Horizontal repetition: 1x
Divider Arrangement: Under the contents of the section

We place the section divider under the contents of the section provided to overlap the laptop model with the divider.

Recreate Example # 3

Section 1

Background color

Start by adding the white color code # FFFFFF & # 39; in the first section containing all the content you share.

Background divider

The lower separator you add to this section is intended to perfectly match the next section. One thing that will help you do this is to keep the color of the divider clear. Here are the parameters you need for the lower separator of your first section:

Divider Style: Find in the list
Separator Color: Clear
Divider Height: 282px
Divider Horizontal Repetition: 0x
Flip divider: Horizontal
Separation arrangement: on the content of the section

Section 2

Background color

We choose the & # 39; # 7d3bd2 ​​& # 39; as the background color of our next section. This is the color that the bottom divider of your previous section will inherit.

Gradient background

In addition to the background color, we add the following gradient background:

First color: # 7125ce
Second color: # 150044
Gradient type: Linear
Gradient direction: 180deg
Starting position: 0%
Final position: 100%

Upper divider

Go to the Design tab of your section, open the Dividers sub-category and use the following top separator:

Divider Style: Find in the list
Color of the partition: rgba (255,255,255,0.05)
Divider Height: 337px
Horizontal Repeat Divider: 0.75x
Flip divider: Horizontal
Divider Arrangement: Under the contents of the section

Background divider

Next, we use a bottom divider that corresponds to our upper divisor with the following parameters:

Divider Style: Find in the list
Separator Color: Clear
Divider Height: 337px
Horizontal Repeat Divider: 0.75x
Flip divider: Horizontal
Divider layout: Sub section content Section 3

Background color

For the last section of this example, add "# 474ab6" as the background color.

Gradient background

To give an even better look to our example, we use the following gradient background in addition to the background color:

First color: # 474ab6
Second color: # 9271f6
Gradient type: Linear
Gradient direction: 180deg
Starting position: 0%
Final position: 100%

Background divider

Last but not least, we apply the following lower separator for this section:

Divider Style: Find in the list
Separator Color: Clear
Divider Height: 200px
Divider Horizontal repetition: 1x
Flip divider: Horizontal
Divider Arrangement: Under the contents of the section

Recreate Example # 4

Section 1

Background color

Add a new section (with all the lines and modules you need) and add "#FFFFFF" as the background color of this section.

Section 2

Background color

The following section will appreciate "# 24a5f6" as the background color.

Gradient background

With in addition, the following gradient background:

First color: # 00fff6
Second color: # 5824f4
Gradient type: Linear
Gradient Direction: 167deg
Starting position: 0%
Final position: 100%

Upper divider

Go to Design tab, open the Dividers sub-category and add the following top separator to your section:

Divider Style: Find in the list
Separator Color: Clear
Divider Height: 204px
Divider Horizontal repetition: 1

Background divider

For the bottom divider we use the following parameters instead:

Divider Style: Find in the list
Separator Color: Clear
Divider Height: 407px
Divider Horizontal repetition: 1x
Flip divider: Horizontal

Recreate Example # 5

Section 1

Background color

The first section we use for this example contains "#FFFFFF" as the background color.

Background divider

We also apply the lower corrugated divider to this section using the following parameters:

Divider Style: Find in the list
Separator Color: Clear
Divider Height: 192px (desktop), 140px (tablet and phone)
Divider Horizontal Repetition: 0x

Section 2

Background color

The second section we use does not include any section separator. The only thing you will have to do is add '# 00c9ed'. as background color.

Section 3

Background color

The last section uses "# 64bde0" as the background color.

Gradient background

In addition to that, we combine a gradient background with a background image. Add the following gradient background to your section:

First color: rgba (30,135,255,0.3)
Second color: #ffffff
Gradient type: Linear
Gradient direction: 180deg
Starting position: 39%
Final position: 100%
Place the gradient over the background image: Yes

Background image

Just after adding the gradient background, add a background image of your choice to your section in combination with the following settings:

Size of the background image: cover
Position of the background image: Center
Repeating the background image
Mixing background image: Normal

Upper divider

Go to Design tab, open the Dividers sub-category and use the following top separator for your section:

Divider Style: Find in the list
Separator Color: Clear
Divider Height: 300px (desktop), 180px (tablet and phone)
Horizontal Repeat Divider: 0.9x

Background divider

To end this example, use the following lower divisor for this last section:

Divider Style: Find in the list
Color of the separator: rgba (247 247 247,0.29)
Divider Height: 300px (desktop), 180px (tablet and phone)
Horizontal Repeat Divider: 0.9x

Recreate Example # 6

Section 1

Background color

Choose '# 166dde & # 39; as the background color for the first section of this example.

Gradient background

Next, add the following gradient background to this section:

First color: # 1e87ff
Second color: # 001f77
Gradient type: Linear
Gradient Direction: 216deg
Starting position: 42%
Final position: 100%

Upper divider

The upper separator that we use for this section has the following parameters:

Divider Style: Find in the list
Separator Color: #FFFFFF
Divider Height: 300px (desktop), 100px (tablet and phone)
Divider Horizontal repetition: 1x
Divider Arrangement: Under the contents of the section

Background divider

And it also contains a bottom divider:

Divider Style: Find in the list
Separator Color: Clear
Divider Height: 300px
Divider Horizontal Repetition: 0x
Divider Arrangement: On the content of the section

Section 2

Background color

The second section contains "# 1e87ff" as the background color.

Gradient background

In combination with the following gradient subtle background:

First color: # 1e87ff
Second color: # 1e4fff
Gradient type: Linear
Gradient direction: 180deg
Starting position: 0%
Final position: 100%

Background divider

And last but not least; we add a bottom divider to this second section as well to complete our example:

Divider Style: Find in the list
Separator Color: Clear
Divider Height: 500px (desktop), 280px (tablet), 200px (phone)

Recreate Example # 7

Section 1

Background color

Add a new section, add the necessary lines and modules, and select "#FFFFFF" as the background color.

Background divider

Go directly to the Design tab, open the Dividers sub-category and use the following lower separator:

Divider Style: Find in the list
Separator Color: Clear
Divider Height: 400px (desktop), 180px (tablet), 120px (phone)
Divider Horizontal Repetition: 0x
Divider Arrangement: Under the contents of the section

Section 2

Background color

The background color that you apply to your second section will automatically be applied to the lower separator of your previous section ( if the separator color is clear). We use the color code & # 39; # fcd21d & # 39; as the background color of our second section.

Background divider

Finally, add the following lower section separator to your second section:

Divider Style: Find in the list
Separator Color: #FFFFFF
Divider Height: 700px (desktop), 140px (tablet and phone)
Divider Horizontal repetition: 1x
Divider Arrangement: Under the contents of the section

Recreate Example # 8

Section 1

Background color

Start by adding # fcfcfc & # 39; as the background color of the first section.

Background divider

Go to Design tab, open the subcategory Divider and use the following lower separator:

Divider Style: Find in the list
Separator Color: Clear
Divider Height: 69px (desktop), 46px (tablet), 38px (phone)

Section 2

Background color

Finish this example by adding # 770fff & # 39; as the background color of your second section.

Final Thoughts

In this post, we reviewed some awesome section dividers that you can add to any type of website. Recreating these examples allows you to quickly understand how section separators work and how you can use them to impress visitors and make the most of the site you create without the need for photo editing software. If you have any questions or suggestions make sure you leave a comment in the comments section below!

.divi_cta {background-color: # 8f43ee; color: #fff; font size: 20px; font-weight: fat; upholstery: 20px; text-align: center; viewing block; text-decoration: none; border-radius: 4px;}. divi_cta: hover {text-decoration: none; background color: # 7d37d6;}. divi_cta_red {background-color: # db1c1c;} divi_cta_red: hover {background-color: # c51a1a;}

The Post How to recreate examples of elegant theme section divider with Divi appeared first on Blog of Elegant Themes .