One of the newest DIVI 5 -updates introduced carousels and lottial animations, as well as something that every site can use: the new iconnorm module. Instead of normal listing signs, you can make stylized lists with meaningful icons that add clarity and visual attraction.
Think of functions on a product page, steps in a process, services in a price table or even benefits on a destination page. The icon list module makes all these easier to design and more attractive for visitors.
In this message we deal with everything you need to know about the icon list module, from functions to practical use cases, so that 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 attractive, structured lists that improve the design of your site. By allowing you to link every list item to a unique icon, this module transforms ordinary text into professional, fascinating content.
Before DIVI 5 required stylized lists in Divi required drawn up text or blurb modules, which was less efficient. The icon list module fills this gap and offers a special solution that is user -friendly and very adaptable.
Important functions
The icon list module has functions that make it a great addition to Divi 5. Here are the most important characteristics:
Make an easy list
Make lists quickly by adding items and assigning icons from the extensive Divi icon library or uploading custom icons. With the intuitive interface of the module you can build polished lists in minutes, which saves time compared to manual layout.
Extensive adjustment options
Choose from hundreds of built -in pictograms, adjust their size, color and placement to create a coherent look that matches the design of your site.
Leverage the powerful Divi design settings to adjust fonts, text colors, distance, alignment and backgrounds. You can also add hover effects or animations to make your lists more interactive.
How to use the icon module
Getting started with the Divi 5 icon list is simple. Make a new page or open an existing one. Click to add a new module and choose Icon.
After you have added the module, you will see three icon items on the Content tab. Let’s start by clicking on the first to edit it.
Enter a title on the Content tab Text field.
Then perform the drop -down list icon. Here you can choose from hundreds of icons in the Divi library. You can search for icons or scroll to find the one you want to use.
With the icon list module you can 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 items. In the drop -off menu icon, explain a icon color and size.
On the background tab you can assign your icon a background color, add a border or box shadow and adjust a distance.
Some other options include text, where you control the alignment of the text or add a text shadow. Choose the Body Text drop -off menu to style the text. You can assign a font, weight, style, text lines, color, size and more there.
Just like all other DIVI modules, you can control the size, distance, edge and box shadows and add filters, transitions or animations.
After you have stylized the first icon item, you can easily copy it, change the icon and update the text.
Add space between pictogram items
In the previous section we have demonstrated how you add icon list items. In this section we will assess how you can adjust Lay Equipments using the Flexbox Layout system from Divi 5. As you can see, we can use a little space between each of our Icon lists.
In the settings of the main icon module, click the Design tab. Find the dropdown menu of the layout and fold it out to reveal the settings.
Flex is selected by default under layout style. This allows you to use the Flexbox settings from DIVI 5 to control distance, Lay, and alignment. Adjust the vertical opening to add distance between each icon list. This adds a breathing space between each item, giving our list more visual attraction.
Universal design settings for all pictogram items
In addition to the individual styling icon, you can use the design settings of the main module to add styles to each icon list item at the same time. For example, if you want all your icons to have the same color, text or background styles, you can do this at module level.
Whether you want to style a list of list items or as a whole, the icon list module in Divi 5 offers a great way to present information in a more user -friendly way.
Practical examples using the icon module
The icon list module is versatile and can improve different parts of your website. Here are a few practical examples to inspire your designs.
Travel blog
The icon list module offers a great way to make fascinating content on your travel blog. You can use it to mark categories on your blog, travel routes, gasket tips or destination height points. You can also combine Hover effects and use different icons for each frame item to present information in a clear, stylish way.
Functions on a business site
Use the icon -list module to present the services of your company. Assign relevant icons and adjust colors that match your brand. You can also add links to service pages for simple navigation.
Step -by -step process guide
Make a list of the steps of a process, such as “how to register”. Use check marks 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 mark the functions of your store. Combine with the WOO modules from Divi 5 to make a category page of coherent product category.
Use the icon list module in Divi 5
The icon list module in Divi 5 offers a great way to make stylish, functional lists with little effort. The ease of use, robust adjustment options and seamless integration with the new functions of DIVI 5 make it a must-have for DIVI users. Whether you emphasize services, users by guiding a process or presenting product functions, this module helps you to deliver professional results that involve your target group.
Ready to try it? Download the newest Divi 5 Public Alpha today and explore the icon list module itself. Stay informed for more Divi 5 updates while we roll out new functions.
#Divi #icon #module