Use icon with text

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.

How to add an icon element

1. In the sidebar of the administration, navigate to Editor.
   The Editor opens.
2. Navigate to Pages.
3. Select the page to edit or add a new page.
   A preview of the page opens on the right-hand side.
4. Navigate to Content elements → Icons.
5. Drag an icon content element to the desired position.
   You can only drop content elements into the blue areas of the page.
6. Select Add icon.
   The Add icon view appears.
7. Select an icon from the library. To open the library, select the Browse icon library link.
8. 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 .
9. Design the icon element by making the respective settings. For further information refer to the section below.
10. Once you are done, select Save.

You have added an icon element.

To edit each 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.

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 colour	Pick the colour you want to use by selecting the colour square. For further information refer to Learn more about the colour 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.
Size	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 & 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 customise the look and feel of the element.

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

Colour	Pick the colour you want to use by selecting the colour square. For further information refer to Learn more about the colour 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

Colour	Pick the colour you want to use by selecting the colour square. For further information refer to Learn more about the colour 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 customers' 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 customers to other pages with additional information about your installation service or to the Payment & shipping page.