Table of Contents
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.
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.
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.
- 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.
- 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 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,
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.