The Icon list module offers an easy way of visually communicating what products you sell, display important processes, or other elements that you want the visitor to notice on your website. Additionally, you can link your icons to different pages on your website, external websites, emails or files to help visitors quickly get to the information they need. You can add an Icon list module by selecting Icon list under the category Text and structure in the Add module overlay.
Hover the module and click on Content or Design on the dropdown to edit your Icon list module.
Click on Add element to add an icon to your list and click again on the icon to expand the settings for it.
For each added icon you can set the following:
- Icon: choose which icon you want to display on the module (remember that you can scroll to view more icon options or use the search function).
- Link type: add a link on your icon. Choose between an internal page, external URL, email or upload a file that visitors can download when clicking the icon.
- Open link in new tab: enabling the option Open link in new tab will open your linked content in a new browser tab when clicked.
- Set "nofollow" property: activate Set "nofollow" property if you don't want search engines to follow the hyperlink. When this setting is enabled, your link will not affect the target's search engine ranking.
What do the different link types mean?
External page: add a URL to an external page. This link type will by default activate the setting Open link in new tab to ensure that the visitor doesn't completely leave your website when they click your link.
Internal page: link to a page on your website.
Email: add an email address in the field. When the visitor clicks on the link, their default email client will open.
File: include a file by clicking on Add or drop file to browse your hard drive or drop your file on the outlined area. When visitors click on the link, they'll download the file.
You can change the order in which your icons are displayed by dragging on an icon and moving it to a slot of your choice.
The Design section is where you change the background, border and spacing of your Icon list module.
For more specific styling options, click on More local design options. There you can apply styling to the icon and decide how you want it to appear. For a detailed walkthrough of all styling parameters, please refer to our styling guide.
Styling of icons
Please note that any styling added applies to all icons on the module. Icons can't be styled individually.