Divi 5 makes it easy to build lower up computer screen layouts that in reality really feel fashionable, clear, {{and professional}}. In this free pack, you’re going to get 5 Get a divorce Visual display unit Sections, each designed to pair content material subject material and imagery facet via facet for immediate visual impact. Drop one onto any internet web page, alternate the text and images, and also you’re able to transport. No additional setup required.
Preview
Proper right here’s a quick take a look in any respect 5 Get a divorce Visual display unit Sections built-in throughout the pack. The download is further down the put up.
Download 5 Get a divorce Visual display unit Designs For Divi 5
Get all 5 sections without charge. Import them into your Divi Library and add them to any internet web page throughout the Visual Builder.
@media most simple 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 !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:previous than { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !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 strong { 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 strong, .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 !important;}
Download For Free
Join the Divi E-newsletter and we will electronic mail you a duplicate of the ultimate Divi Landing Internet web page Construction Pack, plus lots of different excellent and free Divi belongings, tips and techniques. Follow along and also you’re going to be a Divi snatch in no time. When you’re already subscribed simply type in your electronic mail deal with underneath and click on on download to get admission to the construction pack.
You might have successfully subscribed. Please check your electronic mail deal with to verify your subscription and get get admission to to free weekly Divi construction packs!
What’s Integrated (6 Exports)
After you purchased and unzip the report, you’ll find 5 Get a divorce Visual display unit Section exports, plus 1 report containing all designs.
Get a divorce Visual display unit Section 1 to 5 (5) → 5 unstyled lower up computer screen layouts that blend text, buttons, and imagery in a balanced two-column format for fast internet web page building.
Get a divorce Visual display unit Section (All) → Imports all designs for your Divi Library without delay.
How To Use The Get a divorce Visual display unit Sections
Keep your download folder handy. We’ll import, then add a work to a internet web page.
1. Import Sections Into The Divi Library
Pass to Divi → Divi Library. Click on on Import & Export at the top of your computer screen.
Inside the Import & Export Layouts modal, switch to the Import tab, then click on on Make a selection Record and select your JSON.
Make a selection any Get a divorce Visual display unit construction JSON you want to use, then click on on Import Divi Builder Layouts.
2. Add A Get a divorce Visual display unit Section To Any Internet web page
Open a internet web page throughout the Visual Builder and add a brand spanking new Section.
Inside the Insert Section modal, click on on Add From Library and select a Get a divorce Visual display unit construction.
Finally, click on on Use This Section.
3. Transfer The Content material subject material
As quickly because the Section is on the internet web page, converting the placeholder content material subject material takes just a few clicks. Click on on straight away on any module with text to edit the heading, subheading, body text, or button text in exact time.
To modify images, open the Image settings via navigating to the Content material subject material tab of that module. Click on on Image → Upload or choose an image from your Media Library.
For Background Pictures or Gradients, transfer to Section settings → Content material subject material tab → Background tab and drop in your non-public image or adjust the Gradient Stops.
Buttons and CTAs are already prepare, so that you’ll be capable to simply change the link and text.
4. Adjust Sorts (Now not necessary)
You’ll merely have compatibility the ones sections for your brand via updating fonts, colors, spacing, and background treatments. Listed here are a few speedy ways to customize without rebuilding the construction.
To modify fonts, open any of the Text or Heading modules throughout the Section and transfer to the Design tab. Prolong the Text or Heading dropdown menu to modify the Heading Level, Font, Font Style, Text Alignment, or Text Color.
To keep watch over spacing, tweak padding and max-width values to give you the text facet further breathing room, or to ship the content material subject material closer to the lower up line.
Use Divi’s Construction settings to keep watch over Flex properties, harking back to column order, alignment, and spacing. This is specifically helpful when refining how the lower up computer screen stacks on smaller presentations.
Add subtle effects, harking back to hover states on buttons or delicate expose animations, to stick the Section feeling polished without distracting from the content material subject material.
Tips For Environment friendly Get a divorce Visual display unit Designs
Get a divorce presentations are simple, on the other hand small possible choices make the adaptation between average and height charge. Benefit from the ones speedy wins to handle clean, readable, and tasty layouts.
Lead With A Clear Headline
Keep your main heading concise and direct, then use a smaller supporting subheading to supply context or highlight benefits. This hierarchy guides the eye in brief and promises the text facet remains scannable, specifically on mobile, where attention spans are shorter.
Make a selection The Right kind Image Crop
Your image will steadily fill phase the computer screen, so use photos with a clear focal point and enough destructive area. Steer clear of overly busy or cluttered backgrounds that compete with text, buttons, or CTAs. Opt for images that complement the content material subject material.
Balance The Two Facets
If the image is visually heavy, simplify the text facet with fewer lines and further spacing. If the text is longer, choose calmer imagery so the Section does now not in reality really feel crowded. Use contrasting colors or subtle dividers to separate sides while maintaining overall team spirit.
Plan For Mobile Stacking
Get a divorce presentations naturally collapse proper right into a vertical construction on smaller devices. Make certain that the text remains readable if it appears above or underneath the image, and adjust the order as sought after. Make certain that the float nevertheless tells a story when stacked.
Keep CTAs Simple
One primary button is steadily enough. For many who use two, make the hierarchy obvious with difference and spacing so that the buyer is conscious about which one to click on on first. Consistent colors right through all sides create concord, while subtle permutations can highlight key portions.
Get began Construction In Divi 5 At the moment
The ones 5 Get a divorce Visual display unit Sections get a hold of a handy guide a rough option to assemble fashionable hero areas, about sections, provider highlights, and landing internet web page intros. Transfer the content material subject material, adjust the image, and also you’re going to have a polished construction that fits your web page in minutes with Divi 5‘s Visual Builder.
The put up 5 Break up Display screen Designs For Divi 5 (Loose Obtain) gave the impression first on Chic Subject matters Weblog.
Contents
- 1 Preview
- 2 Download 5 Get a divorce Visual display unit Designs For Divi 5
- 3 Download For Free
- 4 You might have successfully subscribed. Please check your electronic mail deal with to verify your subscription and get get admission to to free weekly Divi construction packs!
- 5 What’s Integrated (6 Exports)
- 6 How To Use The Get a divorce Visual display unit Sections
- 7 Tips For Environment friendly Get a divorce Visual display unit Designs
- 8 Get began Construction In Divi 5 At the moment
- 9 User Interface Design: Understanding It & Current Trends (2025)
- 10 Tips on how to Show Estimated Submit Studying Time in Your WordPress Posts
- 11 Get a Loose Hostel Structure Pack for Divi
0 Comments