Voulez-vous ajouter des boîtes de fonctionnalités avec de belles icônes à votre site WordPress ?
Les cases de fonctionnalité mettent en évidence les arguments de vente importants de vos produits et services. Ils constituent un moyen très efficace de présenter des fonctionnalités à de nouveaux clients.
Dans cet article, nous allons vous montrer comment ajouter facilement des zones de fonctionnalités avec des icônes à votre site WordPress.
Que sont les boîtes de fonctionnalités avec des icônes ?
La plupart des gens ne lisent pas les sites Web mot à mot lorsqu’ils les visitent, surtout s’ils contiennent beaucoup de texte. Au lieu de cela, vos visiteurs numériseront la page pour trouver les informations qu’ils recherchent.
Cela signifie qu’en tant que propriétaire d’entreprise, vous devez présenter des informations importantes dans un format facilement numérisable et très attrayant.
C’est pourquoi de nombreux sites Web commerciaux populaires ont généralement une grande image ou un curseur en haut d’une page Web avec un bouton d’appel à l’action.
Juste en dessous, vous pouvez utiliser des cases de fonctionnalités pour présenter les fonctionnalités importantes de votre produit ou service.
Vous pouvez même inclure un bouton d’appel à l’action sous vos zones de fonctionnalités pour diriger les utilisateurs vers votre page de produit ou de fonctionnalités.
Voici un exemple de comment WPForms utilise des zones de fonctionnalités avec des icônes pour mettre en évidence les fonctionnalités du produit.
Cela dit, montrons comment ajouter des zones de fonctionnalités avec des icônes dans WordPress en utilisant deux méthodes différentes. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser.
- Ajouter des zones de fonctionnalités avec des icônes à l’aide de l’éditeur de blocs WordPress
- Ajouter des zones de fonctionnalités avec des icônes à l’aide du plugin de création de pages WordPress
Méthode 1. Ajouter des boîtes de fonctionnalités avec des icônes à l’aide de l’éditeur de blocs WordPress
Vous pouvez utiliser l’éditeur de blocs WordPress pour ajouter des zones de fonctionnalités avec des icônes à votre site WordPress. Si vous débutez avec l’éditeur de blocs, consultez notre guide sur l’utilisation de l’éditeur de blocs WordPress.
Tout d’abord, vous devez ouvrir la page sur laquelle vous souhaitez ajouter les zones de fonctionnalité.
Ensuite, cliquez sur l’icône d’ajout de bloc « Plus » pour afficher l’éditeur de blocs.
Ensuite, recherchez « Colonnes » dans le champ de recherche.
Ensuite, sélectionnez le bloc ‘Colonnes’.
Cela fait apparaître une liste des blocs de colonnes disponibles.
Nous sélectionnerons le bloc de colonnes « 33/33/33 » car cela nous donne trois colonnes de largeur égale pour ajouter des boîtes de fonctionnalités.
Après cela, vous devez ajouter des icônes à vos colonnes.
La façon la plus simple de le faire est d’utiliser des polices d’icônes. Les polices d’icônes sont des symboles redimensionnables que vous pouvez utiliser sans ralentir votre site Web. Nous vous recommandons d’utiliser Police géniale, car ils offrent gratuitement l’une des meilleures collections de polices d’icônes.
Pour plus de détails, consultez notre guide étape par étape sur la façon d’ajouter des polices d’icônes dans votre thème WordPress.
Une fois cela fait, vous pouvez facilement ajouter des polices d’icônes à vos colonnes en cliquant sur l’icône d’ajout de bloc « Plus » dans la première colonne.
Ensuite, recherchez le bloc ‘Shortcode’ et sélectionnez-le.
Après cela, vous pouvez entrer le shortcode suivant pour l’icône Font Awesome.
[icon name="bus"]
Remplacez simplement le "bus" avec le nom de l’icône que vous voulez. Pour voir la liste complète des icônes disponibles, vous pouvez aller à la Bibliothèque d’icônes Font Awesome.
Lorsque vous trouvez une icône que vous aimez, cliquez dessus et notez le nom de l’icône.
Ensuite, vous pouvez ajouter le nom à votre bloc de shortcode et il s’affichera automatiquement.
Noter: Si vous avez déjà enregistré vos icônes en tant qu’images, vous pouvez ajouter un bloc d’images au lieu d’utiliser des polices d’icônes.
Pour ce faire, sélectionnez simplement le bloc ‘Image’ au lieu du bloc shortcode.
Ensuite, vous pouvez télécharger votre icône ou sélectionner votre icône dans votre médiathèque.
Ensuite, vous pouvez ajouter du texte à votre zone de fonctionnalité en cliquant sur l’icône d’ajout de bloc « Plus ».
Ensuite, sélectionnez le bloc « Paragraphe ».
Après cela, vous pouvez cliquer sur le texte pour le modifier.
Ensuite, suivez simplement les mêmes étapes que ci-dessus pour personnaliser les colonnes restantes.
Vous pouvez également créer une autre ligne de trois colonnes sous la ligne que vous venez de créer.
Pour ce faire, cliquez sur le bloc de colonne et sélectionnez le menu ‘Option’ à trois points.
Ensuite, sélectionnez l’option « Dupliquer » dans la liste déroulante.
Cela créera automatiquement une copie de la colonne.
Tout ce que vous avez à faire est de suivre les mêmes étapes que ci-dessus pour modifier l’icône et le texte.
Une fois que vous avez terminé d’apporter des modifications à vos zones de fonctionnalités, vous devez cliquer sur le bouton « Mettre à jour » ou « Publier » en haut de la page.
Désormais, vos zones de fonctionnalités avec des icônes seront en ligne sur votre site Web.
Voici un exemple de ce que vos visiteurs verront.
Méthode 2. Ajouter des boîtes de fonctionnalités avec des icônes à l’aide d’un plugin WordPress Page Builder
L’un des moyens les plus simples et les plus conviviaux pour les débutants d’ajouter des zones de fonctionnalités avec des icônes à WordPress consiste à utiliser le plugin de création de page SeedProd.
SeedProd est le meilleur constructeur de pages WordPress par glisser-déposer du marché, utilisé par plus d’un million de sites Web. Il vous permet de créer facilement des pages personnalisées, des pages de destination, des pages 404 et plus encore avec le générateur de glisser-déposer.
Il contient plus de 100 modèles prédéfinis que vous pouvez utiliser pour accélérer le processus de conception. De plus, il comprend une bibliothèque complète d’icônes que vous pouvez ajouter à votre site Web WordPress en un seul clic.
Nous utiliserons le plugin pour ajouter des zones de fonctionnalités avec des icônes dans WordPress, similaires à l’éditeur de blocs ci-dessus. Mais, avec SeedProd, vous avez plus d’options de personnalisation et de contrôle sur la conception finale.
La première chose à faire est d’installer et d’activer le plugin. Pour plus de détails, consultez notre guide du débutant sur la façon d’installer un plugin WordPress.
Noter: Il y a un version gratuite de SeedProd disponible, mais nous utiliserons la version Pro car elle possède des fonctionnalités de création de page dont nous avons besoin.
Lors de l’activation, vous devez visiter SeedProd » Paramètres et entrez votre clé de licence.
Vous pouvez trouver ces informations sous votre compte sur le site SeedProd.
Après cela, vous devez aller à SeedProd » Pages puis cliquez sur le bouton « Ajouter une nouvelle page de destination ».
Sur l’écran suivant, il vous sera demandé de choisir un modèle. SeedProd propose des dizaines de modèles conçus par des professionnels.
Chaque modèle peut être entièrement personnalisé avec le générateur de glisser-déposer, alors choisissez une conception de modèle qui correspond à vos objectifs.
Pour ce didacticiel, nous utiliserons le modèle « Vide » pour vous montrer comment ajouter facilement des zones de fonctionnalités avec des icônes dans WordPress.
Pour choisir un modèle, passez simplement la souris dessus et cliquez sur l’icône « Coche ».
Cela fait apparaître une fenêtre contextuelle dans laquelle vous devez donner un nom à votre page. Le nom de la page sera également l’URL de la page.
Ensuite, cliquez sur le bouton « Enregistrer et commencer à modifier la page ».
Cela vous amène à un écran avec l’interface de création de glisser-déposer.
Étant donné que nous utilisons le modèle vierge, sélectionnez l’une des dispositions de colonnes dans la section « Choisissez votre disposition : ».
Après cela, cliquez sur le bloc « Icône ».
Ensuite, faites-le glisser vers votre première colonne vide.
Ensuite, vous pouvez modifier l’icône par défaut.
Cliquez simplement sur l’icône, puis cliquez à nouveau sur l’icône dans la colonne des paramètres à gauche.
Cela fait apparaître toute la bibliothèque d’icônes avec des centaines d’icônes parmi lesquelles choisir. Vous pouvez utiliser la barre de recherche pour rechercher un type d’icône spécifique ou parcourir toute la liste.
Une fois que vous avez trouvé une icône que vous aimez, passez simplement la souris dessus et cliquez sur le bouton « Plus » pour l’ajouter à votre page.
Pour personnaliser l’icône, cliquez à nouveau dessus pour afficher les options du menu.
Ensuite, vous pouvez modifier l’alignement, la taille, la couleur, etc.
Après cela, vous pouvez ajouter un texte sous votre icône.
Cliquez simplement sur le bloc « Texte » et faites-le glisser sous votre icône.
Pour modifier le texte, vous pouvez cliquer sur le bloc. Ensuite, vous pouvez ajouter votre propre texte au bloc de texte.
Vous pouvez également modifier la taille, la couleur, le choix de la police et plus encore avec le menu de gauche.
Pour personnaliser les autres colonnes, suivez simplement les mêmes étapes que ci-dessus.
Si vous souhaitez ajouter une autre rangée de zones de fonctionnalités avec des icônes, passez la souris sur la section et cliquez sur le bouton « Dupliquer la rangée ».
Vous pouvez dupliquer la section autant de fois que vous le souhaitez.
Ensuite, suivez les mêmes étapes ci-dessus pour ajouter de nouvelles icônes et personnaliser le texte.
Vous pouvez continuer à personnaliser votre page en ajoutant des blocs supplémentaires et en apportant des modifications dans le menu des paramètres.
Une fois que vous avez fini de personnaliser vos zones de fonctionnalités avec des icônes, cliquez sur le bouton « Enregistrer », puis sélectionnez le menu déroulant « Publier » pour le faire vivre.
Voici un exemple de ce que vos visiteurs verront.
Nous espérons que cet article vous a aidé à apprendre comment ajouter des zones de fonctionnalités avec des icônes dans WordPress. Vous pouvez également consulter notre guide sur la façon d’enregistrer un nom de domaine et notre comparaison d’experts des meilleurs hébergements de sites Web gratuits.
