Divi 5 makes it simple to create blank, scannable layouts that assist guests perceive essential knowledge temporarily. On this unfastened pack, you’ll get 5 Icon Record Sections that are ideal for touchdown pages, provider pages, pricing sections, function comparisons, product highlights, company internet sites, portfolios, and extra. Every phase makes use of icons, spacing, typography, imagery, playing cards, and structured record pieces to create polished layouts with sturdy visible hierarchy. Import a bit, substitute the content material, replace the icons, and also you’re in a position to move.

Preview

Right here’s a handy guide a rough have a look at the 5 Icon Record Sections incorporated within the pack. The obtain is additional down the put up.

Obtain 5 Icon Record Sections For Divi 5

Get all 5 sections without spending a dime. Import them into your Divi Library and upload them to any web page within the Visible Builder.

Download the Files

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:earlier than { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:earlier than { border-top-color: clear !essential; border-left-color: #ffffff !essential; }
@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 !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 sturdy { 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 sturdy, .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;}

See also  Personalization is Converting Advertising and marketing, Here is What To Be expecting

Obtain For Loose

Sign up for the Divi Publication and we will be able to electronic mail you a duplicate of without equal Divi Touchdown Web page Format Pack, plus lots of different superb and unfastened Divi sources, guidelines and tips. Observe alongside and you’re going to be a Divi grasp very quickly. If you’re already subscribed merely sort to your electronic mail cope with underneath and click on obtain to get entry to the format pack.

DOWNLOAD

You’ve got effectively subscribed. Please take a look at your electronic mail cope with to verify your subscription and get get entry to to unfastened weekly Divi format packs!

What’s Integrated (6 Exports)

After you obtain and unzip the record, you’ll to find 5 styled Icon Record Segment exports, plus 1 record containing all layouts.

Styled – Icon Lists Segment 1 to five (5) → 5 totally styled icon record phase layouts with structured record pieces, customized icon remedies, subtle typography, symbol spaces, playing cards, buttons, and blank spacing that you’ll use as-is or customise.

Styled – Icon Lists Sections (All) → Imports all 5 designs into your Divi Library without delay.

How To Use The Icon Record Sections

Stay your obtain folder at hand. We’ll import the information, upload a bit to a web page, after which substitute the content material.

1. Import Sections Into The Divi Library

Pass 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 make a choice your JSON record. Make a selection any Icon Record Segment JSON you’d like to make use of, then click on Import Divi Builder Layouts.

2. Upload An Icon Record 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 make a choice one in every of your Icon Record sections.

3. Switch The Content material

As soon as the phase is at the web page, changing the placeholder content material handiest takes a couple of clicks. Get started by way of updating the heading, frame replica, record labels, descriptions, buttons, pricing main points, provider names, function textual content, and supporting content material to make sure the phase aligns together with your logo and message. Then change to your personal photographs, icons, featured content material, or supporting main points as wanted.

As a result of icon record sections depend on transparent hierarchy, constant spacing, and recognizable visible cues, it’s perfect to interchange content material one house at a time. This is helping maintain the steadiness between icons, textual content, imagery, playing cards, and unfavorable area as you customise the design.

If you wish to amplify or simplify a bit, reproduction or take away current rows, columns, teams, record pieces, or modules, somewhat than rebuilding the design from scratch. That’s the best way to maintain the unique construction, spacing, alignment, and rhythm of the format.

4. Modify Types (Non-compulsory)

Those icon record layouts are already styled, so you’ll use them in an instant or refine them to higher fit your web page. Replace typography, colours, icons, borders, shadows, spacing, backgrounds, buttons, and symbol remedies as wanted the usage 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, Textual content Colour, and extra.

To refine the record styling, open the row, column, staff, or module you need 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 icon playing cards, stacked record rows, pricing function lists, pill-style pieces, provider rows, or comparability blocks, stay the ones relationships in thoughts as you edit so the composition stays intentional and balanced.

Use Divi’s responsive enhancing gear to fine-tune spacing, stacking, icon measurement, record width, textual content alignment, and button placement on smaller monitors so the format remains polished throughout units.

Guidelines For Efficient Icon Record Sections

Icon record sections paintings perfect once they make knowledge more straightforward to scan. Use those fast tricks to stay your sections blank, helpful, and simple to customise.

Stay Every Record Merchandise Quick

Icon lists are best when each and every merchandise conveys a unmarried transparent concept. Stay labels brief, keep away from litter, and use supporting textual content handiest the place it provides useful context.

Use Icons With Function

Icons will have to assist guests perceive the record sooner. Make a selection icons that fit the which means of each and every merchandise, and stay the way constant around the phase.

Create A Transparent Visible Hierarchy

Use headings, icon sizes, textual content weights, spacing, and colours to lead guests throughout the phase. An important record pieces or calls to motion will have to be simple to identify.

Stay Spacing Constant

Constant spacing makes icon lists really feel polished and more straightforward to scan. Stay the space between icons, textual content, rows, playing cards, columns, and buttons balanced all the way through the phase.

Test The Format On Cell

Icon record sections can alternate noticeably on pill and speak to monitors as content material stacks. Assessment your format on smaller units to make sure icons stay aligned, record pieces stay readable, and supporting visuals don’t really feel crowded.

Get started Construction In Divi 5 Nowadays!

Those 5 Icon Record Sections come up with a quick approach to construct polished, scannable web page sections for touchdown pages, provider pages, pricing sections, product options, function comparisons, company internet sites, portfolios, and extra. Switch to 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 put up 5 Icon List Sections For Divi 5 (Free Download!) gave the impression first on Elegant Themes Blog.

read more