Comment ajouter des boîtes de fonctionnalités avec des icônes dans WordPress

Regardez n'importe quel site Web d'entreprise prospère, et vous verrez probablement des boîtes de fonctionnalités avec des icônes mettant en évidence leurs offres clés.

C'est un modèle de conception éprouvé que nous avons utilisé d'innombrables fois car il fonctionne. Il aide les visiteurs à voir rapidement ce qui rend votre entreprise spéciale sans lire de longs blocs de texte.

Ayant guidé de nombreux utilisateurs de WordPress dans l'amélioration de leur site, nous savons que la création de ces boîtes de fonctionnalités d'aspect professionnel peut sembler fastidieuse.

Mais voici ce que la plupart des gens ne réalisent pas : vous n'avez pas besoin d'être un designer ou un développeur pour ajouter de belles boîtes de fonctionnalités à votre site.

Dans ce guide, nous partagerons les moyens les plus simples de créer des boîtes de fonctionnalités avec des icônes dans WordPress. Je

Que sont les boîtes de fonctionnalités avec des icônes ?

La plupart des gens ne liront pas chaque mot de votre site Web WordPress, surtout si une page est très riche en texte.

Au lieu de cela, les visiteurs parcourront la page pour trouver rapidement les informations qu'ils recherchent. Cela signifie que vous devez présenter les informations importantes d'une manière qui soit facile à parcourir et attrayante, c'est pourquoi tant de sites Web utilisent des boîtes de fonctionnalités.

Dans l'image suivante, vous pouvez voir comment WPForms utilise des boîtes de fonctionnalités pour mettre en évidence les principaux arguments de vente du plugin.

Vous pouvez même ajouter un bouton d'appel à l'action afin que les utilisateurs puissent en savoir plus sur une fonctionnalité particulière.

Cela dit, montrons-vous comment ajouter des boîtes de fonctionnalités avec des icônes dans WordPress. Utilisez simplement 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 WordPress (aucun plugin requis)
• Méthode 2 : Ajouter des boîtes de fonctionnalités avec des icônes en utilisant un plugin de constructeur de pages (recommandé)

Méthode 1 : Ajouter des boîtes de fonctionnalités avec des icônes en utilisant l'éditeur de blocs WordPress (aucun plugin requis)

Vous pouvez ajouter des boîtes de fonctionnalités avec des icônes à votre site WordPress en utilisant l'éditeur de contenu standard et le bloc de colonnes. Cela signifie que vous n'avez pas besoin d'installer un nouveau plugin WordPress, c'est donc une méthode rapide et facile.

Pour commencer, ouvrez la page où vous souhaitez ajouter une boîte de fonctionnalités. Ensuite, cliquez sur l'icône '+' pour ajouter un bloc.

Ensuite, tapez 'Colonnes' dans la barre de recherche.

When the right block appears, click to add it to the page.

WordPress affichera maintenant tous les différents blocs de colonnes. Les nombres indiquent l'espace que chaque colonne occupe dans le bloc. Par exemple, '50/50' crée deux colonnes qui occupent chacune 50 % de la largeur disponible.

À titre d'exemple, nous allons sélectionner le bloc de colonnes '33/33/33' car cela nous donne trois colonnes de largeur égale, mais vous pouvez utiliser la disposition de votre choix.

Après cela, vous êtes prêt à ajouter des icônes aux colonnes.

La façon la plus simple de le faire est d'utiliser des polices d'icônes, qui sont des symboles redimensionnables qui ne ralentiront pas votre site web. Nous recommandons d'utiliser Font Awesome car ils ont l'une des plus grandes collections d'icônes gratuites.

Une fois que vous avez ajouté des polices d'icônes dans votre thème WordPress, il est facile de les afficher dans vos colonnes à l'aide de shortcodes.

Cliquez simplement sur l'icône '+' de la colonne et tapez 'Shortcode'. Lorsque le bon bloc apparaît, cliquez pour l'ajouter à votre mise en page.

Après cela, vous pouvez entrer le shortcode suivant, mais assurez-vous de remplacer « bus » par le nom de l'icône que vous souhaitez utiliser :

[icon name="bus"]

Pour voir une liste complète des icônes disponibles, rendez-vous simplement dans la bibliothèque d'icônes Font Awesome.

Lorsque vous trouvez une icône qui vous plaît, cliquez dessus pour voir le nom de cette icône.

Par exemple, dans l'image suivante, nous regardons une icône appelée « address-book ».

Vous pouvez maintenant ajouter ce nom au shortcode.

Pour en savoir plus sur l'utilisation des shortcodes, consultez notre guide pour débutants sur comment ajouter un shortcode dans WordPress.

Si vous préférez utiliser une image de la médiathèque WordPress, vous pouvez ajouter un bloc d'image au lieu d'utiliser une police d'icônes.

Pour ce faire, cliquez simplement sur le « + » dans la première colonne, puis ajoutez un bloc « Image » au lieu d'un bloc shortcode.

Vous pouvez maintenant choisir une image dans la médiathèque ou télécharger un nouveau fichier depuis votre ordinateur.

Une fois que vous avez ajouté toutes vos icônes, l'étape suivante consiste à ajouter du texte à la boîte de fonctionnalités.

Pour ce faire, cliquez sur le bouton « + » à l'intérieur du bloc Colonnes. Ajoutez ensuite un bloc Paragraphe.

Après cela, tapez simplement votre texte dans le bloc paragraphe.

Vous pouvez ajouter des icônes et du texte aux autres colonnes en répétant le même processus.

Voulez-vous que votre boîte de fonctionnalités comporte plusieurs lignes ?

Cliquez simplement sur le bloc Colonnes, puis sélectionnez les trois points dans la barre d'outils. Vous pouvez ensuite sélectionner « Dupliquer ».

Cela créera une copie du bloc Colonnes.

Maintenant, suivez simplement le même processus décrit ci-dessus pour ajouter du contenu à la deuxième ligne.

Lorsque la boîte de fonctionnalités vous convient, vous pouvez ajouter d'autres contenus à la page, tels qu'une image du produit ou des catégories et des étiquettes.

Pour rendre la boîte de fonctionnalités active, cliquez simplement sur le bouton « Mettre à jour » ou « Publier ».

Vous pouvez maintenant visiter votre site Web, votre blog ou votre boutique en ligne pour voir la boîte d'icônes de fonctionnalités en action.

Voici un exemple de ce que les gens verront lorsqu'ils visiteront votre blog WordPress.

Méthode 2 : Ajouter des boîtes de fonctionnalités avec des icônes en utilisant un plugin de constructeur de pages (recommandé)

Si vous souhaitez créer une simple boîte de fonctionnalités, l'éditeur de blocs WordPress est un bon choix. Cependant, si vous souhaitez créer une boîte plus avancée avec un design entièrement personnalisé, vous aurez besoin d'un plugin de création de pages.

SeedProd est le meilleur constructeur de pages WordPress du marché qui vous permet de créer des pages personnalisées à l'aide d'un éditeur par glisser-déposer.

Il propose plus de 300 modèles conçus par des professionnels que vous pouvez utiliser pour créer rapidement de belles pages. Il dispose également d'une bibliothèque complète d'icônes que vous pouvez ajouter à vos boîtes de fonctionnalités en un seul clic.

Voici un exemple de boîte de fonctionnalités créée à l'aide des blocs et des icônes prêts à l'emploi de SeedProd.

Nous avons vu nos marques partenaires utiliser cet outil pour créer leur site Web, et elles ont eu une excellente expérience. Pour plus de détails, consultez notre avis sur SeedProd.

La première chose à faire est d'installer et d'activer le plugin SeedProd. Pour plus de détails, consultez notre guide pour débutants sur comment installer un plugin WordPress.

Après l'activation, allez dans SeedProd » Paramètres et entrez votre clé de licence.

Vous pouvez trouver ces informations en vous connectant à votre compte SeedProd.

Choisissez un modèle conçu par des professionnels

Pour commencer, allez dans SeedProd » Pages de destination et cliquez sur « Ajouter une nouvelle page de destination ».

Sur l'écran suivant, vous pouvez choisir un modèle. Vous pouvez personnaliser tous ces modèles à l'aide du constructeur par glisser-déposer de SeedProd, mais il est toujours bon de choisir un modèle qui correspond à vos objectifs.

Tous les modèles de SeedProd sont organisés en différents types de campagnes, tels que les campagnes « bientôt disponible » et les campagnes « lead squeeze ». Vous pouvez même utiliser les modèles de SeedProd pour améliorer votre page 404.

Pour ce guide, nous utiliserons le « Modèle vierge », mais vous pouvez utiliser n'importe quel modèle de votre choix.

Pour choisir un modèle, survolez-le simplement avec votre souris, puis cliquez sur l'icône « Coche ».

Cela fait apparaître une fenêtre contextuelle où vous pouvez donner un nom à la page. SeedProd utilise le nom de la page dans l'URL, mais vous pouvez modifier ce lien si vous le souhaitez. Par exemple, vous pourriez vouloir améliorer votre SEO WordPress en incluant des mots-clés pertinents.

Après cela, cliquez sur le bouton « Enregistrer et commencer à modifier la page ».

Cela ouvre le modèle dans l'éditeur de page par glisser-déposer de SeedProd.

Concevez votre boîte de fonctionnalités

Comme vous utilisez le modèle vierge, la première étape consiste à choisir une mise en page. Pour ce faire, cliquez simplement sur l'une des mises en page de colonnes.

Après cela, trouvez le bloc « Icône » dans le menu de gauche.

Vous pouvez maintenant faire glisser et déposer ce bloc dans la première colonne vide.

Cela ajoute le bloc Icône à votre mise en page, avec une icône par défaut déjà sélectionnée.

Pour changer l'icône, cliquez dessus, puis sélectionnez le bouton « Choisir une image ».

Cela ouvre la bibliothèque d'icônes avec des centaines d'icônes parmi lesquelles choisir. Vous pouvez utiliser la barre de recherche pour trouver une icône spécifique ou parcourir toute la liste.

Lorsque vous trouvez une image que vous souhaitez utiliser, survolez-la simplement, puis cliquez sur le bouton « + » pour l'ajouter à votre page.

Pour personnaliser l'icône, cliquez pour la sélectionner.

Vous pouvez maintenant ajuster cette icône à l'aide des paramètres du menu de gauche, y compris changer son alignement, sa taille, sa couleur, et plus encore.

Pour voir plus d'options, cliquez sur l'onglet « Avancé ».

Ici, vous pouvez modifier l'espacement, ajouter une bordure, et même ajouter des effets d'animation CSS.

Une fois que vous avez terminé, ajoutez un bloc « Texte » sous l'icône.

Trouvez simplement le bloc « Texte » dans le menu de gauche, puis placez-le sous votre icône en utilisant le glisser-déposer.

Pour ajouter du texte, cliquez pour sélectionner le bloc. Vous pouvez ensuite taper dans le petit éditeur de texte du menu de gauche.

Ici, vous pouvez ajouter des liens, modifier l'alignement du texte, changer la couleur du texte, et plus encore.

Pour personnaliser les autres colonnes, suivez simplement les mêmes étapes que ci-dessus.

Si vous souhaitez ajouter une autre ligne de blocs de fonctionnalités avec des icônes, survolez la section avec votre souris, puis cliquez sur le bouton « Dupliquer la ligne ».

Vous pouvez dupliquer la section autant de fois que vous le souhaitez pour créer rapidement d'autres blocs de fonctionnalités avec des icônes.

Vous pouvez ensuite ajouter de nouvelles icônes et du texte en suivant le même processus décrit ci-dessus.

Vous pouvez continuer à travailler sur la page en ajoutant d'autres blocs et en personnalisant ces blocs dans le menu de gauche.

Lorsque vous êtes satisfait de l'apparence de la page, cliquez sur le bouton « Enregistrer ». Vous pouvez ensuite sélectionner « Publier » pour rendre cette page active.

Nous espérons que cet article vous a aidé à apprendre comment ajouter des blocs 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 cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.