How To Mix Background Mask with Phase Dividers in Divi

by | Aug 14, 2022 | Etcetera | 0 comments

Combining background masks with section dividers in Divi supplies another layer of creativity to an already tricky arsenal of background design alternatives. For those who occur to haven’t had so much experience with Divi’s background alternatives, you’re certainly missing out. One at hand, however tricky, risk will provide you with the facility so to upload a background mask to your background gradient (or image) in only some clicks. At the side of background alternatives, section dividers moreover give consumers the facility to beef up their background designs.

In this tutorial, we’re going to show you tips about find out how to combine background masks with section dividers in Divi. We’ll get a hold of step-by-step instructions on tips about find out how to whole a background design for a Divi section the use of the program. Plus, we’ll even quilt tips about find out how to create some selection designs with only some simple tweaks.

Enjoy!

Sneak Peek

Right here’s a quick check out the designs from this tutorial.

How To Combine Background Masks with Section Dividers in Divi

The Thought

The fundamental thought for this tutorial is to combine a background mask and section dividers to create a lot more unique mask shapes.

First, we add a background mask.

How To Combine Background Masks with Section Dividers in Divi

Then we add section dividers to counterpoint the mask shape in a creative method.

How To Combine Background Masks with Section Dividers in Divi

Download the Construction for FREE

To position your hands on the designs from this tutorial, you’re going to first need to download it the use of the button beneath. To comprehend
get right of entry to to the download you will need to subscribe to our Divi Daily email list by way of the use of the form beneath. As a brand spanking new
subscriber, you’re going to download a lot more Divi goodness and a unfastened Divi Construction pack every Monday! For those who occur to’re already on the
list, simply enter your email take care of beneath and click on on download. You’re going to no longer be “resubscribed” or download further emails.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !very important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !very important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:previous than { border-top-color: #ffffff !very important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:previous than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:previous than { border-top-color: transparent !very important; border-left-color: #ffffff !very important; }
@media best computer screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:previous than { border-top-color: #ffffff !very important; border-left-color: transparent !very important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !very important; border-left-color: transparent !very important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !very important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !very important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:previous than { background: #f92c8b !very important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !very important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !very important; } .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 powerful { 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 powerful, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !very important;}

You’ve successfully subscribed. Please check out your email take care of to ensure your subscription and get get right of entry to to unfastened weekly Divi layout packs!

To import the section layout to your Divi Library, do the following:

  1. Navigate to the Divi Library.
  2. Click on at the Import button at the peak of the internet web page.
  3. Inside the portability popup, select the import tab
  4. Select the download file from your computer (be sure you unzip the file first and use the JSON file).
  5. Then click on at the import button.

divi notification box

Once completed, the section layout will likely be available throughout the Divi Builder.

Let’s get to the training, shall we?

What You Need to Get Started

To get started, you will need to do the following:

  1. For those who occur to haven’t however, set up and turn on the Divi Theme.
  2. Create a brand spanking new internet web page in WordPress and use the Divi Builder to edit the internet web page on the front end (visual builder).
  3. Select the selection “Assemble From Scratch”.
  4. Now have a blank canvas to start out designing in Divi!

divi background masks and patterns hero section

How you’ll be able to Combine Background Masks and Dividers in Divi

1. Add Section Size and Spacing

To start out problems off, we’re going to add size and spacing to the current section throughout the builder. We’re going to hold off together with a row or any content material subject matter so we can take note of the background design of the section

See also  An Epic Adventure About Being a WordPress Services and products Reseller The usage of WPMU DEV

Open the settings for the Section. Beneath the Design tab, exchange the scale and spacing as follows:

  • Min Best: 50vw
  • Padding: 0px peak, 0px bottom

Using the VW period unit for top might seem extraordinary. On the other hand, since we’re going to be the use of the VW period unit to size our background elements, this will likely on occasion ensure that the design scales fluidly on different browser widths.

How To Combine Background Masks with Section Dividers in Divi

2. Create the Background Gradient

As quickly because the section has some top, we’re able so to upload the background gradient to the section. This may occasionally most likely give us some background color so that we can show off the background mask and divider combo in a while.

Beneath the Content material subject matter tab, click on at the background gradient tab underneath the background alternatives. Then add a gradient as follows:

  • Color Prevent 1: #1a2a6c (at 20%)
  • Color Prevent 2: #b21f1f (at 60%)
  • Color Prevent 2: #fdbb2d (at 100%)

How To Combine Background Masks with Section Dividers in Divi

3. Create the Background Mask

Now that we have a color gradient, we’re able to create a background mask.

Beneath the Background Mask tab, exchange the following:

  • Mask: Chevrons
  • Mask Color: #000
  • Mask Turn out to be: Inverted
  • Mask Aspect Ratio: See Screenshot

How To Combine Background Masks with Section Dividers in Divi

4. Add the Section Background Dividers

Once our mask is in place, we can regulate the masking shape further by way of the use of section dividers. In this example, we’re going to add a half-circle section divider to the perfect and bottom. This may occasionally most likely squeeze the background mask to seem additional like an advanced arrow design.

To check out this, click on at the Design tab and add the following Dividers:

First, add a peak divider underneath the Best possible tab.

  • Divider Style: See Screenshot
  • Divider Color: #000
  • Divider Best: 10vw

Next, add a bottom divider underneath the Bottom tab.

  • Divider Style: See Screenshot
  • Divider Color: #000
  • Divider Best: 10vw
  • Divider Flip: Vertical Flip

How To Combine Background Masks with Section Dividers in Divi

The Outcome

Right here’s the result thus far.

How To Combine Background Masks with Section Dividers in Divi

Tweaking the Background Possible choices and Dividers for Further Designs

Now that you simply’ve the basic idea in place, we can merely fiddle with the background alternatives section dividers to create additional designs.

Business Design #1

For our first selection design, we’re going to rotate the prevailing background mask and trade the half-circle section dividers with triangles.

To check out this, open the prevailing section settings, click on at the background Mask tab, and exchange the following:

  • Mask Turn out to be: Vertical Flip, Rotate
  • Mask Aspect Ratio: See Screenshot
See also  Learn how to Taste the Class Filter out in Divi’s Filterable Portfolio Module

How To Combine Background Masks with Section Dividers in Divi

Next, exchange the Section Dividers as follows:

Best possible Divider

  • Divider Style: See Screenshot
  • Divider Best: 13vw

Bottom Divider

  • Divider Style: See Screenshot
  • Divider Best: 13vw
  • Divider Flip: disable

How To Combine Background Masks with Section Dividers in Divi

The Outcome

Right here’s the result.

How To Combine Background Masks with Section Dividers in Divi

Business Design #2

For our second and supreme selection design, we’re going to replace the Chevrons Mask with the Diagonal Bars 2 Mask and as well as give it a brand spanking new peak section divider so to upload a polished swooshing affect to the design.

To check out this, open the prevailing section settings, click on at the background Mask tab, and exchange the following:

  • Mask: Diagonal Bars 2
  • Mask Turn out to be: Horizontal Flip
  • Mask Aspect Ratio: See Screenshot

How To Combine Background Masks with Section Dividers in Divi

Next, exchange the Section Dividers as follows:

Best possible Divider

  • Divider Style: See Screenshot
  • Divider Flip: Horiizontal Flip

Bottom Divider

  • Divider Style: None

How To Combine Background Masks with Section Dividers in Divi

The Outcome

Right here’s the result.

How To Combine Background Masks with Section Dividers in Divi

Final Results

To get a hold of a better idea of what the ones backgrounds will seem to be with some content material subject matter, I added a single-column row with a large heading positioned throughout the center of the section. I moreover added an additional design for every that accommodates an image with a mixture mode.

Take a look at them out!

How To Combine Background Masks with Section Dividers in Divi

To find the settings used for the content material subject matter and the images, feel free to acquire the unfastened layout for this tutorial (see above) which incorporates every of the designs.

Final Concepts

Combining masks and section dividers for background designs opens up additional possibilities for rising unique shapes for those built-in masks. Be happy to find different mixtures on your own. Confidently, this will likely on occasion turn into helpful to your non-public internet web page or your next project.

I sit down up for paying attention to from you throughout the comments.

Cheers!

.inline-code{padding: 0px 4px; color: purple; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!very important} 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);display:block;margin: 0 auto;}

The put up How To Mix Background Mask with Phase Dividers in Divi seemed first on Chic Topics Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

Your email address will not be published.