Create a website with the Icon block

F T ʅ

Das Icon-Modul von SiteW erlaubt Ihnen, ein Icon zu Ihrer website mit nur einem Klick hinzuzufügen: es it sehr nützlich, um Ihren Besuchern klare und genaue Informationen zu geben. Es erlaubt auch Ihnen, die Navigation und das Design Ihrer Website zu verbessern.

Wählen Sie ein Icon

Beginnen Sie damit, ein Icon-Modul auf Ihrer Website einzufügen, indem Sie die Maus auf der Websiteerstellungsseite verwenden. Dann wählen Sie das Icon, das Sie wollen, zwischen den zahlreichen verfügbaren Möglichkeiten, im Dateimanager. You can choose several icons (up to 5).

Einen Link hinzufügen

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.

Das Design des Icons anpassen

Um das Aussehen des Icons anzupassen, gehen sie zur Design-Tafel, sobald das Modul ausgewählt wird.

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

Wählen Sie Ihre Farben mit dem Farbwähler aus. Legen Sie die Transparenz der Farbe fest, indem Sie den Schieberegler rechts verwenden Sie können die Hintergrundfarbe des Icons auf die gleiche Weise auswählen. You can set the normal and hover colors, if desired.

4- Spacing

Legen Sie den Abstand zwischen dem Icon und den Hintergrundränder fest, indem Sie den Schieberegler verwenden.

5- Outer margin

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

6- Rounded corners

Stellen Sie den Radius der Ecken des Icons fest, indem Sie den Schieberegler verwenden. So können Sie ein rundes oder quadratisches Icon erstellen. Bitte beachten Sie, dass der Hintergrund nur sichtbar ist, wenn eine Hintergrundfarbe ausgewählt wird.

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…