How to Create a List in Elementor - WPDesigns

How to Create a List in Elementor

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
How to create a list in Elementor Cover

This article may contain affiliate links, if you use one there is no extra charge to you but the company may recognise my contribution and give a bonus.

Table of Contents

Elementor Logo

In this WPDesigns article, we will discuss how to create a list in Elementor. The icon list widget in Elementor makes it easy to make a list and has more customizable options than a standard list of bullet points or a number list.

Learn How to Create a List in Elementor

To create your list, go to the dashboard and then open the page with Elementor.  From the widget search bar, type in “icon list.”  Then you can then drag and drop it onto the page where ever you need.  After that, you’ll see three options for editing the widget: Content, Style, and Advanced.

Icon List Widget
search for the Icon List in the Elementor widget list
Edit Options Of Icon List Widget
Add the Icon List to your page where needed
Icon List Content Tab
The Content Tab is where you add your text and icons

Content Tab

The Content tab is where you will add all the list’s visible content, such as list item names and the icons.

  • Layout – You can select how you would like your list to be displayed, vertically or horizontally inline.
  • Items
    • The list items are all stacked and open up as a toggle box upon a click, revealing more options to define each list item.
    • You can copy this item and make an identical copy or you can delete it using the cross.
  • Text – This is the text that will be displayed in the list.
  • Icon – You can click on the current icon, and you can then choose from a range of thousands of various icons to suit almost every situation.  You can also add custom icons to Elementor.
  • Link – You can add your custom link here if you need to send clients somewhere on click.  This link is individual for each list item.  Perhaps you can add your social media in here?  There is also a dynamic link that could include opening a lightbox, a video, or even a popup.
  • Add Item –  You can add a new list item from here.
  • Apply Link On – You choose to apply the link on the full width or inline.

Style Tab

The Style tab is great for getting the icons and text looking just as you’d like and to match the look and feel of your website.

  • List
    • Space Between – This allows you to edit the space in between the individual text and icon rows.
    • Alignment – You can set the left, center, and right; you can further adjust this using padding in the Advanced tab.
  • Icon
    • Color – This is for the icon color when not being interacted with.
    • Hover – The hover color shows when the icon is being interacted with by having the mouse pass over it.
    • Size – The size of the icon can be adjusted as needed.
    • Alignment – 
  • Text
    • Text Color – The color of the text can be edited from default and changed however you like.
    • Hover – This is for the text color when the mouse is moved over top of the text.
    • Text Indent – Set how far away the text is from the icon.
    • Typography – The font style, font weight, font family, font size, transform (uppercase, lowercase, etc.), style (bold, italic, 
Icon List Style Lists
The Icon List allows you to customize the style efficiently
Icon List Style Icon Settings
The Icon styling is great to get them just as you want
Icon List Style Text Settings
The text can be edited and designed as needed to fit your website

Advanced

The Advanced tab is full of useful features:

  • Advanced – Options include; margin, padding, z-index, CCS ID and CSS Class.
  • Motion Effects – There are a range of scrolling effects, mouse effects, and you can also choose how the selected element enters the screen, the delay and if it is sticky.
  • Background – You can select the background for standard and also for hover.  You can choose from a solid background and a gradient.
  • Border – This allows you to add a border to the element when standard and hover along with the border-radius.  You can also add a box-shadow.
  • Positioning – You can change how the element is positioned on the page. For the page width, you have default, inline, and custom.  For the page position, you have default, absolute, and fixed.  Check out this article for a deep look into the positioning properties in Elementor.
  • Responsive – The responsive options will allow you to hide certain sections or elements on different screen sizes.  This can be useful when redesigning a page for mobile. On certain elements, you can reverse the columns.
  • Attributes – (Pro Feature) You can add custom attributes to the element; you can find a full list here.
  • Custom CSS – (Pro Feature) You can add CSS to the site or the element through this box.  It is best to add the CSS for the element and add the CSS for the global setting site.  You can use “selector” to target the specific element you have open.
Icon List Style Advanced Tab
The advanced tab allows for many options and functions

Josh

Typically replies in minutes

Hi there,

Feel free to message me if you have any questions.