In this tutorial, we will teach you how to create easy-to-manage lists within Elementor using the Icon List Widget. We’ll walk you through it step by step, so you know how to create vertical and horizontal lists using either the default icon library or your own custom icons. This tutorial will cover:
✔ How to create a vertical or horizontal list
✔ Customizing your lists to match your design
✔ Adding your own custom icon
✔︎ And much more!
Hey there, it’s Ash from Elementor.
In this tutorial we will explore the Icon List Widget. This widget allows you to create easy-to-manage vertical and horizontal lists within your website.
Lists are a great way to display information on your website is a clear and concise way.
With Elementor it’s easy to create great looking lists which seamlessly connect to the icon library and even allows you to upload your own.
So, if you’re ready let’s get started!
In this example I will walk you through the steps of how to create an inline list which is separated by dividers and then a default, vertical list which we’ll split into two columns.
To start with we’ll work on the default list layout. Let’s delete this section and search for the ‘Icon List Widget’. Drop this into position and let’s explore the configuration and styling options which are available.
As you can see, some demo list items have already been created, and you’ll also notice that each item has its own individual icon. This is a great feature which provides a lot of customisation options for your lists.
The first option we see is ‘Layout’. Here we can state whether we would like our list to appear in the default layout, which is in a vertical format or the in-line layout which changes our list to show horizontally. Let’s leave this as default and we’ll explore the in-line option later on.
Next we have the list items themselves. If we select the first item you’ll see we are presented with some additional options. The text field is where you will enter your text which will show in your list item. You can manually type something in here or you have the option to populate this field with dynamic content.
Let’s add the text for our first item.
The icon section allows you to do three things. You can either remove the icon, set an icon from the icon library or upload an SVG icon.
By deleting the icon you will see that it is removed completely from the list and the text moves in to fill the space.
Selecting the plus icon or ‘Icon Library’ button opens up the Elementor Icon Library. Here you will see a vast collection of icons which you can use on your website. Simply use the filters or perform a search to find an icon to use in your list.
If you have your own icon library, you upload it here. To find out more about uploading your own icon library, check out our dedicated tutorial on this by following the link in the description.
Once you have found a suitable icon, simply select ‘Insert’ to add it to your list item.
The last option we see here is to upload an SVG icon which is what we’re going to do for our list.
Please note that to upload SVG icons, you must first enable this within your Elementor settings.
We have already uploaded our icon, so we’ll simply select it in the media library and insert it into our list.
The last option we see here is the ability to add a link to your item. Here you can type in the website address you would like to link to, or you can select a page already on your website by performing a search. Clicking the gear icon will open up more link options, like the ability to open links into a new tab. You also configure this link with dynamic content.
We do not require any links in our list, so we’ll leave this section blank.
OK, great. We’ve set a great base for our list and now I’ll show you how to quickly duplicate the list items for faster development.
Delete the unused list items by selecting the cross button.
And now select the duplicate button five times.
Alright, that was easy!
Before we move on, let’s quickly update the text on each item.
Fast forward text updates…
The final setting we see in the content tab is the ‘Apply Link On’ option. If you have applied links to your items, here you can specify if you would like the link to be applied to the full width of the item, or simply just the text & icon.
Now, let’s switch over to the style tab.
The first option here allows us to set the space between our list items. We’ll set this to 15.
Next, we have the alignment. By default the list is set to be left aligned, but as you can see we can move the list to the center and to the right.
We’ll leave this as default.
And the final option here is to set a divider. You can see by toggling this option we are presented with more customisations. Let’s leave this off for now as we’re going to explore this in more detail when we create our in-line list.
Now, open the Icon toggle.
Here we can style our icon by setting it’s color, size and alignment.
We can set the color using the global colors or by a manual selection. We’ll set our icon to #403EF1
We’ll leave hover as blank but be sure to set a color here if you would like your icons to change color when a user hovers over them.
Size we’ll set to 20 and alignment we’ll leave as default.
Finally, we’ll amend the text styling. Let’s switch over to the ‘text’ toggle and set the color to black. Hover, we’ll leave as blank, but just like the icon, be sure to set a color here if you would like your text to change color when a user hovers over it.
Text indent controls the spacing between the icon and the text. For our design 35 works really well.
And last but not least, we’ll set the typography options. These can be set using the global font options or manually.
We’ll set the family to ‘Poppins’, Size to ‘16px’, Weight to ‘400’, Transform to ‘Capitalize’ which will ensure each word starts with a capital letter. Style we’ll set to ‘Normal’, and decoration can be left as ‘Default’.
Finally let’s amend the line-height and letter spacing.
Under line-height ensure em is selected and enter 1, then under letter spacing enter 0.
OK, fantastic, we now have one great looking list.
Let’s make some additional adjustments now so that it appears in two columns.
First of all we’re going to need to add an inner section. Open the widgets panel and drop an inner section just above our list.
Now, let’s move our list into the first column and duplicate it.
Drag the duplicated list into the second column, then delete the last three items of the first list, and the last three items on the second list.
OK, that looks great!
Let’s just double check our list appears correctly on tablet and mobile devices before we move on.
Switch to tablet view first of all and as you can see our list still looks great.
Now switch to mobile view. Whilst this does look good it would look better if the list was aligned with the heading. Select the first column and amend the padding to 0px on all sides. Now right click and copy these styles, then paste them onto the second column. The final adjustment here is to add 20px padding on top of the second column.
OK, that looks great now.
And there we have it, you now know how to create a great looking list with a custom icon. Let’s move onto our in-line list next.
Scroll up and as you can see we have a 4 item in-inline list, with divider.
Let’s remove this list and drop in a new icon list widget.
The first step is to set our list as ‘inline’.
Next we’ll remove the unwanted items and select the first one to add our content.
Remove the default text and add your own.
Now, delete the icon and leave the link field as blank.
Let’s duplicate this item three times and then update the text of each of these.
As you can see the structure of our list is already taking shape. Let’s switch to the style tab to really bring it to life.
We’ll set space between to 50.
Alignment to center.
Divider we’ll toggle to ‘On’ and like before we’re presented with some additional options.
The style we’ll set as solid, but as you can see there are multiple options available.
Weight we’ll move to the slider to 4 and height we’ll set to 100%.
Finally, the color we’ll set to our nice blue shade.
We can bypass the icon section as we do not have one applied to our list.
The last step is to configure the text. Select the text toggle and set the color to black, hover can be left as blank and text indent set as 0.
Under the typography settings set the family as ‘Poppins’, size as 22px, weight as 500, Transform to Capitalize, style to normal & decoration to none. Finally, set the line-height to 1.2em and letter spacing to 1.
