How to use the Icon List elements

This article will introduce you to the Icon List element and how to use it.

About the Icon List element

The Icon List element allows you to display a list of content, each of them starting with an icon. 


 


From the GemPages Dashboard, open your preferred template to edit. You can quickly find the Icon List element on the left sidebar of the editor page, under the “List” section. 

 

 

There are two types of Icon List elements available in the GemPages Editor. The Icon List element is used to design a vertical list, while the Icon List Hoz element can help you show multiple icons horizontally.

 

 

When clicking on the element, you will find its configuration options in the left sidebar, including the Settings and Design tabs. 

Configure the Settings Tab

Item list

In this first section, you can add or remove items. To add more, click on the Duplicate icon of a tab. To remove one, click on the Trash icon of the selected item, then confirm the action.

 

 

To change the Icon and text, click on it (which itself is an Icon or Text Block element) on the main Editor to open its configurations on the left sidebar.

Icon width

Use the slider or input the number into the box to adjust the distance between the icon and text in pixels. 

 


Spacing

Use the slider or input the number into the box to adjust the distance between the two items in pixels. 

 


 

Alignment

This parameter allows you to determine how the element is positioned on your page. There are three options to choose from left-aligned, centered, and right-aligned.

 


 

Extra Class

If you wish to further customize the element with coding, please use this field to add a class name and refer to it in the CSS file.

 

 

Configure the Design tab

To style how the element looks, please navigate to the Design tab and follow the instructions in this article

How to upload your icon

If you can't find your desired icon in the GemPages icon library, please follow the instructions below to upload your own. 


Step 1: From the GemPages Dashboard, open your preferred template to edit. Drag & drop the Icon List element to the position you wish.


Step 2: After that, you will need to remove the Icon from the Icon list and replace it with an Image element. 


Right-click on the Icon and select Delete. Next, drop an Image element to the previous position of the icon. 

 


Step 3: Click on the Image element to reveal its configuration on the left sidebar. Under the Image section, hover over the image and select “Replace Image” to upload the icon from your device. 

 

 

If you're interested in learning more about the powerful and user-friendly GemPages, feel free to explore the Help Center or get in touch with our customer support via email or live chat.


Was this helpful?