Heeded »
Page Title
Content Tab Options
Layout
Choose the arrangement of your icon list. Options include Default, Inline, and Stacked. Default aligns items vertically, Inline aligns them horizontally, and Stacked places the icon above the text. Select the one that best suits your design needs.
Item Text
Edit the text for each item in your icon list. Click on each item to customize its text. This field supports plain text. Use concise and clear language to enhance readability.
Item Icon
Choose an icon for each item in your list. Click on the icon box next to each item to select from a wide range of icons. Consider the icon’s relevance to the text for intuitive understanding.
Item Link
Provide a URL to make each list item clickable, redirecting to the specified link. Click on the Link option next to each item and enter a valid URL. Ensure the links are relevant and lead to useful resources.
Apply Link On
Decide where the link will be applied: on the Text, Icon, or Entire Item. This affects the clickability area of each list item. Choose wisely to improve user experience and interaction with your list.
Style Tab Options
List Space Between
Adjust the space between each item in the icon list. Slide right to increase space, left to decrease. This setting helps in achieving the desired vertical spacing for better visual alignment.
List Alignment
Choose the alignment of the icon list. Options include left, center, and right alignment. This affects the positioning of the entire list relative to its container.
Icon Color (Normal and Hover)
Set the icon color for both normal and hover states. Choose a color that complements your site’s design and enhances readability. For hover color, pick a contrasting shade for visual feedback when users hover over an icon.
Icon Hover Transition Duration
Specify the duration of the hover transition effect in milliseconds. A shorter duration makes the hover effect more noticeable, while a longer one creates a subtler change.
Icon Size
Adjust the size of the icons. Larger icons are more noticeable but ensure they align with your overall design and don’t overpower text or other elements.
Icon Gap
Determine the space between the icon and the text. Adjust to ensure icons are neither too close nor too far from the text for optimal readability.
Icon Horizontal Alignment
Choose the horizontal alignment of the icons within the list. Align icons to the left, center, or right of the text for a cohesive and structured appearance.
Icon Vertical Alignment
Adjust the vertical alignment of the icon relative to the text. Select from ‘Top’, ‘Middle’, or ‘Bottom’ to align the icon accordingly. This setting is crucial for ensuring visual harmony in your icon list, especially when dealing with multi-line text.
Icon Adjust Vertical Position
Fine-tune the vertical position of the icon with pixel precision. Use the slider or input field to adjust the icon’s position up or down, which is particularly useful for aligning icons of different sizes or when the text varies in length.
Text Typography
Customize the font properties of the list text. Click on the Typography option to expand it. Here, you can modify the font size, weight, style, line height, and letter spacing. Perfect typography enhances readability and visual appeal.
Text Shadow
Add a shadow effect to the list text for depth and emphasis. Click on the Text Shadow option to expand it. Adjust the shadow’s color, blur, horizontal, and vertical position to achieve the desired depth and intensity.
Text Color (Normal and Hover)
Set the color of the list text for both normal and hover states. Click on the ‘Text Color’ section to pick a color for the normal state and hover state separately. Consistent and contrasting colors improve visibility and user interaction.
Text Hover Transition Duration
Define the duration of the transition effect when the mouse hovers over the list text. Use the slider or input field to set the time in seconds. A smooth transition creates a more interactive and responsive user experience.
Advanced Tab Options
Margin
Margin sets the outer space around the widget, outside of any defined borders. It’s used to create space around the element, separate from adjacent elements. Specify the top, right, bottom, and left margin values.
Padding
Padding sets the inner space between the content of the widget and its border. This controls the space within the widget. Specify top, right, bottom, and left padding values.
Width
Width determines the horizontal size of the widget. You can set it to a specific pixel value, percentage of its container, or leave it as default to auto-adjust.
Position
Position allows you to control how the widget is positioned. Options include default, absolute, fixed, and relative. Each setting changes how the widget is placed relative to its container or viewport.
Z-Index
Z-Index sets the stack order of the widget relative to other elements. A higher value means it will be closer to the front. Useful for overlapping elements.
CSS ID
CSS ID is a unique identifier for the widget. It allows you to target this specific widget with custom CSS or JavaScript. Use an ID that is unique on the page.
CSS Classes
CSS Classes lets you add custom CSS class names to the widget. Use this to apply predefined CSS styles or as selectors for JavaScript functions.
Scrolling Effects
Scrolling Effects enable various effects on the widget as the page scrolls. Options include transparency, blur, rotate, and scale. Each effect can be fine-tuned for intensity and duration.
Mouse Effects
Mouse Effects apply interactive effects based on mouse movement over the widget. Options like ‘Mouse Track’ or ‘3D Tilt’ can be used to create engaging and dynamic interactions.
Sticky
Sticky makes the widget stay fixed during scroll at a specific position. You can set it to stick at the top or bottom of the screen, and specify the offset.
Entrance Animation
Entrance Animation controls the animation of the widget as it enters the viewport. Choose from a variety of animations to make the widget appear dynamically.
Transform
Background
Here, you can set a background for the widget, separate from the page background. Choose from colors, gradients, or images to enhance the visual appeal of your widget box. It’s useful for making the widget stand out or match your site’s design theme.
Border
This setting lets you add and customize the border of the widget. Options include border type (solid, dotted, etc.), width, color, and radius. Utilize this to give a distinct outline to your widget box, making it more noticeable or stylistically consistent with your site.
Mask
Mask allows you to apply a mask shape to the widget’s background. This can be used to create interesting visual effects, like having the background image or color fill only a specific shape.
Visibility
Control the visibility of your widget on different devices (desktop, tablet, mobile). This is helpful for optimizing your site’s layout and content appearance across various screen sizes.
Custom CSS
Here you can write your own CSS code to apply custom styles to the widget. This option is for users who have knowledge of CSS and wish to implement custom design solutions that go beyond the available Elementor settings.
Icon List Widget Classes
Here you will find (almost, at least) all of the classes related to the Icon List widget. They are listed and identified on a live example of the Icon List widget below with the use of distinctive colors (mind your eyes, this is for identification purposes). If you spot an element you would like to alter on your own site, you can copy (there’s a copy button when hovering) the css code line associated to it and paste it in the widget’s Custom CSS section of Elementor
If using the free version of Elementor, the code can be pasted in your theme’s custom CSS by removing ‘selector’ and replacing with a CSS ID of your choice. The CSS ID will have to be specified in the Advanced Tab of the widget without a ‘#’, but will be preceeded by ‘#’ in the custom CSS, such as ‘#my-id’, as CSS syntax dictates.
selector .elementor-widget-container { background-color: red;}
selector .elementor-icon-list-items { background-color: red;}
selector .elementor-icon-list-icon { background-color: red;}
selector .fas { background-color: red;}
selector .elementor-icon-list-text { background-color: red;}
selector .elementor-icon-list-item:first-child { background-color: red;}
selector .elementor-icon-list-item { background-color: red;}
- List Item #1
- List Item #2
- List Item #3
Getting Help With Elementor
Using widgets in Elementor can sometimes present challenges, especially when aiming to balance aesthetic appeal with SEO optimization. If you find yourself needing assistance with your Elementor website, it’s precisely what we do every day here at Heeded. Our website design and development services are tailored to ensure that every aspect of your site, including the crucial page titles, is not only visually engaging but also meticulously optimized for search engines. You can even get an instant online quote for a website. At Heeded, we pride ourselves on our comprehensive approach, integrating SEO services into our web design and development processes. This ensures that your website not only looks great but also performs exceptionally well in search engine rankings. Let us take the helm in refining your Elementor page titles, making the process seamless and your website standout, all while boosting your SEO.
Author
