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.
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.
Then we add section dividers to counterpoint the mask shape in a creative method.
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.
@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;}
Download For Free
Join the Divi Publication and we will email you a duplicate of the ultimate Divi Landing Internet web page Construction Pack, plus lots of various glorious and unfastened Divi property, pointers and strategies. Observe along and you’re going to be a Divi seize in no time. For those who’re already subscribed simply sort in your email take care of beneath and click on on download to get right of entry to the layout pack.
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:
- Navigate to the Divi Library.
- Click on at the Import button at the peak of the internet web page.
- Inside the portability popup, select the import tab
- Select the download file from your computer (be sure you unzip the file first and use the JSON file).
- Then click on at the import button.
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:
- For those who occur to haven’t however, set up and turn on the Divi Theme.
- 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).
- Select the selection “Assemble From Scratch”.
- Now have a blank canvas to start out designing in Divi!
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
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.
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%)
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
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
The Outcome
Right here’s the result thus far.
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
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
The Outcome
Right here’s the result.
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
Next, exchange the Section Dividers as follows:
Best possible Divider
- Divider Style: See Screenshot
- Divider Flip: Horiizontal Flip
Bottom Divider
- Divider Style: None
The Outcome
Right here’s the result.
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!
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.
0 Comments