Comment ajouter des boîtes d'icônes dans WordPress

Comment ajouter des boîtes d'icônes dans un site WordPress

Une boîte à icônes se compose généralement d'un petit graphique associé à un court texte. Les boîtes à icônes permettent de mettre en évidence des éléments tels que des caractéristiques clés, des services, des avantages et des offres de manière visuellement captivante et significative.

Vous pouvez également utiliser des boîtes à icônes pour présenter des témoignages, des appels à l'action, des étapes de processus, etc. Tableberg est un plugin de création de tableaux polyvalent. Vous pouvez créer des boîtes d'icônes magnifiques et attrayantes facilement avec le plugin.

Dans les parties suivantes de cet article, nous vous expliquerons comment ajouter des boîtes à icônes dans WordPress avec le plugin. Téléchargez le plugin en cliquant sur les liens ci-dessous.

Créer de belles tables
Avec l'éditeur de blocs

Étape 01 : Ajouter le bloc Tableberg à l'éditeur

Ajouter le Bloc Tableberg dans votre éditeur comme vous le feriez pour n'importe quel bloc Gutenberg.

Ajouter le bloc Tableberg à l'éditeur

Régler le nombre de lignes et de colonnes en fonction du nombre de boîtes à icônes que vous souhaitez créer.

Par exemple, dans ce tutoriel, nous allons créer trois boîtes d'icônes. Nous définirons donc 3 colonnes et 1 ligne.

Définir le nombre de lignes et de colonnes

Vous pouvez voir le nombre de boîtes qui ont été créées. Ensuite, nous allons ajouter du contenu pour créer des boîtes à icônes.

Lignes et colonnes sélectionnées pour la conception des boîtes à icônes

Étape 02 : Ajouter une icône à une boîte ou à une cellule

Tableber vous permet d'ajouter divers éléments à ses cellules afin de rendre les cellules du tableau très attrayantes. Nous allons les expliquer dans cette section.

Ajouter une couleur d'arrière-plan aux cellules

Sélectionnez l'ensemble du tableau en en cliquant les Icône Tableberg dans la barre d'outils. Ensuite, allez dans la section Onglet Styles. Sous l'onglet, vous verrez les options de couleur. À l'aide de l'option appropriée, définissez un arrière-plan pour les cellules du tableau.

Remarque : Vous devez définir la couleur d'arrière-plan dès le départ, car tous les éléments de la boîte de table seront conçus en fonction de cette couleur.

Ajouter une couleur d'arrière-plan aux cellules

Ajouter une icône à une boîte ou à une cellule

Vous pouvez ajouter des blocs à l'intérieur des cellules du tableau comme dans l'éditeur de blocs de Gutenberg. Cliquez sur l'icône plus (+) sur une cellule. Recherchez et ajoutez le Bloc d'icônes à la cellule.

Ajouter une icône à une boîte ou à une cellule

Modifier et sélectionner une icône

Aller à la page Onglet Paramètres dans la barre latérale droite, tout en gardant le bloc Icône sélectionné. Sous cet onglet, vous avez la possibilité de augmenter la taille de l'icône, définir la rotationet changer l'icône.

Modifier et sélectionner une icône

Vous pouvez sélectionner une icône dans la bibliothèque d'icônes existante ou en importer une depuis votre disque local.

Sélectionner une icône

Coloriser l'icône

Aller à la page Onglet Styles. Régler le Couleur de l'icône et le Couleur d'arrière-plan.

En effet, la disposition des couleurs d'arrière-plan n'est pas agréable à regarder, n'est-ce pas ? Nous avons ce qu'il vous faut.

Coloriser l'icône

Faites défiler la page un peu plus bas, sous l'onglet Styles. Vous verrez l'onglet padding, margin, et rayon options.

Vous pouvez créer une structure pour la couleur d'arrière-plan en plaçant des valeurs appropriées, comme dans l'image ci-dessous.

Modifier la couleur d'arrière-plan

Étape 03 : Ajouter du texte à la cellule/boîte

Aucune boîte à icônes n'a de sens sans contenu textuel. Ajouter le bloc Paragraphe sous l'icône de la cellule.

Ajouter le bloc Paragraphe à la boîte à icônes

Ajouter un titre sur la boîte à icônes. Suivant, l'aligner au niveau central, sélectionner une couleuret définir une taille pour le texte.

Ajouter du texte à la boîte à icônes

De même, ajoutez une description de la boîte à icônes à l'aide de l'option Bloc de paragraphes.

Ajouter une description de la boîte à icônes

Étape 04 : Ajouter un bouton à la cellule/boîte

Vous pouvez diriger les utilisateurs vers une autre page, une autre documentation ou une autre ressource en ajoutant un bouton. Ajoutez le bouton Bloc de boutons à la cellule.

Ajouter un bouton à la cellule

Après avoir ajouté le bouton, ajouter un texte CTA, modifier son texte et couleur d'arrière-planet augmenter la taille de la copie.

Personnaliser le bouton CTA

Étape 05 : Ajouter des espaces entre les blocs

La cellule semble encombrée, n'est-ce pas ? C'est parce qu'il n'y a pas assez d'espace entre les blocs de la cellule. Mais vous pouvez facilement résoudre ce problème.

Sélectionner la cellule entière. Aller à l'adresse Onglet Styles. Faites défiler la page un peu plus bas.

Vous obtiendrez Rembourrage des cellules et Espacement des blocs les options. Grâce à ces options, vous pouvez créer les espaces nécessaires entre ces blocs.

Ajouter des espaces entre les blocs

Votre boîte à icône est donc prête.

Étape 06 : Dupliquer la boîte à icônes

Vous pouvez créer manuellement d'autres boîtes d'icônes de la même manière, ou vous pouvez dupliquer la boîte. Tableberg dispose d'une fonctionnalité intéressante pour dupliquer des lignes et des colonnes.

Cliquez sur le bouton [Pro] Modifier le tableau dans la barre d'outils. Vous pouvez faire le reste vous-même. Pour un guide détaillé, consultez cet article sur Comment ajouter des boîtes de service dans WordPress. Nous avons expliqué comment utiliser cette fonction dans la dernière partie de ce billet.

Dupliquer la boîte à icônes

Vous pouvez voir dans l'image ci-dessous que nous avons dupliqué la boîte à icônes et modifié son contenu.

Boîtes d'icônes dupliquées

Étape 07 : Ajouter des espaces entre les cellules

Aller à la page Onglet Styles. Faites défiler vers le bas jusqu'à Espacement des cellules. Cette option vous permet d'ajouter des espaces entre les cellules, comme dans l'image ci-dessous.

Ajouter des espaces entre les cellules

Étape 08 : Supprimer la bordure de la cellule

Sous l'onglet Styles, vous verrez la rubrique Table Border et Inner Border options. Définir les valeur de la bordure à 0 aux deux endroits. Cette opération permet de supprimer les bordures des cellules.

Supprimer le bord de la cellule

Vous pouvez ainsi créer une boîte à icônes dans WordPress.

Fermeture !

J'espère que vous avez apprécié ce tutoriel. En suivant les étapes décrites dans ce guide, vous pouvez facilement ajouter et personnaliser des boîtes d'icônes pour les aligner sur votre marque et mettre efficacement en évidence les informations clés.

Avant de partir, prenez quelques minutes de plus pour vous informer comment formater les tableaux dans WordPress.



L'équipe Tableberg