Icon List Module

With the Icon List Module you can add visually interesting icons to your site. It is possible to find the Icon List Module in the Basic Modules menu, add it to your website by dragging it from the top bar to a row or column of your preference.


EDIT THE ICON LIST MODULE

To open the editing menu, double-click on top of the module you wish to modify or hover the mouse on top of it to find the blue Module menu and click on the Edit option.


1. Content

By default, when dragging in a new Icon List Module, one element will already be created. Click on top of it to reveal a dropdown menu with multiple content options.


1.1. Link

It is possible to associate a link to each individual icon. You can choose between linking to an external page, an internal page, an email or a file. If you don't wish to link to the icon, simply leave the field blank.


1.1.1. Open Link in New Tab

This option will be enabled by default, which results in opening the page, email or file in a separate tab. If you wish to open the link in the same tab, disable the option by toggling it off.


1.1.2. Set "No Follow" Property

In this section it is possible to set a "nofollow" property to that specific link. This is a particularly relevant setting if you do not want search engines to consider that hyperlink and, therefore, when this setting is enabled, your link will not affect the target's ranking in the search engine index.


1.2. Icon

In this section you will be able to choose from a large variety of icons those you want to add to your site. Search specific keywords by typing them down on the field or scroll down the list to manually find the relevant icon.


1.2.1. Select & De-Select Icon

When an icon is selected, it will be highlighted in a lighter color. To de-select an icon, simply click on top of it to return it to the regular status.


1.3. Change Order & Delete Element

To change the icons order simply click on the three vertical dots on the left side of each item and drag it to your preferred position. To delete an item of a list, simply click on the trash icon on the right side.


2. Styling


2.1. Icon Placement

This option allows you to define the icon placement within the column where the module is inserted. Choose to align it to the left, centered or to the right. 


2.2. Icon

2.2.1. Width & Height

These options allow you to define the width and height of the icon list.


2.2.2. Icon Size and Color

In these fields you can choose the actual icon size as well as color. Please note that if you have defined your icons to include a link, you should select the color in "Icon Link Color" rather than in "Icon Color"; moreover, the "Icon Link Color" also offers the possibility to differentiate a normal and a hover color.

2.2.3. Background Color

This section allows you to style the background of the icon list; again, it is possible to differentiate a normal and a hover color.


2.2.4. Border

In this section you can define the border color (normal and hover), widht, style, radius and margin.


2.3. Background

Choose a solid background color and set its transparency for the icon list module background.


2.4. Border

Personalize the outside border of the icon list module regarding color, width, style and radius.


2.5. Spacing

Adjust the spacing of the icon list module - both in terms of margin and padding.


3. Icon List Global Styling

Instead of individually styling each Icon List module it is possible to do it automatically with Global Styling. Under the Global Styling tab, there is a Module Design option on the left menu. Click on it to expand the options and you should find the Icon List menu. Click here to read all about Icon List Global Styling!

 

Anything we’ve not covered?

Contact Us