As we have repeatedly said in many of our blog posts, Tableberg is a versatile plugin. It’s not only a table-builder plugin; you can also use it for multipurpose web design projects. For example, feature boxes, call-to-action sections, infographics, step-by-step processes, and more.
In this tutorial post, we’ll show you how to show process steps in WordPress so you can showcase step-by-step guides to your web visitors. Get Started!
Step 01: Add the Tableberg Block to the Editor
The Tableberg plugin adds a block named Tableberg to the block library. Add it to the editor by clicking the plus (+) icon.
Set the number of rows and columns you need to show the process. Let’s for this tutorial, we set 3*9 for columns and rows.
The table is ready. Next, we’ll add content to its rows and columns for showcasing the process steps.
Step 02: Set Background Color for Individual Rows
Tableberg lets you set the row color individually. To do this, select a row and go to the styles tab. Then, click [PRO] Row Background Color. Hope you can do the rest.
You can see we have set different colors for the rows individually. As the coloring and stylization of all the other elements will depend on the background, we have set the row colors in advance.
Step 03: List the Step Numbers in the Process
List the step numbers you’ll cover in the process. Make the text bold, align them centrally, set a text color, and increase their size.
Step 04: Write the Step Titles and Their Descriptions
Now, start writing the step titles and descriptions in each column. You can use two paragraph blocks, one for the title and another for the description. Next, set the text color to white.
You can make the title text size slightly larger than the description text so it becomes easy to distinguish them separately.
Step 05: Add Images to Respective Cells
The last column is reserved for adding images. Let’s add images to the cells of the column respective to the table rows.
So, add the image block by clicking the plus (+) icon to the respective cell. You can upload images, whether from the local drive or your media library.
You can see we have added an image to the cell. You can increase the image size by dragging the circular icon while holding it simultaneously.
In the same way, complete adding images to all the other cells of the last column keeping them relevant to the content.
Step 06: Add Your Contact Information
Similarly, using the paragraph block, add contact information so visitors and users can reach you for help.
Now, add the Styled List block to the last row of the table.
Select an icon that represents the website. Next to the icon, write your website address.
Step 07: Customize the Table Border
Tableberg lets you remove, colorize, and modify the width of the inner and outer border of the table. By configuring these options suitably, you can further beautify your table.
Go to the Styles tab. Scroll down the tab and come to the Border section. In today’s tutorial, we have removed the outer and column borders, except the row border. We have set the white color and 1 px width for the row borders.
Step 08: Preview the Process Steps
Come to the preview page. See if your design shows up perfectly. We have displayed as much of the image as can be seen on the screen below.
Conclusion
Tableberg is an exciting and promising versatile table-builder plugin. You can create various gorgeous web sections with the plugin in addition to tables. For example, you can explore how to add feature boxes in WordPress.
We will cover more blog posts showcasing more extraordinary things and designs you can create with the plugin. So, stay with us and keep exploring our blogs to grow your knowledge base.
