Icon List

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

2. How to configure the icon list element

2.1. Content

Item Settings

• Icon: Choose an icon for the icon list. You can choose our free icon or upload your icon.
• 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 width of the image. It allows to setting of different widths for each device.
• Max Width: Set the maximum width of the image as a percentage. It allows to set different max-width for each device.
• Height: Set the height of the image. It allows 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 to setting of different border radius for each device.

Icon

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

• 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, Spacing for all Normal, 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.