Divi 5 makes it simple to create blank, structured layouts with robust visible definition. On this unfastened pack, you’ll get 5 Styled Border Structure Sections that are ideal for touchdown pages, portfolios, carrier sections, group highlights, editorial layouts, product options, and extra. Each and every phase makes use of borders, spacing, typography, imagery, and content material blocks to create polished layouts with a elegant, grid-like really feel. Import a piece, exchange the content material, and also you’re in a position to head.
Preview
Right here’s a snappy take a look at the 5 Border Structure Sections integrated within the pack. The obtain is additional down the publish.
Obtain 5 Border Structure Sections For Divi 5
Get all 5 sections free of charge. Import them into your Divi Library and upload them to any web page within the Visible Builder.
@media simplest display screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:sooner 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:sooner 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;}
Obtain For Unfastened
Sign up for the Divi E-newsletter and we can electronic mail you a replica of without equal Divi Touchdown Web page Structure Pack, plus lots of alternative wonderful and unfastened Divi assets, pointers and methods. Observe alongside and you’re going to be a Divi grasp very quickly. If you’re already subscribed merely kind for your electronic mail deal with under and click on obtain to get admission to the format pack.
You have got effectively subscribed. Please take a look at your electronic mail deal with to substantiate your subscription and get get admission to to unfastened weekly Divi format packs!
What’s Integrated (6 Exports)
After you obtain and unzip the document, you’ll in finding 5 styled Bordered Structure Segment exports, plus 1 document containing all layouts.
Styled – Bordered Layouts Segment 1 to five (5) → 5 totally styled border-based phase layouts with structured content material spaces, delicate typography, symbol therapies, robust spacing, and blank visible separation that you’ll be able to use as-is or customise.
Styled – Bordered Structure Sections (All) → Imports all 5 designs into your Divi Library immediately.
How To Use The Border Structure Sections
Stay your obtain folder to hand. We’ll import the information, upload a piece to a web page, after which exchange 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 Make a selection Report and choose your JSON document.
Make a selection any Bordered Structure Segment JSON you’d like to make use of, then click on Import Divi Builder Layouts.
2. Upload A Border Structure Segment To Any Web page
Open a web page within the Visible Builder and upload a brand new Segment.
Click on Upload From Library and choose one in every of your Bordered Structure sections.
3. Change The Content material
As soon as the phase is at the web page, changing the placeholder content material simplest takes a couple of clicks. Get started by way of updating the heading, frame reproduction, buttons, hyperlinks, names, descriptions, and labels so the phase suits your logo and message. Then change for your personal photographs, portraits, featured content material, icons, or supporting main points as wanted.
As a result of bordered layouts depend on blank separation, alignment, and spacing, it’s very best to switch content material one house at a time. This is helping maintain the stability between textual content, imagery, borders, and destructive house as you customise the design.
If you wish to enlarge or simplify a piece, replica or take away present rows, columns, teams, or modules as a substitute of rebuilding the design from scratch. That’s the best way to maintain the unique construction, spacing, and rhythm of the format.
4. Regulate Types (Not obligatory)
Those bordered layouts are already styled, so you’ll be able to use them immediately or refine them to higher fit your website. Replace typography, colours, borders, shadows, spacing, backgrounds, and symbol therapies 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. Enlarge the related textual content settings to regulate Font, Font Weight, Textual content Alignment, Textual content Colour, and extra.
To refine the bordered styling, open the row, column, team, or module you wish to have to regulate and use the Design tab to tweak Background, Border Width, Border Colour, Border Radius, Field Shadow, Sizing, and Spacing.
In case your phase makes use of divided content material blocks, defined playing cards, bordered symbol spaces, table-like rows, or asymmetrical spacing, stay the ones relationships in thoughts as you edit so the composition continues to really feel intentional and balanced.
Use Divi’s responsive modifying equipment to fine-tune spacing, stacking, borders, and alignment on smaller displays so the format remains polished throughout gadgets.
Pointers For Efficient Border Layouts
Border layouts paintings very best after they create construction with out making the design really feel too inflexible. Use those fast tricks to stay your sections blank, fashionable, and simple to scan.
Use Borders To Create Transparent Construction
Borders can assist outline sections, separate content material, and information guests in the course of the format. Use them to make stronger the hierarchy of the web page relatively than adorning each component similarly.
Stay Spacing Constant
Bordered layouts glance very best when padding and spacing really feel intentional. Stay equivalent content material spaces aligned and frivolously spaced so the design feels polished as a substitute of crowded.
Stability Borders With Detrimental House
Sturdy borders can upload definition, however too many heavy traces could make a format really feel dense. Let destructive house melt the design and provides the content material room to respire.
Repeat Border Therapies Constantly
Constant border widths, colours, radius values, and dividing traces assist all the phase really feel cohesive. Repetition is what makes a bordered format really feel intentional relatively than pieced in combination.
Test The Structure On Cellular
Bordered sections can alternate noticeably on pill and make contact with displays as content material stacks. Evaluate your format on smaller gadgets to verify borders nonetheless separate content material obviously, photographs stay helpful, and spacing nonetheless feels balanced.
Get started Construction In Divi 5 As of late!
Those 5 Styled Border Structure Sections provide you with a quick solution to construct polished, structured web page sections for portfolios, touchdown pages, carrier pages, group sections, product options, editorial layouts, and extra. Change for your content material, customise the styling if wanted, and also you’ll have a qualified phase in a position in mins with Divi 5’s Visible Builder.
The publish 5 Bordered Layout Sections For Divi 5 (Free Download!) gave the impression first on Elegant Themes Blog.
0 Comments