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 allons partager les moyens les plus simples de créer des boîtes de fonctionnalités avec des icônes dans WordPress.

Pourquoi ajouter des boîtes de fonctionnalités avec des icônes ?

Les boîtes de fonctionnalités avec des icônes rendent les informations importantes faciles à parcourir et visuellement attrayantes. La plupart des visiteurs ne liront pas chaque mot d'une page riche en texte car ils la parcourent rapidement pour trouver ce qui compte le plus.

Les boîtes de fonctionnalités mettent en évidence les points clés, souvent associés à des icônes, afin que les utilisateurs puissent comprendre votre produit ou service en un coup d'œil. Vous pouvez également inclure un bouton d'appel à l'action pour encourager les utilisateurs à en savoir plus sur une fonctionnalité spécifique.

Voici comment WPForms utilise des boîtes de fonctionnalités pour présenter ses principaux arguments de vente :

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 (Méthode gratuite)

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.

C'est une excellente option si vous souhaitez créer une mise en page simple sans utiliser de constructeur de pages.

Étape 1 : Ouvrez la page et ajoutez le bloc Colonnes

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.

Étape 2 : Ajoutez des icônes aux colonnes

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 d'un shortcode.

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. N'oubliez pas d'ajouter un texte Alt approprié pour décrire l'icône pour les moteurs de recherche et les lecteurs d'écran.

Étape 3 : Ajoutez du texte à la boîte de fonctionnalités

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.

Étape 4 : Créez plusieurs lignes (facultatif)

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.

Étape 5 : Publiez votre boîte de fonctionnalités

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.

Étape 1 : Installer et activer 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.

Étape 2 : Choisir 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.

Étape 3 : Concevez la mise en page de 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.

Étape 4 : Ajoutez le texte de la fonctionnalité

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.

Étape 5 : Dupliquez les lignes et publiez

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.

Questions fréquemment posées sur l'ajout d'une boîte de fonctionnalités avec des icônes

Voici quelques questions que nos lecteurs posent fréquemment sur l'ajout d'une boîte de fonctionnalités avec des icônes dans WordPress :

Comment insérer des icônes dans WordPress ?

Pour insérer des icônes, la méthode la plus simple consiste à installer un plugin comme Font Awesome ou à utiliser un constructeur de pages comme SeedProd. Si vous ne souhaitez pas utiliser de plugin, vous pouvez télécharger directement des fichiers d'icônes SVG en utilisant le bloc Image standard.

Comment insérer des symboles dans WordPress ?

Pour insérer des symboles, vous devez installer et activer le plugin Insert Special Characters
. Après activation, l'outil ajoutera un bouton « Ω » (oméga) dans la barre d'outils des blocs WordPress.

Vous pouvez l'utiliser pour accéder au menu des caractères spéciaux. Pour plus d'informations, consultez notre tutoriel sur comment ajouter des caractères spéciaux dans les articles WordPress.

Comment ajouter une icône de menu dans WordPress sans plugin ?

Pour ajouter des icônes de menu sans plugin, activez les « Classes CSS » dans l'onglet Options de l'écran en haut de la page Apparence » Menus. Ensuite, ajoutez une classe CSS spécifique à votre élément de menu et utilisez du code CSS personnalisé dans le personnalisateur pour afficher l'image d'arrière-plan de l'icône.

Comment ajouter des icônes sociales personnalisées dans WordPress ?

Pour ajouter des icônes sociales, utilisez simplement le bloc natif « Icônes sociales » dans l'éditeur WordPress. Cliquez sur le bouton « + » à l'intérieur du bloc pour choisir des réseaux comme Facebook ou Twitter, puis collez vos liens de profil directement dans les champs.

Comment ajouter une icône de média social à un menu WordPress ?

Pour ajouter des icônes sociales à un menu de navigation, nous vous suggérons d'utiliser un plugin comme Menu Image pour télécharger des icônes directement sur les éléments de menu. Alternativement, ajoutez un « Lien personnalisé » au menu et collez le code HTML de l'icône de police dans le champ Étiquette de navigation.

Si cela vous intéresse, consultez notre guide sur comment ajouter des icônes de médias sociaux aux menus WordPress.

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.