Combining background mask with phase dividers in Divi provides any other layer of creativity to an already tough arsenal of background design choices. In case you haven’t had a lot enjoy with Divi’s background choices, you’re unquestionably lacking out. One handy, but tough, choice offers you the facility so as to add a background masks for your background gradient (or symbol) in only some clicks. Along with background choices, phase dividers additionally give customers the facility to strengthen their background designs.

On this educational, we’re going to display you the right way to mix background mask with phase dividers in Divi. We’ll provide you with step by step directions on the right way to whole a background design for a Divi phase the use of this method. Plus, we’ll even quilt the right way to create some choice designs with only some easy tweaks.

Experience!

Sneak Peek

Here’s a fast take a look at the designs from this educational.

The Thought

The fundamental thought for this educational is to mix a background masks and phase dividers to create much more distinctive masks shapes.

First, we upload a background masks.

Then we upload phase dividers to enrich the masks form in an inventive method.

Obtain the Structure for FREE

To put your palms at the designs from this educational, you’ll first wish to obtain it the use of the button beneath. To realize
get right of entry to to the obtain it is very important subscribe to our Divi Day-to-day e mail listing through the use of the shape beneath. As a brand new
subscriber, you’ll obtain much more Divi goodness and a loose Divi Structure pack each and every Monday! In case you’re already at the
listing, merely input your e mail deal with beneath and click on obtain. You’ll now not be “resubscribed” or obtain additional emails.

Download the Files

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:ahead of { border-top-color: #ffffff !vital; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:ahead of { border-top-color: clear !vital; border-left-color: #ffffff !vital; }
@media most effective display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of { border-top-color: #ffffff !vital; border-left-color: clear !vital; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !vital; border-left-color: clear !vital; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:ahead of { background: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !vital } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 sturdy { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p sturdy, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !vital;}

See also  🤔 Divi Black Friday Perks: What Are They? (Perks + Plus VIP)

Obtain For Loose

Sign up for the Divi Publication and we will be able to e mail you a replica of without equal Divi Touchdown Web page Structure Pack, plus lots of alternative wonderful and loose Divi sources, guidelines and tips. Practice alongside and you’ll be a Divi grasp very quickly. In case you are already subscribed merely kind on your e mail deal with beneath and click on obtain to get right of entry to the format pack.

DOWNLOAD

You’ve gotten effectively subscribed. Please test your e mail deal with to substantiate your subscription and get get right of entry to to loose weekly Divi format packs!

To import the phase format for your Divi Library, do the next:

1. Navigate to the Divi Library.
2. Click on the Import button on the peak of the web page.
3. Within the portability popup, choose the import tab
4. Make a choice the obtain document out of your laptop (be sure you unzip the document first and use the JSON document).
5. Then click on the import button.

As soon as finished, the phase format might be to be had within the Divi Builder.

Let’s get to the educational, we could?

What You Want to Get Began

To get began, it is very important do the next:

1. In case you haven’t but, install and activate the Divi Theme.
2. Create a brand new web page in WordPress and use the Divi Builder to edit the web page at the entrance finish (visible builder).
3. Make a choice the choice “Construct From Scratch”.
4. Now have a clean canvas to begin designing in Divi!

The way to Mix Background Mask and Dividers in Divi

1. Upload Phase Dimension and Spacing

To start out issues off, we’re going to upload measurement and spacing to the prevailing phase within the builder. We’re going to dangle off including a row or any content material so we will be able to pay attention to the background design of the phase

Open the settings for the Phase. Underneath the Design tab, replace the dimensions and spacing as follows:

• Min Top: 50vw
• Padding: 0px peak, 0px backside

The use of the VW duration unit for top may appear abnormal. Alternatively, since we’re going to be the use of the VW duration unit to measurement our background parts, this may occasionally ensure the design scales fluidly on other browser widths.

2. Create the Background Gradient

As soon as the phase has some top, we’re able so as to add the background gradient to the phase. This will likely give us some background colour in order that we will be able to show off the background masks and divider combo in a while.

Underneath the Content material tab, click on the background gradient tab below the background choices. Then upload a gradient as follows:

• Colour Forestall 1: #1a2a6c (at 20%)
• Colour Forestall 2: #b21f1f (at 60%)
• Colour Forestall 2: #fdbb2d (at 100%)

3. Create the Background Masks

Now that we have got a colour gradient, we’re able to create a background masks.

Underneath the Background Masks tab, replace the next:

• Masks: Chevrons
• Masks Colour: #000
• Masks Change into: Inverted
• Masks Side Ratio: See Screenshot

4. Upload the Phase Background Dividers

As soon as our masks is in position, we will be able to alter the covering form additional through the use of phase dividers. On this instance, we’re going to upload a half-circle phase divider to the highest and backside. This will likely squeeze the background masks to appear extra like a posh arrow design.

To try this, click on the Design tab and upload the next Dividers:

First, upload a peak divider below the Best tab.

• Divider Taste: See Screenshot
• Divider Colour: #000
• Divider Top: 10vw

Subsequent, upload a backside divider below the Backside tab.

• Divider Taste: See Screenshot
• Divider Colour: #000
• Divider Top: 10vw
• Divider Turn: Vertical Turn

The Outcome

Here’s the outcome thus far.

Tweaking the Background Choices and Dividers for Extra Designs

Now that you’ve the fundamental concept in position, we will be able to simply mess around with the background choices phase dividers to create extra designs.

Change Design #1

For our first choice design, we’re going to rotate the prevailing background masks and substitute the half-circle phase dividers with triangles.

To try this, open the prevailing phase settings, click on the background Masks tab, and replace the next:

• Masks Change into: Vertical Turn, Rotate
• Masks Side Ratio: See Screenshot

Subsequent, replace the Phase Dividers as follows:

Best Divider

• Divider Taste: See Screenshot
• Divider Top: 13vw

Backside Divider

• Divider Taste: See Screenshot
• Divider Top: 13vw
• Divider Turn: disable

The Outcome

Here’s the outcome.

Change Design #2

For our 2d and ultimate choice design, we’re going to substitute the Chevrons Masks with the Diagonal Bars 2 Masks and likewise give it a brand new peak phase divider so as to add a delicate swooshing impact to the design.

To try this, open the prevailing phase settings, click on the background Masks tab, and replace the next:

• Masks: Diagonal Bars 2
• Masks Change into: Horizontal Turn
• Masks Side Ratio: See Screenshot

Subsequent, replace the Phase Dividers as follows:

Best Divider

• Divider Taste: See Screenshot
• Divider Turn: Horiizontal Turn

Backside Divider

• Divider Taste: None

The Outcome

Here’s the outcome.

Ultimate Effects

To provide you with a greater concept of what those backgrounds will appear to be with some content material, I added a single-column row with a big heading located within the heart of the phase. I additionally added an extra design for every that incorporates a picture with a mix mode.

Take a look at them out!

To discover the settings used for the content material and the pictures, be happy to obtain the loose format for this educational (see above) which contains every of the designs.

Ultimate Ideas

Combining mask and phase dividers for background designs opens up extra probabilities for developing distinctive shapes for the ones integrated mask. Be happy to discover other combos by yourself. With a bit of luck, this may occasionally turn out to be useful to your personal site or your subsequent mission.

I sit up for listening to from you within the feedback.

Cheers!

.inline-code{padding: 0px 4px; colour: pink; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!vital} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);show:block;margin: 0 auto;}

The put up How To Combine Background Masks with Section Dividers in Divi seemed first on Elegant Themes Blog.

read more