One of the latest Divi 5 updates introduced Carousels and Lottie Animations, as well as something every site can use: the new Icon List Module. Instead of plain bullet points, you can create styled lists with meaningful icons that add clarity and visual appeal.
Think of features on a product page, steps in a process, services in a pricing table, or even benefits on a landing page. The Icon List Module makes all these easier to design and more engaging for visitors.
In this post, we’ll cover everything you need to know about the Icon List Module, from features to practical use cases, so you can upgrade your lists and improve your Divi sites.
What Is The Icon List Module?
The Icon List module in Divi 5 is designed to create appealing, structured lists that improve your site’s design. By allowing you to pair each list item with a unique icon, this module transforms plain text into professional, engaging content.
Before Divi 5, creating stylized lists in Divi required formatting Text or Blurb Modules, which was less efficient. The Icon List module fills this gap, offering a dedicated solution that’s user-friendly and highly customizable.
Key Features
The Icon List module has features that make it a great addition to Divi 5. Here are its key features:
Easy List Creation
Create lists quickly by adding items and assigning icons from Divi’s extensive icon library or uploading custom icons. The module’s intuitive interface lets you build polished lists in minutes, saving time compared to manual formatting.
Extensive Customization Options
Choose from hundreds of built-in icons, adjust their size, color, and placement to create a cohesive look that aligns with your site’s design.
Leverage Divi’s powerful design settings to customize fonts, text colors, spacing, alignment, and backgrounds. You can also add hover effects or animations to make your lists more interactive.
How To Use The Icon List Module
Getting started with Divi 5’s Icon List module is easy. Create a new page or open an existing one. Click to add a new module and choose Icon List.
After adding the module, you’ll see three Icon List Items in the content tab. Let’s start by clicking on the first one to edit it.
In the Content tab, enter a title in the Text field.
Next, expand the Icon dropdown tab. Here, you can choose from hundreds of icons in the Divi library. You can search for icons or scroll to find the one you’d like to use.
The Icon List module allows you to add links to individual list items, making it easy to link to other pages, attachments, and more.
The Design Tab is where you can style your icon list items. In the Icon dropdown menu, assign an icon color and size.
In the background tab, you can assign your icon a background color, add a border or box shadow, and adjust spacing.
Some other options include Text, where you control the alignment of the text or add a text shadow. However, to style the text, choose the Body Text dropdown menu. You can assign a font, weight, style, text alignment, color, size, and more there.
Like all other Divi modules, you can control sizing, spacing, border, and box shadows and add filters, transitions, or animations.
Once you’ve styled the first icon list item, you can easily copy it, change the icon, and update the text.
Adding Space Between Icon List Items
In the previous section, we demonstrated how to add icon list items. In this section, we’ll review how to adjust layout properties using Divi 5’s Flexbox Layout System. As you can see, we could use a little space between each of our icon list items.
In the main Icon List module settings, click on the Design tab. Locate the Layout dropdown menu and expand it to reveal the settings.
By default, Flex is selected under Layout Style. This allows you to use Divi 5’s Flexbox settings to control spacing, layout directions, and alignment. To add spacing between each Icon List item, simply adjust the Vertical Gap. This adds breathing room between each item, giving our list more visual appeal.
Universal Design Settings For All Icon List Items
In addition to styling Icon List items individually, you can use the main module’s design settings to add styles to every icon list item at once. For example, if you want all your icons to have the same color, text, or background styles, you can do it at the module level.
Whether you want to style list items individually or as a whole, the Icon List module in Divi 5 provides a great way to showcase information in a more user-friendly way.
Practical Examples Using The Icon List Module
The Icon List module is versatile and can enhance different areas of your website. Here are a few practical examples to inspire your designs.
Travel Blogs
The Icon List module offers a great way to create engaging content on your travel blog. You can use it to highlight categories on your blog, travel itineraries, packing tips, or destination highlights. Additionally, you can combine hover effects and use different icons for each list item to present information in a clear, stylish way.
Features On A Business Site
Use the Icon List module to showcase your business’s services. Assign relevant icons and customize colors to match your brand. You can also add links to service pages for easy navigation.
Step-By-Step Process Guide
Create a list outlining the steps of a process, like “How to sign up”. Use checkmarks to visually guide users through each step, making complex information more digestible.
E-Commerce Store Pages
For e-commerce sites, use the Icon List module to highlight your store’s features. Pair with Divi 5’s Woo modules to create a cohesive product category page.
Use The Icon List Module In Divi 5
The Icon List module in Divi 5 offers a great way to create stylish, functional lists with little effort. Its ease of use, robust customization options, and seamless integration with Divi 5’s new features make it a must-have for Divi users. Whether you’re highlighting services, guiding users through a process, or showcasing product features, this module helps you deliver professional results that engage your audience.
Ready to try it? Download the latest Divi 5 Public Alpha today and explore the Icon List module yourself. Stay tuned for more Divi 5 updates as we roll out new features.
Leave A Reply