Do you want to combine the background masks and the separator of Divi to have sublime and unique backgrounds?
The combination of background masks with section dividers in Divi adds another layer of creativity to an already powerful arsenal of background design options.
In addition to background options, section dividers also allow users to enhance their background designs.
In this tutorial, we will show you how to combine background masks with section separators in Divi. We will give you step-by-step instructions on how to make a background design for a Divi section using this technique.
Plus, we'll even explain how to create alternate designs with just a few simple tweaks.
Let's start!
Preview
Here is a preview of the drawings in this tutorial.
The concept
The basic concept of this tutorial is to combine a background mask and section dividers to create even more unique mask shapes.
First, we add a background mask.
Next, we add section dividers to creatively complete the shape of the mask.
Create a new page with Divi Builder
From the WordPress dashboard, go to Pages > Add New to create a new page.
Give it a title that makes sense to you and click Use Divi Builder
Then click Start Building (Build From Scratch)
After that, you will have a blank canvas to start designing in Divi.
Combine Background Masks and Dividers in Divi
Add section size and spacing
To begin, we'll add the size and spacing to the existing section in the constructor. We will suspend adding a line or all contents so we can focus on designing the background of the section.
Open section settings. Under the tab Design, update the size and spacing as follows:
- Min Height: 50 vw
- Padding (Top and Bottom): 0px
Create the background gradient
Once the section has a certain height, we are ready to add the background gradient to the section.
Under the tab Content, click on the tab Background Gradient under background options. Then add a gradient as follows:
- Gradient Stops
- 20%: #1a2a6c
- 60%: #b21f1f
- 100%: #fdbb2d
Create the background mask
Now that we have a color gradient, we're ready to create a background mask.
Under the tab BackgroundMask, update the following:
- Mask: Herringbone
- Mask Color: #000000
- Transform: Inverted
- Mask Aspect Ratio: see screenshot
Add section separators (Dividers)
With our mask in place, we can further modify the shape of the mask using section dividers.
In this example, we'll add a half-circle section divider at the top and bottom. This will compress the background mask to look more like a fancy arrow design.
To do this, click on the tab Design and add the following separators:
First, add a top separator under the tab TOP.
- Divider Style: See screenshot
- Color: #000
- Divider Height: 10 vw
Next, add a bottom separator under the tab Bottom.
- Divider Style: See screenshot
- Color: #000
- Divider Height: 10 vw
- Divider Flip: Vertical Flip
The result
Here is the result so far.
Adjust background options and dividers for more design
Now that you have the basic idea in place, we can easily play around with the section dividers to create more patterns.
See also: Divi: How to use the "Gradient Builder" to beautify your images
Alternate design #1
For our first alternate design, we'll rotate the existing background mask. Next we will replace the semicircular section dividers with triangles.
To do this, open the existing section settings, click on the tab BackgroundMask and update the following:
- Mask Transform: vertical flip, rotation
- Mask Aspect Ratio: see screenshot
Next, update the section separators as follows:
Upper divider
- Divider Style: See screenshot
- Divider Height: 13 vw
Bottom divider
- Divider Style: See screenshot
- Height: 13 vw
- Divider Flip: deactivate
The result
Here is the result.
Alternate design #2
For our second and final alternate design, we're going to replace the mask rafters by the mask Diagonal Bars 2 and also give it a new top section divider.
To do this, open the existing section settings, click on the tab BackgroundMask and update the following:
- Mask: Diagonal Bars 2
- Mask Transform: horizontal flip
- Aspect Ratio: see screenshot
Next, update the section separators as follows:
Upper divider
- Divider Style: See screenshot
- Divider Flip: Horizontal Flip
Bottom divider
- Divider Style: None
The result
Here is the result.
Final results
To give you a better idea of ​​what these backgrounds will look like with contents, we added a row to a column with a title.
Read also: Divi: How to create a sticky background mask
Download DIVI now!!!
Conclusion
Combining masks and section dividers for background designs opens up more possibilities to create unique shapes for these built-in masks.
Feel free to explore different combinations on your own.
We hope this tutorial will inspire you for your next Divi projects. If you have any concerns or suggestions, find us in the comments section to talk about it.
You can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites.
Do not hesitate to also consult our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
