Comme nous l'avons répété à maintes reprises dans de nombreux articles de notre blog, Tableberg est un plugin polyvalent. Il ne s'agit pas seulement d'un plugin de création de tableaux ; vous pouvez également l'utiliser pour des projets de conception web polyvalents. Par exemple, des boîtes de caractéristiques, des sections d'appel à l'action, des infographies, des processus étape par étape, et plus encore.
Dans ce tutoriel, nous vous montrerons comment afficher les étapes d'un processus dans WordPress afin que vous puissiez présenter des guides pas à pas à vos visiteurs. Commencez !
- Étape 01 : Ajouter le bloc Tableberg à l'éditeur
- Étape 02 : Définir la couleur d'arrière-plan des différentes lignes
- Étape 03 : Dresser la liste des numéros d'étape du processus
- Étape 04 : Rédiger les titres des étapes et leurs descriptions
- Étape 05 : Ajouter des images aux cellules respectives
- Étape 06 : Ajouter vos coordonnées
- Étape 07 : Personnaliser la bordure du tableau
- Étape 08 : Prévisualisation des étapes du processus
- Conclusion
Étape 01 : Ajouter le bloc Tableberg à l'éditeur
Le plugin Tableberg ajoute un bloc nommé Tableberg à la bibliothèque de blocs. Ajoutez-le à l'éditeur en cliquant sur le bouton icône plus (+).
Définissez le nombre de lignes et de colonnes dont vous avez besoin pour montrer le processus. Pour ce tutoriel, nous avons choisi 3*9 pour les colonnes et les lignes.
Le tableau est prêt. Ensuite, nous allons ajouter du contenu à ses lignes et à ses colonnes pour présenter les étapes du processus.
Étape 02 : Définir la couleur d'arrière-plan des différentes lignes
Tableberg vous permet de définir la couleur des lignes individuellement. Pour ce faire, procédez comme suit sélectionner une ligne et se rendre sur le site onglet styles. Cliquez ensuite sur [PRO] Couleur d'arrière-plan des lignes. J'espère que vous pourrez faire le reste.
Vous pouvez voir que nous avons défini des couleurs différentes pour chaque ligne. Comme la couleur et la stylisation de tous les autres éléments dépendront de l'arrière-plan, nous avons défini les couleurs des lignes à l'avance.
Étape 03 : Dresser la liste des numéros d'étape du processus
Dressez la liste des étapes que vous allez franchir au cours du processus. Réalisez le texte en gras, les aligner au niveau central, fixer a couleur du texteet augmenter leur taille.
Étape 04 : Rédiger les titres des étapes et leurs descriptions
Commencez maintenant à rédiger les titres et les descriptions des étapes dans chaque colonne. Vous pouvez utiliser deux blocs de paragraphes, un pour le titre et un autre pour la description. Définissez ensuite la couleur du texte sur blanc.
Vous pouvez faire en sorte que la taille du texte du titre soit légèrement supérieure à celle du texte de la description afin qu'il soit facile de les distinguer séparément.
Étape 05 : Ajouter des images aux cellules respectives
La dernière colonne est réservée à l'ajout d'images. Ajoutons des images dans les cellules de la colonne correspondant aux lignes du tableau.
Ajoutez donc le bloc d'images en cliquant sur le bouton icône plus (+) dans la cellule correspondante. Vous pouvez télécharger des images, qu'elles proviennent du disque local ou de votre médiathèque.
Vous pouvez voir que nous avons ajouté une image à la cellule. Vous pouvez augmenter la taille de l'image en faisant glisser l'icône circulaire tout en la maintenant enfoncée.
De la même manière, complétez l'ajout d'images dans toutes les autres cellules de la dernière colonne en veillant à ce qu'elles soient pertinentes par rapport au contenu.
Étape 06 : Ajouter vos coordonnées
De même, en utilisant le bloc de paragraphes, ajoutez des informations de contact afin que les visiteurs et les utilisateurs puissent vous joindre pour obtenir de l'aide.
Ajoutez maintenant le Bloc de listes stylisées à la dernière ligne du tableau.
Sélectionnez une icône qui représente le site web. À côté de l'icône, écrivez l'adresse de votre site web.
Étape 07 : Personnaliser la bordure du tableau
Tableberg vous permet de supprimer, de coloriser et de modifier la largeur des bordures intérieures et extérieures du tableau. En configurant ces options de manière appropriée, vous pouvez embellir votre tableau.
Aller à la page Onglet Styles. Faites défiler l'onglet vers le bas et arrivez à la section Section frontalière. Dans le tutoriel d'aujourd'hui, nous avons supprimé les bordures extérieures et les bordures de colonne, à l'exception de la bordure de ligne. Nous avons défini la couleur blanche et une largeur de 1 px pour les bordures de ligne.
Étape 08 : Prévisualisation des étapes du processus
Accédez à la page de prévisualisation. Voyez si votre dessin s'affiche parfaitement. Nous avons affiché autant d'images que possible sur l'écran ci-dessous.
Conclusion
Tableberg est un plugin de création de tableaux polyvalent, passionnant et prometteur. En plus des tableaux, vous pouvez créer de magnifiques sections web avec ce plugin. Par exemple, vous pouvez explorer Comment ajouter des boîtes de fonctionnalités dans WordPress.
Nous publierons d'autres articles de blog présentant des choses et des designs extraordinaires que vous pouvez créer avec le plugin. Alors, restez avec nous et continuez à explorer nos blogs pour enrichir votre base de connaissances.
