Module Icône

9307 vues 3 minutes
Disponible pour ces formules :
  • Découverte
  • Blog
  • Premium
  • E-Commerce
  • Pro

L’outil Icône de SiteW vous permettra d’ajouter en un seul clic une icône sur votre site : pratique pour transmettre des informations claires et concises à vos visiteurs et pour faciliter leur navigation tout en améliorant le design de votre site.

Choisir une icône

Insérez un module Icône à votre site par simple glisser/déposer dans l’outil de création de site et faites votre choix dans le gestionnaire de fichiers parmi les nombreuses options disponibles. Vous pouvez choisir plusieurs icônes à la fois (jusqu’à 5) puis répéter l'opération si vous en souhaitez davantage.

module icone

Insérer un lien

Ajoutez facilement un ou plusieurs liens sur votre icône en cliquant sur le bouton Ajouter un lien dans le panneau Contenu (de couleur bleue) des propriétés du module sur la gauche de votre écran.

Choisissez votre type de lien et rentrez, si besoin, les informations demandées dans le champ de saisie : Site externe, Adresse mail, numéro de téléphone, page du site, article ou produit, document, image.

Si plusieurs icônes ont été ajoutées, vous pouvez choisir un lien par icône. Il est aussi possible de remplacer le module Réseaux Sociaux par le module Icône, en choisissant des icônes de réseaux sociaux, et en ajoutant ses liens.

Configuration du design de l’icône

Pour personnaliser l’apparence de votre icône, rendez-vous dans l’onglet Design (en vert) une fois votre module Icône sélectionné.

1- Choix de la taille

Vous pouvez choisir entre différente taille d'icône selon vos envies et besoins, de 16 à 256 pixels. Vous pouvez aussi ajuster manuellement la taille en étirant simplement l'icône.

2 - Choix du style

On peut choisir un style prédéfini identique pour tous les modules dont le style peut être personnalisé (Blog, FAQ, Texte, etc.), ou définir un style personnalisé unique pour le module Icône.

  • Pour utiliser un style prédéfini, il faut sélectionner un style dans la liste proposée. Ce style peut être personnalisé (la configuration s’appliquera à tous les modules qui utilisent ce style).
  • Pour utiliser un style unique, on peut:
    - Ajouter des personnalisations directement depuis le panneau design comme pour les styles prédéfinis.
    - Cloner dans un style prédéfini : il est possible de migrer le style qu’on vient de créer vers un style prédéfini (en cliquant sur le bouton “ Cloner dans un style prédéfini”)
    - Copier un style prédéfini : à l’inverse, il est possible de s’inspirer d’un style déjà créé, en cliquant sur le bouton “Copier un style prédéfini ici”)

3- Choix des couleurs

Sélectionnez la couleur de votre choix grâce à l’outil de sélection des couleurs. Vous pouvez déterminer la transparence de la couleur sur la réglette de droite. Procédez de la même manière pour choisir la couleur de fond de votre icône. Vous pouvez déterminer la couleur normale et la couleur au survol de la souris, si désiré.

icone configurationbouton icone

 

4- Espacement

Définissez l’espacement entre l’icône et les bordures du fond en déplaçant le curseur sur la réglette prévue à cet effet.

5- Marges externes

Si vous ajoutez plusieurs icônes, vous pouvez ajouter des marges externes.

6- Bords arrondis

Définissez l’arrondi des angles de la bordure de votre icône en déplaçant le curseur sur la réglette ad hoc. Ainsi vous pourrez créer une icône qui possède un fond carré ou rond. Notez que le fond est visible seulement si une couleur de fond est définie.

7- Bordures

Vous pouvez déterminer l’épaisseur et l’apparence de la bordure, à l’aide de la réglette et du menu déroulant.

8- Ombres

Vous pouvez ajouter une ombre interne ou externe à votre icône et en déterminer la distance, la couleur, la diffusion et la taille, en utilisant les outils de réglage à disposition.

9- CSS personnalisé

Vous pouvez ajouter votre CSS personnalisé dans le champ de saisie.

Changer la couleur au survol

Le module Icône vous permettra d’ajouter des composants visuels efficaces à votre site web : boutons d’appel à l’action, icônes de réseaux sociaux, éléments graphiques…

Alexandre Hilf
Chief Marketing Officer
En soif de savoir et d'échanges, je vous partage mes meilleures astuces pour faire de vous un véritable expert du marketing.

Dernière mise à jour : 04 juin 2021

Quoi de neuf ?
Les dernières mises à jour et nouveautés sur notre outil, après un décryptage poussé auprès de nos développeurs.