La plupart des visiteurs parcourent une page avant de décider de la lire ou non. Si vos principaux avantages sont enfouis dans des paragraphes de texte, de nombreuses personnes peuvent partir sans jamais les voir.
Les boîtes de fonctionnalités résolvent ce problème en associant chaque avantage à une petite icône et à une courte description, afin que les visiteurs comprennent ce que vous proposez en un coup d'œil. Vous pouvez également ajouter un bouton d'appel à l'action à chaque boîte pour diriger les lecteurs vers plus de détails.
Dans ce guide, nous vous montrerons comment ajouter des boîtes de fonctionnalités avec des icônes dans WordPress en utilisant l'éditeur de blocs intégré ou un plugin de constructeur de pages.
Quelle méthode devriez-vous utiliser pour ajouter des boîtes de fonctionnalités ?
Si vous ajoutez une ou deux sections de fonctionnalités à une page ou un article existant, utilisez la méthode de l'éditeur de blocs. C'est gratuit, intégré à WordPress 7.0 et versions ultérieures, et ne nécessite aucun autre plugin.
Si vous concevez une page de destination complète à partir de zéro, un constructeur de pages est le meilleur choix. Vous obtenez des modèles prêts à l'emploi et plus d'options de style pour chaque icône.
Vous pouvez utiliser les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser :
Méthode 1 : Ajouter des boîtes de fonctionnalités avec des icônes en utilisant l'éditeur de blocs (Gratuit)
L'éditeur de blocs WordPress crée des pages à partir de blocs, qui sont des éléments de contenu individuels comme un paragraphe, une image ou un bouton.
WordPress 7.0 a ajouté un bloc d'icônes intégré qui vous permet d'insérer des icônes SVG sans plugin. SVG est un format d'image créé à partir de code, donc les icônes restent nettes quelle que soit la taille et se chargent rapidement.
Si vous utilisez une version plus ancienne de WordPress, vous ne trouverez pas le bloc d'icônes dans l'éditeur. Vous devrez mettre à jour WordPress avant de suivre cette méthode.
Étape 1 : Ajouter un bloc Colonnes
Commencez par ajouter un bloc Colonnes. Tout d'abord, ouvrez la page où vous souhaitez ajouter vos boîtes de fonctionnalités. Ensuite, cliquez sur l'icône + Ajouter un bloc, recherchez Colonnes, et cliquez sur le bloc Colonnes pour l'ajouter.
WordPress vous présentera plusieurs dispositions de colonnes. Les nombres indiquent la largeur de chaque colonne. Par exemple, 50 / 50 crée deux colonnes de largeur égale.
Nous sélectionnerons 33 / 33 / 33 pour créer trois colonnes égales, mais vous pouvez choisir n'importe quelle disposition qui convient à votre contenu.
Étape 2 : Ajouter des icônes à vos boîtes de fonctionnalités
Ensuite, cliquez sur le bouton + dans la colonne et recherchez Icône. Lorsque le bloc Icône apparaît, cliquez dessus pour l'ajouter.
WordPress ajoutera automatiquement une icône d'information à la colonne. Cliquez sur le bouton 'Remplacer' pour choisir une autre icône.
Cela ouvre la bibliothèque d'icônes. Vous pouvez taper un nom, tel que photo ou magasin, dans la barre de recherche, ou faire défiler les icônes disponibles.
Lorsque vous trouvez l'icône que vous souhaitez, cliquez dessus pour l'ajouter à votre colonne.
Vous pouvez ensuite personnaliser l'icône à l'aide des paramètres du bloc. Selon votre thème et votre configuration, vous pouvez modifier la couleur de l'icône, la couleur d'arrière-plan, les dimensions et la bordure. Vous pouvez également utiliser la barre d'outils pour centrer l'icône.
Étape 3 : Ajouter du texte à vos boîtes de fonctionnalités
Une fois vos icônes en place, cliquez sur le bouton + sous l'icône dans la première colonne et ajoutez un bloc Titre pour le nom de la fonctionnalité.
Ensuite, ajoutez un bloc Paragraphe en dessous et ajoutez une courte description de la fonctionnalité. Une ou deux phrases suffisent généralement.
Répétez le même processus pour les autres colonnes.
Étape 4 : Créer plus de lignes de boîtes de fonctionnalités (facultatif)
Si vous souhaitez ajouter plus d'une ligne de blocs de fonctionnalités, sélectionnez le bloc Colonnes et cliquez sur le menu à trois points dans la barre d'outils. Ensuite, sélectionnez Dupliquer.
Cela crée une copie de la ligne entière. Vous pouvez ensuite remplacer les icônes et le texte par un nouveau contenu en suivant les mêmes étapes ci-dessus.
Étape 5 : Publier vos boîtes de fonctionnalités avec des icônes
Lorsque vous êtes satisfait de vos blocs de fonctionnalités, cliquez sur le bouton Enregistrer ou Publier pour les mettre en ligne.
Vous pouvez ensuite visiter votre site Web pour voir les blocs de fonctionnalités en action :
Méthode 2 : Ajouter des boîtes de fonctionnalités avec des icônes en utilisant un constructeur de pages
L'éditeur de blocs fonctionne bien lorsque vous souhaitez ajouter une section de fonctionnalités à une page existante. Mais si vous concevez une page de destination complète et que vous souhaitez plus de contrôle sur la mise en page et le style, un constructeur de pages par glisser-déposer peut vous offrir plus de flexibilité.
Nous utiliserons SeedProd pour cette méthode car nous l'utilisons sur nos propres sites. La plupart des constructeurs de pages par glisser-déposer, comme Elementor, offrent un élément de boîte à icônes et une bibliothèque d'icônes intégrée. Pour plus d'informations, consultez notre avis sur SeedProd.
Étape 1 : Installer et configurer le constructeur de pages
Tout d'abord, vous devez installer et activer le plugin SeedProd. Pour plus de détails, consultez notre guide sur comment installer un plugin WordPress.
Remarque : Il existe une version gratuite du plugin, mais nous utiliserons la version payante car le bloc Boîte à icônes et la bibliothèque d'icônes ne sont disponibles que sur les plans sous licence.
Une fois le plugin activé, allez dans SeedProd » Paramètres et entrez votre clé de licence. Vous pouvez trouver votre clé en vous connectant à votre compte SeedProd.
Étape 2 : Choisir un modèle de page de destination
Ensuite, allez dans SeedProd » Pages de destination et cliquez sur « + Ajouter une nouvelle page de destination ».
Ensuite, entrez un nom pour votre page. SeedProd utilisera également ce nom pour créer l'URL de la page, mais vous pouvez modifier l'URL si nécessaire.
Sur l'écran suivant, vous choisirez un modèle. Chaque modèle peut être personnalisé par glisser-déposer, mais en choisir un qui correspond à votre objectif peut vous faire gagner du temps.
Pour ce guide, nous utiliserons le Modèle vierge. Survolez-le et cliquez sur l'icône de coche pour le sélectionner.
Ensuite, cliquez sur « Enregistrer et commencer à modifier la page ».
Étape 3 : Créer vos boîtes de fonctionnalités avec des icônes
Puisque nous commençons avec un modèle vierge, la première étape consiste à choisir une mise en page. Ici, choisissons la mise en page à colonne unique pour concevoir la zone d'en-tête au-dessus de vos blocs de fonctionnalités.
Vous pouvez ensuite faire glisser le bloc Titre depuis le menu de gauche dans la page. Sélectionnez le bloc pour modifier son texte et ajuster sa mise en forme à l'aide des options du panneau de gauche.
Répétez le processus avec le bloc Texte.
Vous pouvez également personnaliser l'en-tête en ajoutant une image d'arrière-plan ou en modifiant sa mise en forme. Pour plus d'options, cliquez sur l'onglet « Avancé » pour ajuster l'espacement, ajouter une bordure, ajouter des effets d'animation, et plus encore.
Une fois que vous avez terminé avec l'en-tête, vous pouvez créer les blocs de fonctionnalités. Faites glisser le bloc Colonne depuis le panneau de gauche dans l'éditeur et placez-le juste en dessous de la zone d'en-tête.
Après cela, vous pouvez choisir une mise en page. Pour cet exemple, nous utiliserons l'option avec trois colonnes égales.
Ensuite, trouvez le bloc Boîte d’icônes dans le menu de gauche et faites-le glisser dans la première colonne.
Le bloc comprend une icône par défaut, un titre et un exemple de texte que vous pouvez personnaliser.
Pour changer l’icône, trouvez la section Icône/Image dans le panneau de gauche. Ensuite, survolez l’icône actuelle et cliquez sur le bouton pour la remplacer.
Cela ouvre la bibliothèque d’icônes. Vous pouvez rechercher une icône spécifique ou parcourir les options disponibles. Lorsque vous en trouvez une qui vous plaît, cliquez dessus pour l’ajouter à votre boîte de fonctionnalités.
Une fois que vous avez sélectionné une icône, cliquez dessus pour ouvrir ses paramètres dans le menu de gauche. Ici, vous pouvez changer son alignement, sa taille et sa couleur.
Étape 4 : Personnaliser le contenu de votre boîte de fonctionnalités
Ensuite, sélectionnez le texte de votre Boîte d’icônes pour ouvrir ses paramètres dans le menu de gauche.
Vous pouvez remplacer le titre et la description d’exemple par votre propre texte de fonctionnalité. Vous pouvez également ajouter des liens ou changer l’alignement et la couleur du texte.
Répétez ces étapes pour les autres colonnes, en ajoutant une icône et un texte de fonctionnalité différents à chacune.
Étape 5 : Publier votre page de destination
Si vous souhaitez ajouter une autre rangée de boîtes de fonctionnalités, survolez la section et cliquez sur le bouton Dupliquer la rangée. Ensuite, remplacez les icônes et le texte par votre nouveau contenu.
Vous pouvez également personnaliser le reste de votre page de destination en ajoutant des images, des boutons d’appel à l’action ou d’autres blocs. Le processus est similaire : faites glisser le bloc que vous souhaitez dans l’éditeur et personnalisez-le à partir du panneau de gauche.
Lorsque votre page de destination vous convient, cliquez sur le bouton « Enregistrer » puis sélectionnez « Publier » pour la mettre en ligne. Vous pouvez maintenant voir la page de destination en action :
FAQ sur les boîtes de fonctionnalités avec icônes
Voici quelques questions courantes sur l’ajout de boîtes de fonctionnalités avec des icônes dans WordPress :
Comment ajouter des icônes dans WordPress ?
Si vous utilisez WordPress 7.0 ou une version ultérieure, vous pouvez utiliser le bloc Icône intégré, qui vous permet de rechercher dans la bibliothèque d’icônes WordPress par nom. Pour des ensembles d’icônes plus importants comme Font Awesome, vous aurez besoin d’un plugin ou d’un constructeur de pages avec sa propre bibliothèque d’icônes.
Comment ajouter des icônes personnalisées à WordPress ?
Le bloc Icône n’affiche que les icônes de la bibliothèque WordPress, vous ne pouvez donc pas télécharger les vôtres via celui-ci. Au lieu de cela, vous pouvez télécharger votre icône sous forme de fichier PNG en utilisant le bloc Image.
Nous espérons que cet article vous a aidé à apprendre comment ajouter des boîtes de fonctionnalités avec des icônes dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment personnaliser les couleurs de votre site WordPress et les moyens de créer un site WordPress adapté aux mobiles.
Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
micahel
Très bon article et il m'a aidé à résoudre mon problème. Mais voici ma question.
-Comment créez-vous les magnifiques barres latérales que l'on voit dans cet article, comme « Comment démarrer un blog », « Plan de site web », « J'ai besoin d'aide avec… », « Guides WordPress utiles », « Offres et coupons » ?
-J'ai vraiment besoin d'aide pour créer ces barres latérales car je lis comment créer un blog
Ashutosh Panda
C'était un article génial..
Ça m'a beaucoup aidé
Rob
Salut. Mes icônes ne se centrent pas dans la colonne elle-même. Y a-t-il un paramètre que nous pouvons ajouter pour assurer le centrage ? 2 de mes icônes se centrent bien, mais 2 ne s'alignent qu'à gauche, même si je les aligne au centre en utilisant la mise en forme dans l'éditeur de mise en forme Wordpress (en utilisant un plugin).
Merci.
Hassan NAITALI
Super article, j'adore,
Alors, j'ai une question, puis-je apporter des modifications à ces icônes et les rendre plus grandes en modifiant le thème parent graphiquement et sans toucher au code CSS ?
Merci !!
Support WPBeginner
Salut Hassan,
Vous auriez toujours besoin d'un peu de CSS.
Admin
Chris
J'ai essayé tout ce qui était dit dans le tutoriel, mais au lieu d'être mis en colonnes, tout est mis sous une seule colonne. Alors que les icônes sont placées à côté des mots. Je voulais créer trois colonnes et tout est sous l'un sous l'autre dans une seule colonne. Pourquoi est-ce ainsi ?
Roshni
Merci. Tellement utile !
Paul
Avez-vous un tutoriel sur la façon de faire cela avec CSS, HTML et PHP sans avoir à utiliser un plugin ? J'ai cherché mais je n'arrive pas à trouver quoi que ce soit.
john
Comment faire pour que l'icône se centre au-dessus du contenu ?
Evan herman
Pour ceux qui utilisent WP SVG Icons et qui ne sont pas à l'aise pour écrire du CSS, vous pouvez en fait ajuster la taille de l'icône en passant un paramètre size="#px" au shortcode wp-svg-icons.
Exemple:
[wp-svg-icons icon=”rocket” wrap=”span” size=”100px”]
Cela définira l'icône à 100px et évitera l'étape d'écriture de CSS personnalisé. Vous pourriez encore avoir besoin d'ajuster le padding.
Andre Page
C'était très utile Evan, merci !!
Roshni
Merci, Evan. Ça a marché.
Bobby
Bon article sur une fonctionnalité importante pour votre site. Cependant, le plugin recommandé n'a pas été mis à jour depuis 2 ans. Je suis relativement nouveau sur WordPress et on m'a dit d'éviter les plugins qui n'ont pas été mis à jour depuis un an. Je suppose que cela dépend, car vous êtes très compétent sur WordPress et avez mis en avant le plugin dans cet article. Faites-moi savoir ce que vous en pensez.
Support WPBeginner
Bobby, le plugin fonctionne bien, nous l'avons testé. Nous avons également contacté l'auteur du plugin afin qu'il puisse le mettre à jour.
Idéalement, vous devriez installer des plugins qui ont été récemment mis à jour. Cependant, il existe de nombreux plugins WordPress qui n'ont pas besoin de mises à jour. Les auteurs de plugins estiment que, puisqu'un plugin n'est pas cassé et fonctionne très bien, il n'y a pas besoin de le mettre à jour.
Admin
Bobby
Ok, c'est bon à savoir. Merci encore.
arun
Excellent article, je gère aussi un blog WordPress. J'appliquerai ces icônes sur mon blog, merci de partager.
Hemang Rindani
Bel article. WordPress est une excellente solution de gestion de contenu d'entreprise qui peut répondre à toutes les exigences complexes des entreprises et développer des sites Web puissants. Il contient des milliers de thèmes, modules et plugins flexibles, personnalisables et réactifs qui peuvent être utilisés pour concevoir plusieurs sites Web sans effort. La concurrence croissante exige un site Web interactif et engageant, il est donc important d'inclure une variété d'outils qui encouragent les visiteurs à rester plus longtemps sur une page. Les plugins dans WordPress ajoutent de la valeur à la page Web, notamment en la rendant plus intéressante. L'utilisation des bons outils comme les boutons d'appel à l'action et les boutons de connexion et de partage sur les réseaux sociaux avec le contenu de la page aide à améliorer l'expérience utilisateur. L'article a justement souligné le fait que la sélection du bon outil et l'utilisation de ses pouvoirs permettent à un développeur CMS d'avoir un meilleur contrôle sur le site Web.