Utilisation efficace de la boîte d'icônes dans Elementor

La création de sites web attrayants est indispensable dans le paysage numérique actuel. Elementor, un constructeur de pages largement utilisé pour WordPress, offre une variété de widgets pour créer des designs attrayants. Un de ces outils utiles est la boîte d'icônes, qui vous permet de structurer visuellement le contenu. Dans ce guide, nous plongeons profondément dans les fonctionnalités de la boîte d'icônes et vous montrons étape par étape comment l'utiliser efficacement dans vos projets.

Principales conclusions

• La boîte d'icônes utilise des icônes au lieu d'images, mais offre moins d'options de personnalisation.
• HTML peut être utilisé dans les champs de texte pour permettre des formatages spécifiques.
• La couleur et la taille des icônes sont personnalisables, tout comme leur alignement et leurs effets de survol.

Guide étape par étape pour utiliser la boîte d'icônes

1. Sélection de la boîte d'icônes

Premièrement, ouvrez votre éditeur Elementor. Pour utiliser la boîte d'icônes, faites-la simplement glisser depuis la liste des widgets jusqu'à votre design. Vous pouvez les trouver dans le menu Elementor sur le côté gauche. La boîte d'icônes est généralement située dans la section "Éléments".

2. Compréhension des bases de la boîte d'icônes

La boîte d'icônes se compose de deux éléments principaux: l'icône et le texte. Contrairement à une image, où vous avez plus d'options de personnalisation, les options pour les icônes sont un peu plus limitées. L'icône est centrée et en dessous se trouvent le titre ainsi que la description.

3. Sélection de l'icône et édition du texte

Après avoir inséré la boîte d'icônes, sélectionnez l'icône de votre choix. Pour ce faire, cliquez sur le champ de l'icône et parcourez les icônes disponibles. Choisissez par exemple l'icône du train pour ajouter un élément thématique à votre design.

Ensuite, ajoutez le titre et la description souhaités. L'HTML peut être utile ici, par exemple, pour commencer une nouvelle ligne après un bloc de texte en insérant des balises
.

4. Personnalisation des paramètres

La boîte d'icônes offre plusieurs options de personnalisation, notamment la taille et la couleur de l'icône. Dans les paramètres, vous pouvez définir comment l'icône est aligné par rapport au texte: à gauche, au centre ou à droite. Expérimentez avec les espacements pour que le texte soit élégant et clair.

Vous avez également la possibilité de définir des effets de survol pour l'icône. Par exemple, vous pourriez changer la couleur lorsque vous survolez avec la souris pour obtenir une rétroaction visuelle intéressante.

5. Typographie et couleurs

Pour améliorer la lisibilité, vous pouvez ajuster la typographie du texte. Modifiez la taille de la police, la police et la couleur pour le titre et la description. Assurez-vous que les couleurs s'accordent bien avec l'ensemble de votre site web. Cela contribue à un design cohérent.

Les couleurs ne sont pas les seules options de personnalisation; vous pouvez également contrôler les espacements entre l'icône, le titre et la description. Optimisez ces espacements pour améliorer la lisibilité et l'équilibre visuel de la boîte.

6. Sauvegarde et prévisualisation

Lorsque vous êtes satisfait de votre design, enregistrez vos modifications. Pour vérifier si tout est comme prévu, cliquez sur Aperçu. Vous pouvez ainsi voir comment la boîte d'icônes sera affichée sur votre site web.

Un dernier coup d'œil à votre design vous montrera si l'alignement, les espacements et les effets de survol sont agréables. Corrigez éventuellement de petits détails avant de publier la page.

Résumé

La boîte d'icônes dans Elementor est une excellente manière de présenter visuellement des informations de manière attrayante. Vous avez appris comment sélectionner des icônes, éditer du texte et personnaliser l'affichage. Avec les bons réglages, vous pouvez rendre votre site web non seulement fonctionnel, mais aussi esthétiquement attrayant.