Icon List

Author: Hana Vo 3988 views

This section will help you build your list of icons with smooth animation. It’s considered one of the outstanding elements to optimize your page’s content with just a few simple steps.

1. How to add an Icon list element to your page

To configure Icon List, you can go to: Elements -> Basic -> Drag the Elementor named Icon List to the position that you want.

2. How to configure the icon list element

2.1. Content

Item Settings

Choose Type: You can choose between Icon and Image

You should prioritize using images to save page space and avoid exceeding the 256KB limit when publishing the page.

Icon/Image: Choose an icon for the icon list or an image from the library.
Label: Add a label to emphasize your icon.
Description: Enter the content for the description.
Enable custom link: This option allows you to add a link to the icon item.

General settings

Icon position: A flexible option that allows you to choose where to put the Icon (to the left, top, bottom or right).
Layout: This allows you to choose a layout for the icon (Horizontal or Vertical).
Items per row: This allows you to change the number of icons in a row for desktop, tablet, and mobile devices.
Space between: This allows you to change the space between icons.

You can add, duplicate, move, and delete the items if you want.

2.2. Design

General

Alignment: Set the horizontal alignment of the Icon List. It can be left, right aligned or centered.
Background Type: Set background color or background image for the icon list.
Border: You can customize the border style for the icon list.
Border Radius: Define how round the corners of the icon list area are (available for desktop, tablet, and mobile devices).
Spacing: Set margin or padding value for the icon list (available for desktop, tablet, and mobile devices).

Image

Width: Set the image width, allowing different values for each device. To avoid spacing issues between the image and text, you should specify the width in pixels (px).
Max Width: Set the maximum width of the image as a percentage. It allows you to set a different max-width for each device.
Height: Set the height of the image. It allows you to set different heights for each device.
Image Fit: Resize the image to fit its container. There are five selections.
Opacity: Control the opacity of the image.
CSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings.
Box Shadow: Adjust box shadow options.
Border: Select the type of border.
Border Radius: Set the border radius to control corner roundness. It allows setting of different border radius for each device.

Icon

Normal and Hover: You will have the same settings on the Icon in each state of them.

Alignment: Use this setting to vertically align the icon, allowing you to position it at the top, center, or bottom of the block.
Size: You can change the size of icons (available for desktop, tablet, and mobile devices).
Rotate: Set rotation value for icons (available for desktop, tablet, and mobile devices).
You are also allowed to change Color, Background, Border, and Box Shadow, Border Radius, and Spacing for all Normal and Hover.

Label

Alignment: Set the horizontal alignment of the label. It can be left, right aligned or centered…
Typography: Set the typography options for the label.
Text Color: Select the color of the label.
Text Shadow: Add a shadow and blur to the label.
Spacing: Select the space between the icons.

Description

It includes Alignment, Typography, Text Color, Text Shadow fields that are applicable to text. Alignment and Typography can be set for all devices.