Divi 5 makes it simple to show data in some way this is blank, scannable, and simple to match. On this unfastened pack, you’ll in finding 7 Styled Huge Listing Sections, designed for services and products, function breakdowns, step by step processes, schedules, specifications, and different data-heavy content material. Drop one onto any web page, switch the textual content, and you are prepared to head. No additional setup required.
Contents
- 1 Preview
- 2 Obtain 7 Styled Huge Listing Sections For Divi 5
- 3 Obtain For Unfastened
- 4 You’ve got effectively subscribed. Please test your e mail cope with to verify your subscription and get get admission to to unfastened weekly Divi format packs!
- 5 What’s Integrated (8 Exports)
- 6 How To Use The Styled Huge Listing Sections
- 7 Pointers For Efficient Huge Lists
- 8 Get started Construction In Divi 5 As of late!
Preview
Right here’s a snappy have a look at all 7 Styled Huge Listing Sections incorporated within the pack. The obtain is additional down the put up.
Obtain 7 Styled Huge Listing Sections For Divi 5
Get all 7 sections without spending a dime. Import them into your Divi Library and upload them to any web page within the Visible Builder.
@media handiest 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 !vital; border-left-color: clear !vital; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !vital; border-left-color: clear !vital; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { coloration: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:earlier than { background: #f92c8b !vital; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !vital } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !vital; } .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 !vital;}
Obtain For Unfastened
Sign up for the Divi Publication and we will be able to e mail you a replica of without equal Divi Touchdown Web page Structure Pack, plus lots of alternative superb and unfastened Divi assets, guidelines and methods. Observe alongside and you’ll be a Divi grasp very quickly. If you’re already subscribed merely kind to your e mail cope with underneath and click on obtain to get admission to the format pack.
You’ve got effectively subscribed. Please test your e mail cope with to verify your subscription and get get admission to to unfastened weekly Divi format packs!
What’s Integrated (8 Exports)
After you obtain and unzip the report, you’ll in finding 7 Styled Huge Listing Phase exports, plus 1 report containing all designs.
Styled – Huge Listing Phase 1 to 7 (7) → Seven huge checklist phase layouts for services and products, options, steps, and comparisons, that includes fashionable typography, transparent row construction, and polished “be informed extra” styling.
Styled – Huge Listing Sections (All) → Imports all designs in your Divi Library directly.
How To Use The Styled Huge Listing Sections
Stay your obtain folder at hand. We’ll import, then upload a piece to a web page.
1. Import Sections Into The Divi Library
Cross to Divi → Divi Library. Click on Import & Export on the peak of your display screen.
Within the Import & Export Layouts modal, transfer to the Import tab, then click on Make a selection Document and choose your JSON.
Make a selection any Styled Huge Listing Phase JSON you need to make use of, then click on Import Divi Builder Layouts.
2. Upload A Styled Huge Listing 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 Styled Huge Listing Phase format.
In spite of everything, click on Use This Phase.
3. Change The Content material
As soon as the phase is at the web page, changing the placeholder content material takes only some clicks. Get started by way of updating the name and supporting textual content so guests perceive what the checklist covers.
Subsequent, click on every checklist merchandise and change the placeholder labels, descriptions, or metadata (corresponding to dates or instances). Replace the thing titles first, then the supporting textual content to stay the hierarchy constant.
If you wish to upload or take away checklist pieces, reproduction an merchandise module (or the row workforce used for every merchandise), then replace the textual content. Stay spacing and alignment constant so scanning remains easy.
4. Alter Types (Non-compulsory)
You’ll simply fit those huge lists in your logo by way of updating typography, colours, borders, spacing, and background remedies.
To switch typography, open any Textual content or Heading Module and cross to the Design tab. Amplify the Textual content dropdown menu to regulate Font, Font Weight, Textual content Alignment, and Textual content Colour. In case your format features a phase name, replace the Heading Module to stay hierarchy transparent.
To refine the checklist merchandise glance, alter dividers, borders, and merchandise spacing. Open the module controlling the thing container (or the mum or dad row) and use the Design tab to tweak Border Width, Border Colour, Border Radius, and Padding.
For zebra striping or highlighted pieces, replace the background colours of alternating rows. This improves clarity and makes lengthy lists more straightforward to scan.
In case your checklist contains buttons or “be informed extra” hyperlinks, taste them within the Design tab so number one movements stand out whilst secondary movements keep visual however quieter.
Use Divi’s format settings to regulate Flex homes, corresponding to alignment and spacing, in particular when refining how numbers, titles, and right-aligned movements behave on smaller monitors.
Pointers For Efficient Huge Lists
Huge lists paintings absolute best when they’re simple to scan and simple to know. Use those fast wins to stay your sections transparent and helpful.
Get started With Transparent Labels
Every merchandise name must temporarily keep in touch what it’s. Stay labels brief and constant so guests can scan the checklist with out effort.
Use Visible Hierarchy
Emphasize what issues maximum—numbers, merchandise titles, or a featured line—the use of font weight, spacing, and delicate distinction. This guides consideration with out making the phase really feel busy.
Stay Alignment Constant
Align identical content material the similar means. As an example, left-align titles and outlines, and right-align movements like “Be told Extra.” Constant alignment improves scanning.
Plan For Cellular
On smaller monitors, lengthy traces and multi-column layouts can really feel cramped. Believe stacking secondary main points below every name, shortening labels, or decreasing the choice of right-side movements so the whole lot remains readable.
Prioritize Clarity
Use beneficiant padding, transparent dividers, and a line peak that’s prime sufficient so checklist pieces don’t blur in combination. If guests need to paintings to learn it, they’re going to skip it.
Get started Construction In Divi 5 As of late!
Those 7 Styled Huge Listing Sections come up with a quick means so as to add polished, scannable content material blocks to carrier pages, function breakdowns, pricing pages, schedules, and extra. Change the content material, alter the styling, and also you’ll have a blank phase format that matches your website online in mins with Divi 5‘s Visible Builder.
The put up 7 Huge Listing Sections For Divi 5 (Unfastened Obtain!) seemed first on Sublime Subject matters Weblog.
WordPress Web Design