Elementor offre une variété d'outils pour concevoir votre site WordPress, l'un des éléments fondamentaux étant l'icône. Les icônes ne sont pas seulement des éléments décoratifs, elles peuvent également améliorer l'expérience utilisateur de manière fonctionnelle et aider à communiquer des informations importantes en un coup d'œil. Apprenez ici comment appliquer et personnaliser des icônes dans Elementor pour améliorer votre site web.
Principales conclusions
- Les icônes sont des éléments polyvalents qui peuvent remplir à la fois des fonctions artistiques et informatives.
- Vous pouvez personnaliser individuellement les icônes, y compris la couleur, la taille, la forme et l'animation.
- Une option de lien vous permet d'utiliser efficacement les icônes pour la navigation.
Guide étape par étape
Étape 1: Ajouter une icône
Pour ajouter une icône à votre section, faites glisser le widget d'icône dans la zone souhaitée de votre page. Vous verrez une présélection apparaître, généralement une icône d'étoile.
Étape 2: Changer l'icône
Cliquez sur l'icône existante pour ouvrir la fenêtre de sélection. Ici, vous pouvez choisir parmi une variété d'icônes. Par exemple, choisissez une icône de taxi pour associer un thème spécifique à votre contenu.
Étape 3: Sélectionner le type d'icône
Elementor propose trois types d'icônes: icônes régulières, icônes pleines et icônes de marques. Les icônes régulières ont généralement seulement un contour, tandis que les icônes pleines sont entièrement remplies. Les icônes de marques correspondent à des logos connus, tels que ceux d'Amazon ou d'Apple.
Étape 4: Personnaliser les paramètres d'affichage
Vous pouvez personnaliser l'apparence de votre icône de différentes manières - en utilisant "Stacked" (totalement rempli), "Framed" (avec contour) ou "Default" (arrière-plan affiché). Choisissez l'option qui correspond le mieux à l'esthétique de votre site web.
Étape 5: Ajuster la taille et la forme de l'icône
Un autre point important est la forme de l'icône. Vous pouvez choisir entre circulaire ou carré. Un cercle est souvent perçu comme plus harmonieux, tandis qu'un carré laisse une autre impression graphique.
Étape 6: Définir le lien
Pour créer de l'interactivité, vous pouvez définir un lien. Par exemple, entrez l'adresse de votre page d'accueil, afin que les visiteurs soient dirigés vers cette page en cliquant sur l'icône.
Étape 7: Personnaliser le style
Sous "Style", vous avez la possibilité de définir la couleur principale et secondaire. Pour les effets au survol, vous pouvez également définir comment les couleurs doivent changer. Par exemple, changez la couleur principale en rouge et la couleur secondaire en noir.
Étape 8: Définir les effets au survol
Si vous souhaitez renforcer l'interactivité, vous pouvez également ajouter des effets d'animation pour l'élément au survol. Ces options incluent des effets tels que "Pousser" ou "Grandir". Choisissez un effet souhaité pour améliorer l'expérience utilisateur.
Étape 9: Définir la taille et l'espacement
Vous pouvez ajuster la taille de l'icône, tandis que l'espacement, également appelé marge intérieure, détermine l'espace entre l'icône et son cadre interne. Expérimentez avec ces valeurs pour trouver l'équilibre souhaité.
Étape 10: Lier les valeurs
Si vous souhaitez appliquer des paramètres individuels pour différentes zones d'une icône, vous pouvez lier les valeurs ou les ajuster séparément. Les valeurs liées garantissent que les modifications seront appliquées simultanément à toutes les parties.
Étape 11: Vérifier les paramètres avancés
Sous les paramètres avancés, vous trouverez les mêmes options que dans les paramètres de base. Assurez-vous que tout est correctement configuré pour garantir une présentation cohérente sur votre site.
Résumé
Dans ce guide, vous avez appris les étapes de base pour ajouter et personnaliser des icônes dans Elementor. De la sélection de l'icône à la couleur, la taille et la liaison - avec ces techniques, vous pouvez concevoir des sites Web à la fois esthétiques et fonctionnels.
Questions fréquemment posées
Comment choisir le bon icône ?Choisissez une icône en adéquation thématique avec votre contenu ; Elementor propose une vaste bibliothèque.
Puis-je changer la couleur de l'icône ?Oui, vous pouvez ajuster à la fois la couleur primaire et secondaire de l'icône.
Comment ajouter une animation ?Vous pouvez sélectionner différents effets d'animation pour l'icône dans les paramètres de survol.
