The Icon List widget is used to create visually appealing lists where each item is accompanied by an icon.
Adding Icon List widget
Add an Icon List widget to your website. For details, see Add Elements article.
Content tab
- Layout: Under this section, you can choose between Default option that arranges items in a vertical list or Inline option to display items horizontally.
-
Items: You can customize each individual item in the list.
Text: Enter the text for the list item. This is what will be displayed as the content of the item.
Icon: Choose an icon to represent the item.
Link: Provide the URL for the item's link. This could be a webpage, document, or any other resource you want to link to. Additionally, you can click on the settings icon ⚙️to configure the link behavior, such as opening in a new window or Add nofollow option. -
Apply Link On: You can specify how you want the link to be applied. You have two options:
Full Width: Selecting this option will make the link span the entire width of its container.
Inline: Choosing this option will apply the link inline with the text or other content.
Style tab
List
- Space Between: You can adjust the spacing between the items in the list.
- Alignment: This setting determines how the list items are aligned within the widget.
- Divider: Enabling this option adds a divider line between each item in the list.
Icon
- Color: Choose the color for the icon in both Normal and Hover states.
- Transition Duration (Hover): When the icon is hovered over, you can set the duration of the transition effect.
- Size: Define the exact size of the icon.
- Gap: Specify the space between the icon and the accompanying text.
- Horizontal Alignment: Determine how the icons are horizontally aligned within their respective containers.
- Vertical Alignment: Specify the vertical alignment of the icons within their containers.
- Adjust Vertical Position: This setting allows you to adjust the vertical position of the icons, ensuring they are positioned exactly as desired within their containers.
Text
- Typography: Customize the font style, size, weight, and other typographic properties.
- Text Shadow: Add a shadow effect to the text.
- Color: Set the color of the text for both Normal and Hover states.
- Transition Duration (Hover): When the text is hovered over, you can set the duration of the transition effect.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.