Les boîtes de services sont souvent appelées boîtes de caractéristiques. Elles sont utilisées pour mettre en évidence les principaux services offerts par votre produit et votre entreprise. Les encadrés sur les services comprennent souvent des images, des icônes, des titres et de brèves descriptions pour les rendre significatifs.
Bien que Tableberg soit un plugin de construction de table, vous pouvez l'utiliser pour divers projets de conception web, tels que des boîtes de service attrayantes. Ce tutoriel vous montrera comment ajouter des boîtes de service dans WordPress à l'aide d'un guide simple.
Si vous n'avez pas le plugin Tabelberg sur votre site, téléchargez-le en cliquant sur les boutons de la bannière ci-dessous.
Créer de belles tables
Avec l'éditeur de blocs
Étape 01 : Créer des lignes et des colonnes
Ajouter le Bloc Tableberg dans l'éditeur en cliquant sur le bouton icône plus (+).
Suivant, définir le nombre de lignes et de colonnes vous voulez créer vos boîtes de service. Comme nous allons créer quatre boîtes de service, nous avons sélectionné 2*2 lignes et colonnes.
Étape 02 : Ajouter du contenu à une cellule
Nous avons besoin de trois types d'éléments dans nos boîtes de service. Il s'agit des icônes, des paragraphes et des boutons. Commençons à les ajouter.
Couleur d'arrière-plan du tableau
Il est bon de ajouter une couleur d'arrière-plan pour le tableau depuis le début. En effet, vous devez déterminer la couleur des autres éléments de la cellule en fonction de la couleur d'arrière-plan.
Sélectionnez l'icône Tableberg on the toolbar. Go to the Onglet Styles. Vous verrez les options de couleur d'arrière-plan dans la section Couleur. Choisir les couleurs appropriées.
Icône vers la cellule
Tableberg vous permet d'ajouter différents blocs tout comme l'éditeur Gutenberg. Cliquez sur l'icône icône plus (+) et ajouter le Bloc d'icônes à la cellule.
Venez au Onglet Paramètres. Vous aurez la possibilité de modifier la taille de l'icône, rotation, et icône. Maintenant, sélectionner une icône qui correspond à votre type de service pour la cellule en question.
Aller à la page Onglet Styles. Vous verrez les options suivantes changer la couleur de votre icône. Nous l'avons rendu blanc.
Nom du service
Vous avez besoin du Bloc de paragraphes pour écrire le nom du service.
Après l'ajout du bloc Paragraphe, écrire un nom de service pour la cellule. Dans la barre latérale droite, coloriser le nom du service et définir sa taille.
Description du service
Tout comme la méthode précédente, écrivez une description du service en utilisant le bloc Paragraphe.
Bouton CTA
Un service est incomplet sans bouton CTA. C'est pourquoi.., ajouter un bouton CTA à la cellule par en cliquant sur l'icône plus (+).
Maintenant, personnalisez le couleur d'arrière-plan, couleur du texte, et effet de survol pour le bouton comme vous le souhaitez.
Étape 03 : Ajouter de l'espace entre les blocs
Vous devez ajouter des espaces entre les éléments de la cellule pour éliminer la congestion. Pour cela, il faut sélectionner toute la cellule.
Ensuite, allez à la page Onglet Styles. En faisant défiler l'onglet, vous arrivez à la rubrique Rembourrage des cellules et Espacement des cellules options.
En définissant des valeurs dans ces deux options, vous pouvez ajouter de l'espace entre les éléments de la cellule.
Étape 04 : Ajouter du contenu aux autres cellules
Tableberg dispose d'une fonction intéressante dans la barre d'outils qui vous permet de dupliquer instantanément les lignes et les colonnes du tableau.
Cliquez sur le bouton [Pro] Modifier l'icône de la table dans la barre d'outils. Sélectionnez ensuite l'option Dupliquer cette ligne option.
Cela créera une colonne vierge. Supprimer la colonne car ce n'est pas nécessaire.
Maintenant, en utilisant le [Pro] Modifier l'icône de la table, sélectionnez l'option Dupliquer cette colonne option.
Les boîtes de service sont donc prêtes. Ainsi, vous pouvez dupliquer les cellules, les lignes et les colonnes d'un tableau avec le plugin Tableberg.
Étape 05 : Ajouter des espaces entre les boîtes de service
Sélectionner l'ensemble du bloc du tableau par en cliquant sur l'icône Tableberg dans la barre d'outils.
Aller à la page Onglet Styles. Faites défiler l'onglet vers le bas et arrivez à Espacement des cellules. Cette option permet de créer des espaces entre les cases de service.
Étape 06 : Masquer les bordures des boîtes de service
Maintenant, pour masquer les bordures de la boîte, aller dans l'onglet Styles. Une fois de plus, faites défiler l'onglet vers le bas, et arrivez à la rubrique Section frontalière.
Désactiver les options [PRO] Bordure en ligne seulement et Masquer les cellules en dehors des limites.
Vos boîtes de service sont donc prêtes. Si vous le souhaitez, vous pouvez rendre vos boîtes de service plus attrayantes en les personnalisant davantage. Pour en savoir plus sur la personnalisation des tables Tableberg, explorer notre documentation.
Conclusion
Tableberg n'est pas seulement un plugin de création de tableaux. C'est un outil polyvalent que vous pouvez utiliser pour vos différents projets de conception web et de création de contenu. J'espère que vous avez apprécié ce tutoriel de bout en bout.
En cas de confusion concernant l'article d'aujourd'hui, laissez votre commentaire ci-dessous. Notre équipe d'assistance vous répondra très rapidement.
Lire aussi :
