Learn How to Create a List in Elementor
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. Whether you are looking to add a small list of items with a custom end point using an icon, or perhaps just a list of contact details; the Elementor icon list widget can help you out here.
Using the list feature is a great way to break up large blocks of text into more manageable and readable sections which will help to improve the user engagement on the website.
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.
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 – Choose the alignment from here.
- 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,
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.
