An icon list is a collection of visual elements displayed in a listicle format. They are used in various contexts to enhance the visual appeal and readability of your blog posts and page content.
Icon lists are mostly used to showcase products’ features, key points, benefits, etc., in a listical format. They break down the large content into small and scannable pieces so readers can understand them quickly and easily.
In this blog post, we’ll show you two easy methods how to add icon list in WordPress. Be with us till the end.
Create Beautiful Tables
With Block Editor
Method 1: Adding Icon List Using Ultimate Blocks
Ultimate Block is a Gutenberg block plugin with 25+ custom blocks. The ‘Styled List’ is a prominent block among them. Here, we’ll show you how to use this block.
Step 1: Install the Ultimate Blocks Plugin
Go to Plugins > Add New Plugin form your WordPress Dashboard. Find the plugin by typing Ultimate Blocks in the search box. Install and activate the plugin after it appears below.
Step 2: Add the Styled List Block to the Editor
Like any Gutenberg block, click the plus (+) button and type Styled List in the search box. When the block appears, add it to the editor.
Step 3: Add Items to the Styled List Block
You can see that the Styled List block is added to the editor. Now, it’s time to add items to the list. You may list the features of your product.
We have added some dummy text to the styled list block.
Step 4: Select the Icon for the Styled List Block
Select the entire Styled List block. You will see the default Tick icon under the Settings tab. Click on the Tick Icon.
A box, including a collection of icons, will open up. Select the icon you want. The icon will be applied over the entire styled list block.
Step 5: Customize the Styled List Block
Under the settings tab, you’ll find several more options by which you can customize the block. They are:
Icon size – Increase or decrease the icon size.
Number of columns – Showcase listicle block in multiple columns.
Number of columns in mobile – Showcase listicle block in multiple columns in mobile.
Item spacing (pixels) – Increase or decrease the space between the listicle items.
Step 06: Stylize the Styled List Block
Next, come to the Styles tab. You can change the icon color, list text color, and list background color from this tab.
After that, you can add padding and margin to give a block your desired layout.
Thus, you can create an icon list using the Ultimate Blocks plugin.
Method 2: Adding Icon List in Using Tableberg
You may often want to add icon lists to your WordPress tables. But the default table block doesn’t allow you to do this. So, install the Tableberg plugin. You can create comprehensive and multipurpose tables for your site using it.
Step 1: Install the TableBerg Plugin
Install and activate the Tableberg plugin on your site.
The process of creating tables with the plugin is almost the same as the default table block. Follow this guide to learn how to create tables with TableBerg.
Note: The free version of Tableberg comes with a List block. To use the Styled List block, you need to get the pro version of Tableberg.
Step 2: Add the Styled List Block to the Table
Select the cell to which you want to add the icon list. Once the cell is selected, you’ll see the plus (+) icon.
Click the plus (+) icon. Find and add the Styled List block to the cell.
The Styled List block will instantly be added to the table.
Step 3: Add Items to the Styled List Block on the Table
Add as many items as you want to the table.
Step 04: Set an Icon for the Styled List Block
Select the entire Styled List block. Go to the Settings tab on the right sidebar. Click the Tick icon under the Icon Settings option.
A pop-up will open up with a collection of icons. Select the icon you like.
The selected icon will be applied to the entire Styled List block.
Step 5: Customize the Styled List Block
Under the Icon Settings option, you find ways to customize the icon size and icon spacing.
Step 06: Stylize the Styled List Block
Go to the Styles tab. You can change the icon color, text color, background color, and padding for the block.
Thus, you can add and create icon lists on WordPress tables.
Conclusion
Icon lists in WordPress not only help convey key information to users but also improve the navigation and aesthetics of your content. While customizing the block, you must keep the brand consistency, readability score, and content hierarchy in mind.
Only if there is a combination of all these things will your icon list become alive to the users. That’s all for today.
Also Read:
