Divi 5 makes it simple to construct trendy, image-driven layouts that really feel polished with out including useless complexity. On this unfastened pack, you’ll get 6 Collage Sections designed for hero spaces, product spotlights, portfolio intros, inventive touchdown pages, and different content material that advantages from layered visuals and blank typography. Drop one onto any web page, change the content material, and also you’re in a position to head.
Contents
- 1 Preview
- 2 Obtain 6 Collages For Divi 5
- 3 Obtain For Unfastened
- 4 You could have effectively subscribed. Please test your e-mail cope with to verify your subscription and get get right of entry to to unfastened weekly Divi format packs!
- 5 What’s Integrated (7 Exports)
- 6 How To Use The Collage Sections
- 7 Pointers For Efficient Collage Layouts
- 8 Get started Construction In Divi 5 Lately!
Preview
Right here’s a handy guide a rough take a look at the 6 Collage Sections incorporated within the pack. The obtain is additional down the submit.
Obtain 6 Collages For Divi 5
Get all 6 sections at no cost. Import them into your Divi Library and upload them to any web page within the Visible Builder.
@media best display screen 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 !essential; border-left-color: clear !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: clear !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { shade: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:earlier than { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .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 !essential;}
Obtain For Unfastened
Sign up for the Divi E-newsletter and we will be able to e-mail you a replica of without equal Divi Touchdown Web page Structure Pack, plus heaps of different wonderful and unfastened Divi sources, guidelines and tips. Practice alongside and you are going to be a Divi grasp very quickly. In case you are already subscribed merely sort on your e-mail cope with under and click on obtain to get right of entry to the format pack.
You could have effectively subscribed. Please test your e-mail cope with to verify your subscription and get get right of entry to to unfastened weekly Divi format packs!
What’s Integrated (7 Exports)
After you obtain and unzip the report, you’ll in finding 6 styled Collage Phase exports, plus 1 report containing all designs.
Styled – Collage Phase 1 to six (6) → Six totally styled collage segment layouts for inventive headers, product options, portfolio blocks, and layered content material presentation that you’ll be able to use as-is or customise.
Styled – Collage Sections (All) → Imports all 6 designs into your Divi Library directly.
How To Use The Collage Sections
Stay your obtain folder at hand. We’ll import the information, upload a piece to a web page, after which change the content material.
1. Import Sections Into The Divi Library
Cross to Divi → Divi Library. Click on Import & Export on the peak of the display screen.
Within the Import & Export Layouts modal, transfer to the Import tab, then click on Select Record and choose your JSON report.
Select any Collage Phase JSON you’d like to make use of, then click on Import Divi Builder Layouts.
2. Upload A Collage Phase 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 Collage Phase format.
In the end, click on Use This Phase.
3. Switch The Content material
As soon as the segment is at the web page, changing the placeholder content material takes only some clicks. Get started by means of updating the heading, supporting replica, buttons, and hyperlinks so the segment suits your message. Then change the placeholder photographs with your personal.
As a result of those collage layouts use more than one overlapping or offset photographs, it’s best possible to change one picture at a time and test the composition as you cross. This is helping keep the steadiness between textual content, whitespace, and imagery.
For those who’d like to regulate the collection of visible components, reproduction or take away current picture modules somewhat than rebuilding the format from scratch. That’s one of the simplest ways to keep spacing and alignment whilst increasing or simplifying the collage.
4. Alter Types (Not obligatory)
Those collage sections are already styled, so you’ll be able to use them in an instant or refine them to raised fit your logo. Replace typography, colours, spacing, border radius, shadows, and picture remedy as wanted the use of the settings within the Design tab.
To modify typography, open any Textual content or Heading module and cross to the Design tab. Make bigger the related textual content settings to regulate Font, Font Weight, Textual content Alignment, and Textual content Colour.
To refine the visible card or picture blocks, open the row, team, or module controlling the collage house and use the Design tab to tweak Border Width, Border Colour, Border Radius, Field Shadow, and Padding.
In case your model makes use of rounded picture mask, comfortable corners, or overlapping picture stacks, stay the ones relationships in thoughts as you resize or change property so the collage nonetheless feels intentional.
Use Divi’s responsive modifying equipment to regulate spacing, alignment, and stacking conduct on smaller monitors so the composition stays balanced throughout units.
Pointers For Efficient Collage Layouts
Collage sections paintings best possible when the association feels planned and the content material is straightforward to scan. Use those fast tricks to stay the designs blank, balanced, and efficient.
Use A Transparent Focal Level
Each collage will have to have one component that grabs consideration first. That could be the headline, a hero picture, or a standout product photograph. As soon as the focus is apparent, the supporting photographs can improve it somewhat than compete with it.
Stay Symbol Remedy Constant
If one picture makes use of rounded corners, comfortable shadows, or muted tones, the encircling photographs will have to really feel like a part of the similar gadget. Consistency makes the entire segment glance extra intentional.
Stability Textual content And Visuals
Collages are visible by means of nature, however they nonetheless want transparent messaging. Ensure that your headline, frame replica, and buttons have sufficient respiring room and don’t get crowded out by means of the picture composition.
Use Whitespace Deliberately
The empty house round a collage is a part of the design. Withstand the urge to fill each and every hole. Whitespace is helping the overlapping components really feel cleaner and offers the attention room to transport in the course of the segment.
Test The Composition On Cell
On smaller monitors, overlapping photographs and layered layouts can stack otherwise than anticipated. Evaluate every segment on pill and contact perspectives to verify the headline remains readable and the collage nonetheless feels balanced.
Get started Construction In Divi 5 Lately!
Those 6 Collage Sections come up with a quick method so as to add polished, image-forward layouts to inventive headers, product options, portfolio intros, touchdown pages, and extra. Switch the content material, stay the styling or adapt it on your logo, and also you’ll have a cultured segment in a position in mins with Divi 5‘s Visible Builder.
The submit 6 Collages For Divi 5 (Unfastened Obtain!) gave the impression first on Sublime Topics Weblog.
WordPress Web Design