Icon block

The SiteW Icon block will allow you to add an icon to your site in just one click: it is very useful to convey clear and concise information to your visitors. It will also enable you to improve your website navigation and design.

Choose your icon

Start with dragging an Icon block to your site using your mouse on the website creation page. Then select your icon of choice among the numerous options available in the file manager. You can choose several icons (up to 5).

Add your link

Easily add one or several links to your icon by clicking on the button Add a link in the blue panel on the left side of your screen.
Choose your type of link and if needed, enter the required information in the input field: external website, email address, phone number, website page, blog article or product, document, image, or check the “No link” option. If several icons have been added, it is possible to add one link per icon. You can replace the Social block by the Icon block, by selecting social media icons and adding your links.

Customize the design of your icon

To customize the way your icon look, go to the Design tab, once your block is selected.

1- Icon size

You can choose a standard size for your icon.

2- Style of your icon

You can choose a preset style, similar for all the blocks that can be customized (Blog, FAQ, Text, etc.) or create a custom style, just for your Icon block.

• To use a preset style, select a style in the list. The style can be customized (this configuration will apply to all blocks using this style).
• To use a unique style, you can:
  -Add your configuration directly in the Design panel, just like with the preset styles.
  -Clone in a preset style: you can copy the style you have just created in a preset style (by clicking on the button “Clone style in a new preset”)
  -Copy a preset style: conversely, you can also get inspired by an already existing style (by clicking on the button “Copy a preset style here”)

3- Choose your colors

Select your color of choice using the color picker. You can define the transparency of the color by using the slider on the right. You can choose the background color of your icon using the same way. You can set the normal and hover colors, if desired.

4- Spacing

Set the spacing between the icon and the background borders by moving the cursor along the appropriate slider.

5- Outer margin

If you add several icons, you can add an outer margin.

6- Rounded corners

Set the border radius of your icon background by moving the cursor along the appropriate slider. You will thus be able to create an icon with a round or square background. Please note that the background is only visible if a background color has been selected.

7- Borders

You can set the border width, and choose the border style, by using the slider and the dropping menu.

8- Shadows

You can add an inner or outer shadow to your icon, and set the distance, color, spread and size, by using the configuration tools at your disposal.

9- Custom CSS

You can add your own CSS in the input field.

The Icon block will allow you to add effective visual elements to your website: call to action buttons, social media icons, graphic elements…