How To Combine Background Masks with Section Dividers in Divi

by | Aug 14, 2022 | Etcetera | 0 comments

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.

How To Combine Background Masks with Section Dividers in Divi

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.

How To Combine Background Masks with Section Dividers in Divi

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

How To Combine Background Masks with Section Dividers in Divi

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.

.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;}

Download For Free

See also  Understanding the Unique Security Features Included in Divi Hosting by Cloudways

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.

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.

divi notification box

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!

divi background masks and patterns hero section

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

See also  Download a FREE Header & Footer for Divi’s Middle Eastern Restaurant Layout Pack for Divi

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.

How To Combine Background Masks with Section Dividers in Divi

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%)

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 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

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 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

How To Combine Background Masks with Section Dividers in Divi

The Outcome

Here’s the outcome thus far.

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 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.

See also  Find out how to Completely Organize a PPC Marketing campaign [Template]

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

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 Outcome

Here’s the outcome.

How To Combine Background Masks with Section Dividers in Divi

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

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 Outcome

Here’s the outcome.

How To Combine Background Masks with Section Dividers in Divi

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!

How To Combine Background Masks with Section Dividers in Divi

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.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

Your email address will not be published.