Divi 5 makes it simple to create crowd pleasing picture compositions with out customized code. On this loose pack, you’re going to in finding 6 Styled Symbol Maskings, designed that will help you flip extraordinary pictures into polished hero visuals, collages, galleries, and featured sections. Drop one onto any web page, change the photographs, and you are prepared to head. No additional setup required.

Preview

Right here’s a handy guide a rough have a look at all 6 Styled Symbol Maskings incorporated within the pack. The obtain is additional down the submit.

Obtain 6 Styled Symbol Maskings For Divi 5

Get all 6 designs without cost. Import them into your Divi Library and upload them to any web page within the Visible Builder.

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:earlier than { border-top-color: #ffffff !necessary; } .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 !necessary; border-left-color: #ffffff !necessary; }
@media handiest display 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 !necessary; border-left-color: clear !necessary; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-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 { colour: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:earlier than { 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;}

See also  CSS Container Queries

Obtain For Unfastened

Sign up for the Divi Publication and we can electronic mail you a duplicate of without equal Divi Touchdown Web page Format Pack, plus lots of different superb and loose Divi sources, guidelines and tips. Observe alongside and you’re going to be a Divi grasp very quickly. If you’re already subscribed merely sort for your electronic mail deal with beneath and click on obtain to get entry to the structure pack.

DOWNLOAD

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

What’s Incorporated (7 Exports)

After you obtain and unzip the report, you’ll in finding 6 Styled Symbol Covering exports, plus 1 report containing all designs.

Styled Symbol Covering 1 to six (6) → Six styled picture covering layouts that includes trendy masks shapes, balanced spacing, and ready-to-use compositions for hero sections, galleries, and have spaces.
Styled Symbol Maskings (All) → Imports all designs on your Divi Library immediately.

How To Use The Styled Symbol Maskings

Stay your obtain folder to hand. We’ll import, then upload a picture covering structure to a web page.

1. Import Symbol Maskings Into The Divi Library

Pass to Divi → Divi Library. Click on Import & Export on the peak of your display.

Within the Import & Export Layouts modal, transfer to the Import tab, then click on Make a choice Document and make a selection your JSON.

Make a choice any Styled Symbol Covering JSON you need to make use of, then click on Import Divi Builder Layouts.

2. Upload A Styled Symbol Covering To Any Web page

Open a web page within the Visible Builder and upload a brand new Segment.

Within the Insert Segment modal, click on Upload From Library and make a selection a Styled Symbol Covering structure.

In spite of everything, click on Use This Segment.

3. Switch The Pictures

As soon as the structure is at the web page, change the placeholder photographs with your personal. Click on a picture throughout the design, open the Symbol Module, and make a selection your new picture within the Media Library.

If a structure makes use of more than one masked photographs, change them separately to maintain the supposed composition. Substitute background photographs within packing containers as wanted so your pictures fill each and every masked form cleanly.

4. Alter Types (Non-compulsory)

You’ll be able to simply fit those picture maskings on your emblem by way of updating masks shapes, borders, spacing, and background therapies.

To modify the masks form, open the Column or Row and search for the covering controls within the Background → Background Masks tab. Take a look at other shapes till the picture framing suits your content material.

To refine the glance, regulate borders and nook radius at the masked picture or its container. Use the Design tab to tweak the settings.

To stay multi-image layouts balanced, regulate spacing between parts the use of phase, row, or module spacing controls. Small adjustments to padding and gaps can dramatically toughen alignment.

In case your structure comprises textual content or buttons close to the imagery, replace typography and button styling to check your emblem.

Guidelines For Efficient Symbol Covering Layouts

Symbol maskings paintings perfect when the photographs really feel intentional and the structure remains readable. Use those fast wins to stay your designs blank and compelling.

Use Top-Distinction, Easy Pictures

Masked shapes crop aggressively, so pick out photographs with transparent topics and powerful distinction. Steer clear of busy backgrounds that lose element when clipped.

Stay A Constant Visible Rhythm

In case your design makes use of more than one masked photographs, make a choice pictures with a identical tone and elegance. This makes the collage really feel cohesive as a substitute of random.

Steadiness Pictures With White Area

Give your masked photographs room to respire. Use padding and blank backgrounds so the shapes really feel like a part of a designed device, now not a cluttered grid.

Test Cell Cropping

Covering and cropping can shift on smaller displays. Preview each and every design on cellular and regulate picture positioning so key topics keep visual.

Prioritize Readable Textual content Over Pictures

In case your structure comprises headlines or frame textual content close to the imagery, be certain that distinction remains robust. Refined overlays or background blocks can assist textual content stay readable.

Get started Development In Divi 5 As of late!

Those 6 Styled Symbol Maskings provide you with a quick manner so as to add trendy visible passion to hero sections, galleries, and featured content material blocks. Switch the photographs, regulate the styling, and you’re going to have a elegant structure that matches your website online in mins with Divi 5‘s Visible Builder.

The submit 6 Image Masking Designs For Divi 5 (Free Download!) seemed first on Elegant Themes Blog.

read more