Divi 5 makes it easy to create clean, scannable layouts that help visitors understand important information quickly. In this free pack, you’ll get 5 Icon List Sections that are perfect for landing pages, service pages, pricing sections, feature comparisons, product highlights, agency websites, portfolios, and more. Each section uses icons, spacing, typography, imagery, cards, and structured list items to create polished layouts with strong visual hierarchy. Import a section, replace the content, update the icons, and you’re ready to go.
Preview
Here’s a quick look at the 5 Icon List Sections included in the pack. The download is further down the post.
Download 5 Icon List Sections For Divi 5
Get all 5 sections for free. Import them into your Divi Library and add them to any page in the Visual Builder.
What’s Included (6 Exports)
After you download and unzip the file, you’ll find 5 styled Icon List Section exports, plus 1 file containing all layouts.
Styled – Icon Lists Section 1 to 5 (5) → Five fully styled icon list section layouts with structured list items, custom icon treatments, refined typography, image areas, cards, buttons, and clean spacing that you can use as-is or customize.
Styled – Icon Lists Sections (All) → Imports all 5 designs into your Divi Library at once.
How To Use The Icon List Sections
Keep your download folder handy. We’ll import the files, add a section to a page, and then replace the content.
1. Import Sections Into The Divi Library
Go to Divi → Divi Library. Click Import & Export at the top of the screen.
In the Import & Export Layouts modal, switch to the Import tab, then click Choose File and select your JSON file. Choose any Icon List Section JSON you’d like to use, then click Import Divi Builder Layouts.
2. Add An Icon List Section To Any Page
Open a page in the Visual Builder and add a new Section.
Click Add From Library and select one of your Icon List sections.
3. Swap The Content
Once the section is on the page, replacing the placeholder content only takes a few clicks. Start by updating the heading, body copy, list labels, descriptions, buttons, pricing details, service names, feature text, and supporting content to ensure the section aligns with your brand and message. Then swap in your own images, icons, featured content, or supporting details as needed.
Because icon list sections rely on clear hierarchy, consistent spacing, and recognizable visual cues, it’s best to replace content one area at a time. This helps preserve the balance between icons, text, imagery, cards, and negative space as you customize the design.
If you want to expand or simplify a section, duplicate or remove existing rows, columns, groups, list items, or modules, rather than rebuilding the design from scratch. That’s the easiest way to preserve the original structure, spacing, alignment, and rhythm of the layout.
4. Adjust Styles (Optional)
These icon list layouts are already styled, so you can use them right away or refine them to better match your site. Update typography, colors, icons, borders, shadows, spacing, backgrounds, buttons, and image treatments as needed using the settings in the Design tab.
To change typography, open any Text or Heading module and go to the Design tab. Expand the relevant text settings to adjust Font, Font Weight, Text Alignment, Text Color, and more.
To refine the list styling, open the row, column, group, or module you want to adjust and use the Design tab to tweak Background, Border Width, Border Color, Border Radius, Box Shadow, Sizing, and Spacing.
If your section uses icon cards, stacked list rows, pricing feature lists, pill-style items, service rows, or comparison blocks, keep those relationships in mind as you edit so the composition remains intentional and balanced.
Use Divi’s responsive editing tools to fine-tune spacing, stacking, icon size, list width, text alignment, and button placement on smaller screens so the layout stays polished across devices.
Tips For Effective Icon List Sections
Icon list sections work best when they make information easier to scan. Use these quick tips to keep your sections clean, useful, and easy to customize.
Keep Each List Item Short
Icon lists are most effective when each item conveys a single clear idea. Keep labels short, avoid clutter, and use supporting text only where it adds helpful context.
Use Icons With Purpose
Icons should help visitors understand the list faster. Choose icons that match the meaning of each item, and keep the style consistent across the section.
Create A Clear Visual Hierarchy
Use headings, icon sizes, text weights, spacing, and colors to guide visitors through the section. The most important list items or calls to action should be easy to spot.
Keep Spacing Consistent
Consistent spacing makes icon lists feel polished and easier to scan. Keep the distance between icons, text, rows, cards, columns, and buttons balanced throughout the section.
Check The Layout On Mobile
Icon list sections can change noticeably on tablet and phone screens as content stacks. Review your layout on smaller devices to ensure icons remain aligned, list items remain readable, and supporting visuals do not feel crowded.
Start Building In Divi 5 Today!
These 5 Icon List Sections give you a fast way to build polished, scannable page sections for landing pages, service pages, pricing sections, product features, feature comparisons, agency websites, portfolios, and more. Swap in your content, customize the styling if needed, and you’ll have a professional section ready in minutes with Divi 5’s Visual Builder.
Leave A Reply