You might be familiar with this problem: sometimes you just don't have the perfect image at hand for the information you want to convey. In this case, the icons and text elements can be helpful. You can choose from a large collection of different icons to illustrate your message.
Skip to:
- Ho to add an icon element
- How to design the icon element
- How to edit the background and border
- Different use cases
Ho to add an icon element
- In the sidebar of your cockpit, navigate to Editor.
The Editor opens. - Navigate to Pages.
- Select the page to edit or add a new page.
A preview of the page opens on the right-hand side. - Navigate to Content elements → Icons.
- Drag an icon content element to the desired position.
You can only drop content elements into the blue areas of the page. - Select Add icon.
The view Add icon appears. - Select an icon from the library. To open the library, select the Browse icon library link.
- Optionally, add a link to your icon
- If you want the link to be opened in a new tab, activate the Open link in new tab checkbox.
- To stop using the link, select
.
- Design the icon element by making the respective settings. For further information, also refer to the section below.
- Once you are done, select Save.
You have added an icon element.
To edit the icon element again, hover over it and select .
To add/remove an icon column make use of the content element settings. For further information refer to Edit content elements.
How to design the icon element
You can make various settings to tailor each icon perfectly to the design of your website.
Note
It is not possible to automatically apply the same design to multiple icons. Repeat the design settings for each icon individually.You can find the following settings on the tab:
Icon settings
| Icon color | Pick the colour you want to use by selecting the color square. For further information, refer to Learn more about the color settings. |
| Alignment | Select the radio buttons under Alignment to display the icon on the left, on the right or in the middle of the icon area. |
| Spacing | Use the slider under Spacing to adjust the spacing above and beneath the icon. You can also change the number in the field on the right from 0-50. |
| Sizing | Use the slider under Size to adjust the icon's size. You can also change the number in the field on the right from 15-100. |
| Reset | Select the Reset link to restore the default settings for the icon. Note that this will not restore your previous settings, but the default settings of the selected theme. |
How to edit the background and border
Besides the icon itself, you can also make various settings for the background and the border of the background. This way you can fully customize the look and feel of the element.
Note
It is not possible to automatically apply the same design to multiple icons. Repeat the design settings for each icon individually.You can find the following settings on the tab:
Background settings
| Color | Pick the color you want to use by selecting the color square. For further information, refer to Learn more about the color settings. |
| Size | Use the slider under Size to adjust the size of the background. You can also change the number in the field on the right from 0-100. |
| Corner radius | Use the slider under Corner radius to adjust the shape of the background. You can also change the number in the field on the right from 0-50. Depending on the setting, the background will be displayed square, with rounded corners or round. |
| Reset | Select the Reset link to restore the default settings for the icon. Note that this will not restore your previous settings, but the default settings of the selected theme. |
Border settings
| Color | Pick the color you want to use by selecting the color square. For further information, refer to Learn more about the color settings. |
| Weight | Use the slider under Weight to adjust the thickness of the border. You can also change the number in the field on the right from 0-20. |
| Reset | Select the Reset link to restore the default settings for the icon. Note that this will not restore your previous settings, but the default settings of the selected theme. |
Different use cases
Of course, you can use the content element for all kinds of use cases. But precisely because there are so many different possibilities, you can find a few suggestions below to boost your creativity.
Unique selling points
Present the best features of your business, similar to your unique selling points:
Social Media
As you can also add a link to an icon, you can for example use this feature to draw your visitors' attention to your social media channels:
Provide information
But of course you can also use them to provide information on shipping and special offers such as a bookable installation service, for example. For this, you can use the link feature as well and, for example, redirect the visitors to other pages with additional information about your installation service or to the Payment & shipping page.