Turning Outsized Characters into Background Mask with Divi (Loose Obtain!)

With regards to background mask, folks generally tend to make use of symbol modifying instrument outdoor of Divi, after which add the picture to the website online they’re developing. Despite the fact that that’s a forged solution to customise and personalize your website online, it isn’t essentially the one solution to pass. You’ll be able to additionally create background mask inside Divi itself, by way of combining the other design parts and filters choices creatively. That’s precisely what we’re about to do on this put up! We’ll flip outsized characters into background mask that glance nice throughout other display screen sizes. We are hoping this instructional evokes you to create your personal designs the usage of outsized characters and Divi’s integrated choices.

Let’s get to it!

Preview

Earlier than we dive into the academic, let’s take a snappy have a look at the result throughout other display screen sizes.

Instance #1

Instance #2

Obtain The Hero Sections for FREE

To put your arms at the loose hero sections, you’re going to first want to obtain them the usage of the button beneath. To achieve get admission to to the obtain it is important to subscribe to our Divi Day by day e mail checklist by way of the usage of the shape beneath. As a brand new subscriber, you’re going to obtain much more Divi goodness and a loose Divi Structure pack each and every Monday! When you’re already at the checklist, merely input your e mail cope 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 !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !necessary; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:prior to { border-top-color: #ffffff !necessary; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:prior to, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:prior to { border-top-color: clear !necessary; border-left-color: #ffffff !necessary; }
@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:prior to, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:prior to { border-top-color: #ffffff !necessary; border-left-color: clear !necessary; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { coloration: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:prior to { background: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !necessary } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .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 !necessary;}

Obtain For Loose

Sign up for the Divi Newlsetter and we can e mail you a duplicate of without equal Divi Touchdown Web page Structure Pack, plus lots of alternative wonderful and loose Divi assets, guidelines and tips. Apply alongside and you’re going to be a Divi grasp very quickly. In case you are already subscribed merely kind for your e mail cope with beneath and click on obtain to get admission to the format pack.

You’ve effectively subscribed. Please test your e mail cope with to verify your subscription and get get admission to to loose weekly Divi format packs!

Recreate Instance #1

Upload New Segment

Background Colour

Let’s get started with the primary instance! Upload a brand new common segment to a brand new or current web page and upload a background to that segment:

Background Colour: #000000

Spacing

Then, pass to the spacing settings and take away all default height and backside padding.

Most sensible Padding: 0px
Backside Padding: 0px

Overflow

Transfer directly to the complicated tab and conceal the overflows of the segment. This may occasionally turn out to be necessary later in this instructional after we reposition the Textual content Module containing the outsized persona.

Horizontal Overflow: Hidden
Vertical Overflow: Hidden

Upload Row #1

Column Construction

Proceed by way of including a brand new row the usage of the next column construction:

Column 1 Background Colour

With out including any modules but, open the row settings and upload a background coloration to the primary column.

Column 1 Background Colour: #848484

Column 1 Background Symbol

Upload a background coloration as smartly. To mix the background coloration and symbol, we’re going to use a mix mode.

Column Background Symbol Mix: Multiply

Sizing

Transfer directly to the design tab and make allowance the row to soak up all the width of the display screen by way of making use of the next sizing settings:

Use Customized Gutter Width: Sure
Gutter Width: 1
Width: 100%
Max Width: 100%

Spacing

We’re additionally eliminating all customized height and backside padding of the row.

Most sensible Padding: 0px
Backside Padding: 0px