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.

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.

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.

É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 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.

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.

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

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.

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.

É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 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.

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

É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.

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.

É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.

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.

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

É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.

É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.

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.