Combining background mask with segment dividers in Divi provides some other layer of creativity to an already tough arsenal of background design choices. If you happen to haven’t had a lot enjoy with Divi’s background choices, you’re no doubt lacking out. One handy, but tough, possibility provides you with the power so as to add a background masks for your background gradient (or symbol) in only a few clicks. Along with background choices, segment dividers additionally give customers the power to fortify their background designs.

On this educational, we’re going to display you tips on how to mix background mask with segment dividers in Divi. We’ll come up with step by step directions on tips on how to entire a background design for a Divi segment the usage of this system. Plus, we’ll even duvet tips on how to create some choice designs with only a few easy tweaks.

Experience!

Sneak Peek

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

How To Combine Background Masks with Section Dividers in Divi

The Idea

The elemental idea for this educational is to mix a background masks and segment dividers to create much more distinctive masks shapes.

First, we upload a background masks.

How To Combine Background Masks with Section Dividers in Divi

Then we upload segment dividers to enrich the masks form in an inventive manner.

How To Combine Background Masks with Section Dividers in Divi

Obtain the Structure for FREE

To put your fingers at the designs from this educational, you are going to first want to obtain it the usage of the button under. To realize
get entry to to the obtain it is very important subscribe to our Divi Day-to-day e mail listing by means of the usage of the shape under. As a brand new
subscriber, you are going to obtain much more Divi goodness and a loose Divi Structure pack each and every Monday! If you happen to’re already at the
listing, merely input your e mail deal with under and click on obtain. You’re going to now not be “resubscribed” or obtain additional emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:earlier than { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:earlier than { border-top-color: clear !essential; border-left-color: #ffffff !essential; }
@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:earlier than { border-top-color: #ffffff !essential; border-left-color: clear !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: clear !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:earlier than { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .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 robust { 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 robust, .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 !essential;}

Download For Free

Obtain For Unfastened

Sign up for the Divi E-newsletter and we can e mail you a replica of without equal Divi Touchdown Web page Structure Pack, plus heaps of different wonderful and loose Divi assets, guidelines and methods. Apply alongside and you are going to be a Divi grasp very quickly. If you’re already subscribed merely kind to your e mail deal with under and click on obtain to get entry to the format pack.

You’ve effectively subscribed. Please take a look at your e mail deal with to verify your subscription and get get entry to to loose weekly Divi format packs!

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

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

divi notification box

As soon as finished, the segment format shall 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. If you happen to haven’t but, set up and turn on 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!

divi background masks and patterns hero section

How you can Mix Background Mask and Dividers in Divi

1. Upload Phase Measurement and Spacing

To begin issues off, we’re going to upload dimension and spacing to the present segment within the builder. We’re going to hang off including a row or any content material so we will be aware of the background design of the segment

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

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

The use of the VW duration unit for peak may appear abnormal. Then again, since we’re going to be the usage of the VW duration unit to dimension our background components, this may occasionally be sure that the design scales fluidly on other browser widths.

How To Combine Background Masks with Section Dividers in Divi

2. Create the Background Gradient

As soon as the segment has some peak, we’re in a position so as to add the background gradient to the segment. This will likely give us some background colour in order that we will exhibit the background masks and divider combo afterward.

Underneath the Content material tab, click on the background gradient tab beneath 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%)

How To Combine Background Masks with Section Dividers in Divi

3. Create the Background Masks

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

Underneath the Background Masks tab, replace the next:

  • Masks: Chevrons
  • Masks Colour: #000
  • Masks Grow to be: Inverted
  • Masks Facet Ratio: See Screenshot

How To Combine Background Masks with Section Dividers in Divi

4. Upload the Phase Background Dividers

As soon as our masks is in position, we will alter the overlaying form additional by means of the usage of segment dividers. On this instance, we’re going to upload a half-circle segment divider to the highest and backside. This will likely squeeze the background masks to appear extra like a complicated arrow design.

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

First, upload a height divider beneath the Best tab.

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

Subsequent, upload a backside divider beneath the Backside tab.

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

How To Combine Background Masks with Section Dividers in Divi

The Consequence

Here’s the end result to this point.

How To Combine Background Masks with Section Dividers in Divi

Tweaking the Background Choices and Dividers for Extra Designs

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

Trade Design #1

For our first choice design, we’re going to rotate the present background masks and exchange the half-circle segment dividers with triangles.

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

  • Masks Grow to be: Vertical Turn, Rotate
  • Masks Facet Ratio: See Screenshot

How To Combine Background Masks with Section Dividers in Divi

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

How To Combine Background Masks with Section Dividers in Divi

The Consequence

Here’s the end result.

How To Combine Background Masks with Section Dividers in Divi

Trade Design #2

For our 2d and ultimate choice design, we’re going to exchange the Chevrons Masks with the Diagonal Bars 2 Masks and in addition give it a brand new height segment divider so as to add a refined swooshing impact to the design.

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

  • Masks: Diagonal Bars 2
  • Masks Grow to be: Horizontal Turn
  • Masks Facet Ratio: See Screenshot

How To Combine Background Masks with Section Dividers in Divi

Subsequent, replace the Phase Dividers as follows:

Best Divider

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

Backside Divider

  • Divider Taste: None

How To Combine Background Masks with Section Dividers in Divi

The Consequence

Here’s the end result.

How To Combine Background Masks with Section Dividers in Divi

Ultimate Effects

To come up 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 segment. I additionally added an extra design for each and every that incorporates a picture with a mix mode.

Test them out!

How To Combine Background Masks with Section Dividers in Divi

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

Ultimate Ideas

Combining mask and segment dividers for background designs opens up extra chances for growing distinctive shapes for the ones integrated mask. Be at liberty to discover other combos by yourself. Expectantly, this may occasionally turn out to be useful on your personal web page 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!essential} 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 publish How To Mix Background Mask with Phase Dividers in Divi gave the impression first on Chic Topics Weblog.

WordPress Web Design

[ continue ]