Divi 5 makes it simple to create crowd pleasing picture compositions with out customized code. On this loose pack, you are going to in finding 6 Styled Symbol Maskings, designed that will help you flip abnormal footage into polished hero visuals, collages, galleries, and featured sections. Drop one onto any web page, change the pictures, and you are prepared to move. No further setup required.
Preview
Right here’s a snappy have a look at all 6 Styled Symbol Maskings incorporated within the pack. The obtain is additional down the publish.
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.
@media most effective display 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 !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:ahead of { 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 Unfastened
Sign up for the Divi Publication and we can e-mail you a duplicate of without equal Divi Touchdown Web page Structure Pack, plus heaps of alternative wonderful and loose Divi assets, guidelines and tips. Practice alongside and you are going to be a Divi grasp very quickly. In case you are already subscribed merely sort to your e-mail cope with underneath and click on obtain to get entry to the format pack.
You may have effectively subscribed. Please take a look at your e-mail cope with to substantiate your subscription and get get entry to to loose weekly Divi format packs!
What’s Integrated (7 Exports)
After you obtain and unzip the document, you’ll in finding 6 Styled Symbol Covering exports, plus 1 document containing all designs.
Styled Symbol Covering 1 to six (6) → Six styled picture overlaying layouts that includes fashionable masks shapes, balanced spacing, and ready-to-use compositions for hero sections, galleries, and have spaces.
Styled Symbol Maskings (All) → Imports all designs in your Divi Library immediately.
How To Use The Styled Symbol Maskings
Stay your obtain folder at hand. We’ll import, then upload a picture overlaying format to a web page.
1. Import Symbol Maskings Into The Divi Library
Cross 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 Record and choose 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 Phase.
Within the Insert Phase modal, click on Upload From Library and choose a Styled Symbol Covering format.
After all, click on Use This Phase.
3. Switch The Pictures
As soon as the format is at the web page, change the placeholder photographs with your individual. Click on a picture throughout the design, open the Symbol Module, and choose your new picture within the Media Library.
If a format makes use of more than one masked photographs, change them separately to maintain the supposed composition. Change background photographs within boxes as wanted so your footage fill each and every masked form cleanly.
4. Modify Kinds (Non-compulsory)
You’ll simply fit those picture maskings in your logo via updating masks shapes, borders, spacing, and background remedies.
To switch the masks form, open the Column or Row and search for the overlaying 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 components the use of segment, row, or module spacing controls. Small adjustments to padding and gaps can dramatically toughen alignment.
In case your format comprises textual content or buttons close to the imagery, replace typography and button styling to check your logo.
Pointers For Efficient Symbol Covering Layouts
Symbol maskings paintings best possible when the pictures really feel intentional and the format remains readable. Use those fast wins to stay your designs blank and compelling.
Use Top-Distinction, Easy Pictures
Masked shapes crop aggressively, so select photographs with transparent topics and robust distinction. Keep away from 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 footage with a an identical tone and elegance. This makes the collage really feel cohesive as an alternative of random.
Stability 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 gadget, now not a cluttered grid.
Test Cellular Cropping
Covering and cropping can shift on smaller monitors. 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 format comprises headlines or frame textual content close to the imagery, ensure distinction remains robust. Delicate 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 method so as to add fashionable visible pastime to hero sections, galleries, and featured content material blocks. Switch the pictures, regulate the styling, and you are going to have a sophisticated format that matches your web page in mins with Divi 5‘s Visible Builder.
The publish 6 Symbol Covering Designs For Divi 5 (Unfastened Obtain!) gave the impression first on Sublime Subject matters Weblog.
WordPress Web Design