Elementor est un constructeur de pages puissant pour WordPress qui vous permet de créer des sites web attrayants sans connaissance en programmation. L'un des éléments les plus utiles dans Elementor est la liste d'icônes. Avec cette fonction, vous pouvez présenter visuellement des informations de manière attrayante, que ce soit pour des listes de tâches, des liens de médias sociaux ou d'autres contenus. Dans ce guide, je vais vous montrer étape par étape comment créer et personnaliser une liste d'icônes attrayante.
Principales conclusions
- Avec la liste d'icônes, vous pouvez facilement ajouter des éléments visuels.
- Chaque entrée peut être personnalisée individuellement avec du texte, des icônes et des liens.
- Le style et la mise en page de la liste sont flexibles et adaptables.
Guide étape par étape
Étape 1: Ouvrir Elementor et ajouter une liste d'icônes
Pour commencer, ouvrez l'éditeur Elementor sur la page web sur laquelle vous travaillez. Recherchez l'option "Liste d'icônes" dans la section des widgets Elementor. Faites glisser ce widget dans la section souhaitée de votre page.
Étape 2: Personnaliser les éléments de la liste d'icônes
Dès que le widget est placé, vous verrez par défaut quelques éléments de liste. Vous pouvez modifier le nombre d'icônes et de lignes de texte en utilisant les options correspondantes dans le menu de gauche. Cliquez sur "Élément de liste 1" pour modifier le texte. Vous pouvez par exemple entrer "YouTube" ici.
Étape 3: Sélectionner des icônes
Pour sélectionner une icône appropriée pour chaque élément de liste, cliquez sur la zone d'icône. Une fenêtre s'ouvrira où vous pourrez choisir parmi une bibliothèque étendue. Recherchez "YouTube" et ajoutez l'icône souhaitée.
Étape 4: Ajouter des liens
Vous pouvez également attribuer un lien à chaque élément de la liste. Cliquez sur le champ "Lien" à côté du texte et insérez l'URL correspondante, par exemple le lien vers votre chaîne YouTube.
Étape 5: Ajuster la mise en page
Vous pouvez maintenant configurer les options de mise en page. Choisissez entre "En ligne" ou "Pleine largeur". Décidez comment vous souhaitez visualiser votre liste d'icônes pour correspondre au style global de votre site web.
Étape 6: Personnaliser le style
Allez dans l'onglet Style pour modifier l'apparence de votre liste d'icônes. Ici, vous pouvez définir l'espacement entre les lignes, ajuster l'alignement et activer d'éventuels éléments de séparation. Choisissez par exemple une ligne en pointillés comme séparateur pour un look élégant.
Étape 7: Ajuster les couleurs
Vous pouvez modifier les couleurs de vos icônes et de votre texte. Choisissez par exemple une couleur verte lorsque vous survolez l'élément avec la souris. Cela crée un effet d'ombre interactif qui attire l'attention de vos visiteurs.
Étape 8: Définir les tailles de police et la typographie
Pour vous assurer que la taille de police correspond visuellement aux icônes, ajustez la taille du texte sous l'onglet "Texte". Par exemple, réglez la taille à 25 et choisissez une couleur de texte appropriée pour obtenir un effet visuel harmonieux.
Étape 9: Aperçu et sauvegarde
Lorsque vous êtes satisfait de votre liste d'icônes, cliquez sur "Enregistrer" pour appliquer les modifications. Passez en revue l'aperçu pour voir à quoi ressemble la liste en frontend.
Étape 10: Tester la fonctionnalité
Testez les liens sur votre page publiée pour vous assurer que tout fonctionne comme prévu. Vérifiez également que les effets de survol s'affichent correctement pour garantir l'aspect interactif.
Résumé
Dans ce guide, tu as appris comment créer étape par étape une liste d'icônes attrayante et fonctionnelle avec Elementor pour WordPress. Tu as juste besoin de faire quelques ajustements simples pour personnaliser la liste à ton style et optimiser l'expérience utilisateur.
Questions fréquentes
Comment ajouter un nouvel élément à la liste d'icônes?Il suffit de cliquer sur le symbole "+" dans le widget de la liste d'icônes pour ajouter un nouvel élément.
Puis-je changer les icônes après les avoir ajoutées?Oui, tu peux modifier chaque icône à tout moment en cliquant sur l'élément correspondant dans la liste.
Comment changer les couleurs des icônes?Dans la section Style de l'éditeur Elementor, tu peux ajuster les couleurs des icônes et du texte.
Puis-je ajouter des liens vers des médias sociaux?Oui, chaque entrée de la liste peut être associée à un lien, idéal pour les médias sociaux.
Y a-t-il une fonction d'aperçu dans Elementor?Oui, tu peux prévisualiser tes modifications avant de les enregistrer.
