How to Show Process Steps in WordPress

How to Show Process Steps in WordPress

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.

Add the TableBerg block to your Gutenberg editor

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.

Set the number of rows and columns

The table is ready. Next, we’ll add content to its rows and columns for showcasing the process steps.

Table built with Tableberg is ready

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.

Set Background Color for Individual Rows

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.

Set Background with Different Color for Individual Rows

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.

List the Step Numbers in the Process

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.

Write the Step Titles and Their Descriptions

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.

Add the Image block the Tableberg cell

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.

Increase the image size on Tableberg

In the same way, complete adding images to all the other cells of the last column keeping them relevant to the content.

Add images to all the other cells of the last column

Step 06: Add Your Contact Information

Similarly, using the paragraph block, add contact information so visitors and users can reach you for help.

Add contact information so people can reach you for help

Now, add the Styled List block to the last row of the table.

Add the Styled List block

Select an icon that represents the website. Next to the icon, write your website address.

Add the 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.

Customize the Table Border

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.

Preview the Process Steps

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.



The Tableberg Team