Search

4 Creative Uses of the Icon List Elementor Widget

Elementor has a native widget called Icon List. You can use the widget to create a list element on your design whereby each list item has an icon. What’s cool about the widget is that you can use your own icon (in SVG format). Thus, you are not limited to the default icons offered by Elementor.

The Icon List itself is one of the basic Elementor widgets, which is available on both the free version and pro version of Elementor (read: Elementor Free vs Pro). If you are a Free Elementor user, the Icon List widget is quite useful to create a pricing table. You can use it to add a list of features you offer via a certain plan on your pricing table.

Any other examples of the use of the Icon List widget?

That’s what we will cover in this post. There are at least four ideas about how to use the Icon List widget in Elementor.

1. To Add Features List to Pricing Table

The above pricing table is not created with Price Table widget. Instead, it is created with several free Elementor widgets, including Text Editor, Heading, Button, and Icon List. You can preview the live demo of the above pricing table here.

As mentioned on the opening section, pricing table is the common element where the Icon List is implemented. You can use it to add a list of the features included on a certain plan as pictured above. You can pick an appropriate icon to make the list looks appealing to users.

2. To Create a Creative Features List

The addition of features list is not limited to pricing table. You can also add a features list to other sections as well. In most cases, designers present the features list in a vertical format. You can break this common practice by presenting the list in a horizontal format. Take a look at the example below:

You can preview the live demo of the above example here.

The Icon List widget has a setting option to change the list orientation from vertical to horizontal (inline). You can use the latter option to create a creative features list like the one above. To make the list items more appealing, you can use custom CSS to add padding and border radius on each item. You can use the .elementor-icon-list-item selector to target list items to style (read: Elementor CSS Selectors List).

The example above uses the following CSS snippet:

selector .elementor-icon-list-item{
    padding: 12px 17px;
    margin-top: 20px;
border: solid 1px EAE9F2;
border-radius: 5px;
background-color: #FFFFFF;
}

3. To Add Extra Navigation Menu

In addition to creating a horizontal features list, you can also implement the idea above to create an extra navigation menu on your website. That’s because Elementor allows you to add a link to each list item. Here is an example:

As you have known, most websites use the header to place the main navigation menu. But in some cases, you might need to add an extra navigation menu on a certain page on your website. On the example above, the use of Icon List widget is more appropriate than the Nav Menu widget as the menu will be displayed the same way on all device types. If you use the Nav Menu widget, the menu will be displayed as a hamburger icon just like the main menu on the header.

The CSS snippet used on the example above is:

selector .elementor-icon-list-text{
    padding: 7px 14px;
border: solid 1px #FFB1FF;
border-radius: 10px;
background-color: #ffffff;
}

selector .elementor-icon-list-text:hover{
    padding: 7px 14px;
border: solid 1px #FFB1FF;
border-radius: 10px;
color:#ffffff;
background-color: #FFB1FF;
}

You can disable the icons on each list item before implementing the CSS snippet.

4. To Add Post Meta on the Single Post Template

Elementor Pro allows you to create a custom single post template for your WordPress website. One of the elements you can add to your custom template is post meta.

Post meta itself refers to an element revealing the information related to a post. From author, date, category, and so on.

While Elementor already offers a widget dedicated to adding post meta (the Post Info widget), you can try a different experience by using the Icon List widget. You can add any element you want to the list. From author, date, post term (category or tag), to a custom field.

The Bottom Line

Icon List is one of the native widgets available in Elementor. You can use it to create a list — such as a features list — containing an icon on each item. With your creativity, you can also use the widget to create other elements as well on your design, including a navigation menu as we have described above.

As you might have known, Elementor uses Font Awesome to offer icons to its users. If you can’t find a suited icon from the default icons list offered by Font Awesome, you can upload your icon set or an individual icon. We have a dedicated article covering Font Awesome alternatives in case you want to use custom icons on your list.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Aliko Sunawang

Aliko Sunawang

Aliko is a WordPress expert and lead blogger at WPPagebuilders. He has been blogging with WordPress since 2012. He is responsible of all content published on this website.
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?