Les boîtes à icônes sont très utiles lors de la création de sites Web. L’utilisation la plus courante concerne les sections qui répertorient les fonctionnalités des produits ou services. Dans ce didacticiel vidéo, vous verrez les différentes options dont vous disposez pour personnaliser chaque élément de ce widget: l’icône, le titre et la description. Les icônes sont dérivées des icônes Font Awesome, et vous pouvez les rechercher et choisir la bonne.

Onglet Contenu

Dans l’onglet Contenu, vous avez un contrôle total sur le contenu du widget.

  • Affichage – Définissez la vue de l’icône sur «Par défaut», «Empilé» ou «Encadré». Empilé avec un arrière-plan et encadré avec un cadre entourant l’icône.
  • Choisissez l’icône – Vous avez ici une liste de toute la collection d’icônes Font Awesome.
  • Titre et description – Insérez le titre et la description de votre widget Icon Box.
  • Lien vers – Insérez un lien et choisissez s’il s’ouvre dans une nouvelle fenêtre.
  • Position de l’icône – Définissez la position de l’icône sur le côté gauche, supérieur ou droit de la boîte (sur la vue mobile, elle restera centrée).
  • Balise HTML de titre – Choisissez la balise de titre, parmi H1..H6, Div, Span ou P.

Onglet Style

1. Icône

  • Couleur primaire – notez que si vous choisissez une boîte à icônes empilée ou encadrée, vous aurez également une couleur secondaire.
  • Espacement des icônes – L’espace entre l’icône et le titre.
  • Taille de l’icône – Augmentez et réduisez la taille de l’icône.
  • Icône Rotation – Rotation de l’icône.

2. Icône de survol

Choisissez la couleur principale et secondaire du survol de l’icône.

Animation – Choisissez parmi une longue liste d’animations pour le survol.

3. Contenu

une. Titre

  • Alignement – Gauche, centre, droite ou justifié.
  • Alignement vertical – Haut, milieu et bouton.
  • Espacement des titres – Définissez l’espacement entre le titre et la description.
  • Couleur du titre – Modifiez la couleur du titre.
  • Typographie – Ici, je peux personnaliser la typographie du titre.

b. La description

  • Couleur de la description – Modifiez la couleur de la description.
  • Typographie – Choisissez personnalisé pour changer la typographie, tout comme avec le titre.

Avancée

Définissez les options avancées applicables à ce widget

Source : https://docs.elementor.com/article/89-icon-box