Iconenlijst toevoegen in WordPress

Iconenlijst toevoegen in WordPress

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.

Maak prachtige tafels
Met blok-editor

Method One: Add Icon List in WordPress Using Ultimate Blocks

Ultimate Block is a Gutenberg block plugin with 25+ custom blocks. The Icon is a prominent block among them. Here, we’ll show you how to use this block.

Step 01: Install the Ultimate Blocks Plugin

Ga naar Plugins > Nieuwe plug-in toevoegen. Find the plugin by typing Ultimate Blocks in the search box. Installeer en activeren de plugin nadat deze hieronder is weergegeven.

Installeer en activeer de Ultimate Blocks plugin

Step 02: Add the Styled List Block to the Editor

Like any Gutenberg block, click the plus (+) button en type Styled List in the search box. When the block appears, add it to the editor.

Add the Styled List Block to the Editor

Step 03: 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.

The Styled List block is added to the editor

We have added some dummy text to the styled list block.

Items added to the Styled List block

Step 04: 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.

Select the entire Styled List block

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.

Select the Icon for the Styled List Block

Step 05: 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.

Customize the Styled List Block

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.

Stylize your Styled List Block

Thus, you can create an icon list using the Ultimate Blocks plugin.

Method Two: Add Icon List in WordPress 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 TafelBerg plugin. You can create comprehensive and multipurpose tables for your site using it.

Stap 01: Installeer de TableBerg-plugin

Installeer en activeren the TableBerg plugin on your site.

Installeer en activeer de TableBerg plugin

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.

Step 02: 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.

Klik op het pluspictogram (+). Find and add the Styled List block naar de cel.

Het blok met de gestileerde lijst toevoegen aan de tabel

The Styled List block will instantly be added to the table.

The Styled List block is added to the table

Step 03: Add Items to the Styled List Block on the Table

Add as many items as you want to the table.

Add items to the Styled List block on the table

Step 04: Set an Icon for the Styled List Block

Select the entire Styled List block. Go to the Tabblad Instellingen op de rechterzijbalk. Click the Tick icon under the Icon Settings option.

Set an icon for the Styled List block

A pop-up will open up with a collection of icons. Select the icon you like.

Select an Icon

The selected icon will be applied to the entire Styled List block.

The icon applied to the Styled List block

Step 05: Customize the Styled List Block

Under the Icon Settings option, you find ways to customize the icon size and icon spacing.

Customize the Styled List block

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.

Stylize the Styled List Block

Thus, you can add and create icon lists on WordPress tables.

Conclusie

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. But before leaving the post, you may explore an other post on how to change the table border color in WordPress.



Het Tableberg-team

Early Bird-aanbieding is nu live!
Dit is de standaardtekst voor de meldingsbalk