{"id":3291,"date":"2025-03-07T20:55:12","date_gmt":"2025-03-07T20:55:12","guid":{"rendered":"https:\/\/tableberg.com\/?p=3291"},"modified":"2025-03-07T20:55:15","modified_gmt":"2025-03-07T20:55:15","slug":"%e3%83%af%e3%83%bc%e3%83%89%e3%83%97%e3%83%ac%e3%82%b9%e3%81%a7%e3%83%97%e3%83%ad%e3%82%bb%e3%82%b9%e3%82%b9%e3%83%86%e3%83%83%e3%83%97%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/tableberg.com\/ja\/how-to-show-process-steps-in-wordpress\/","title":{"rendered":"WordPress\u3067\u30d7\u30ed\u30bb\u30b9\u30b9\u30c6\u30c3\u30d7\u3092\u8868\u793a\u3059\u308b\u65b9\u6cd5"},"content":{"rendered":"\n<p>As we have repeatedly said in many of our blog posts, <a href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Tableberg<\/a> is a versatile plugin. It&#8217;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.<\/p>\n\n\n\n<p>In this tutorial post, we&#8217;ll show you how to show process steps in WordPress so you can showcase step-by-step guides to your web visitors. Get Started!<\/p>\n\n\n<div data-is_sticky=\"false\" data-sticky_toc_position=\"left\" data-hide_sticky_on_mobile=\"false\" data-sticky_button_icon='&lt;svg style=\"color:#000000;\" class=\"ub_sticky-toc-open-button-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"34px\" width=\"34px\" viewBox=\"0, 0, 448, 512\"&gt;&lt;path fill=\"currentColor\" d=\"M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z\"&gt;&lt;\/svg&gt;' data-sticky_button_color=\"#000000\" data-sticky_toc_width=\"320px\" class=\"wp-block-ub-table-of-contents-block ub_table-of-contents\" id=\"ub_table-of-contents-87cb5d60-02b4-4e04-9a9e-bc31b996ec8f\" data-linktodivider=\"false\" data-showtext=\"show\" data-hidetext=\"hide\" data-scrolltype=\"auto\" data-enablesmoothscroll=\"false\" data-initiallyhideonmobile=\"false\" data-initiallyshow=\"true\"><div class=\"ub_table-of-contents-header-container\" style=\"\">\n\t\t\t<div class=\"ub_table-of-contents-header\" style=\"text-align: left; \">\n\t\t\t\t<div class=\"ub_table-of-contents-title\">Table of Contents:<\/div>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t<\/div><div class=\"ub_table-of-contents-extra-container\" style=\"\">\n\t\t\t<div class=\"ub_table-of-contents-container ub_table-of-contents-1-column \">\n\t\t\t\t<ul style=\"\"><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-show-process-steps-in-wordpress\/#0-step-01-add-the-tableberg-block-to-the-editor\" style=\"\">Step 01: Add the Tableberg Block to the Editor<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-show-process-steps-in-wordpress\/#1-step-02-set-background-color-for-individual-rows\" style=\"\">Step 02: Set Background Color for Individual Rows<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-show-process-steps-in-wordpress\/#2-step-03-list-the-step-numbers-in-the-process\" style=\"\">Step 03: List the Step Numbers in the Process<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-show-process-steps-in-wordpress\/#3-step-04-write-the-step-titles-and-their-descriptions\" style=\"\">Step 04: Write the Step Titles and Their Descriptions<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-show-process-steps-in-wordpress\/#4-step-05-add-images-to-respective-cells\" style=\"\">Step 05: Add Images to Respective Cells<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-show-process-steps-in-wordpress\/#5-step-06-add-your-contact-information\" style=\"\">Step 06: Add Your Contact Information<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-show-process-steps-in-wordpress\/#6-step-07-customize-the-table-border\" style=\"\">Step 07: Customize the Table Border<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-show-process-steps-in-wordpress\/#7-step-08-preview-the-process-steps\" style=\"\">Step 08: Preview the Process Steps<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-show-process-steps-in-wordpress\/#8-conclusion\" style=\"\">Conclusion<\/a><\/li><\/ul>\n\t\t\t<\/div>\n\t\t<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"0-step-01-add-the-tableberg-block-to-the-editor\">Step 01: Add the Tableberg Block to the Editor<\/h2>\n\n\n\n<p>The Tableberg plugin adds a block named <strong>Tableberg<\/strong> to the block library. Add it to the editor by clicking the <strong>plus (+) icon<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp\" alt=\"Add the TableBerg block to your Gutenberg editor\" class=\"wp-image-481\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Set the number of rows and columns you need to show the process. Let&#8217;s for this tutorial, we set 3*9 for columns and rows.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns.webp\" alt=\"Set the number of rows and columns\" class=\"wp-image-3014\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>The table is ready. Next, we&#8217;ll add content to its rows and columns for showcasing the process steps.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Table-built-with-Tableberg-is-ready.webp\" alt=\"Table built with Tableberg is ready\" class=\"wp-image-3293\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Table-built-with-Tableberg-is-ready.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Table-built-with-Tableberg-is-ready-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Table-built-with-Tableberg-is-ready-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Table-built-with-Tableberg-is-ready-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Table-built-with-Tableberg-is-ready-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-step-02-set-background-color-for-individual-rows\">Step 02: Set Background Color for Individual Rows<\/h2>\n\n\n\n<p>Tableberg lets you set the row color individually. To do this, <strong>select a row<\/strong> and go to the <strong>styles tab<\/strong>. Then, click <strong>[PRO] Row Background Color<\/strong>. Hope you can do the rest.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Set-Background-Color-for-Individual-Rows.webp\" alt=\"Set Background Color for Individual Rows\" class=\"wp-image-3294\" style=\"border-width:1px;border-radius:2px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Set-Background-Color-for-Individual-Rows.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Set-Background-Color-for-Individual-Rows-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Set-Background-Color-for-Individual-Rows-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Set-Background-Color-for-Individual-Rows-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Set-Background-Color-for-Individual-Rows-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Set-Background-with-Different-Color-for-Individual-Rows.webp\" alt=\"Set Background with Different Color for Individual Rows\" class=\"wp-image-3295\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Set-Background-with-Different-Color-for-Individual-Rows.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Set-Background-with-Different-Color-for-Individual-Rows-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Set-Background-with-Different-Color-for-Individual-Rows-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Set-Background-with-Different-Color-for-Individual-Rows-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Set-Background-with-Different-Color-for-Individual-Rows-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2-step-03-list-the-step-numbers-in-the-process\">Step 03: List the Step Numbers in the Process<\/h2>\n\n\n\n<p>List the step numbers you&#8217;ll cover in the process. Make the <strong>text bold<\/strong>, <strong>align them centrally<\/strong>, set a <strong>text color<\/strong>, and <strong>increase their size<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/List-the-Step-Numbers-in-the-Process.webp\" alt=\"List the Step Numbers in the Process\" class=\"wp-image-3296\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/List-the-Step-Numbers-in-the-Process.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/List-the-Step-Numbers-in-the-Process-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/List-the-Step-Numbers-in-the-Process-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/List-the-Step-Numbers-in-the-Process-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/List-the-Step-Numbers-in-the-Process-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-step-04-write-the-step-titles-and-their-descriptions\">Step 04: Write the Step Titles and Their Descriptions<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>You can make the title text size slightly larger than the description text so it becomes easy to distinguish them separately.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Write-the-Step-Titles-and-Their-Descriptions.webp\" alt=\"Write the Step Titles and Their Descriptions\" class=\"wp-image-3297\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Write-the-Step-Titles-and-Their-Descriptions.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Write-the-Step-Titles-and-Their-Descriptions-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Write-the-Step-Titles-and-Their-Descriptions-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Write-the-Step-Titles-and-Their-Descriptions-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Write-the-Step-Titles-and-Their-Descriptions-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4-step-05-add-images-to-respective-cells\">Step 05: Add Images to Respective Cells<\/h2>\n\n\n\n<p>The last column is reserved for adding images. Let&#8217;s add images to the cells of the column respective to the table rows.<\/p>\n\n\n\n<p>So, add the <strong>image block<\/strong> by clicking the <strong>plus (+) icon<\/strong> to the respective cell. You can upload images, whether from the local drive or your media library.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-the-Tableberg-cell.webp\" alt=\"Add the Image block the Tableberg cell\" class=\"wp-image-3298\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-the-Tableberg-cell.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-the-Tableberg-cell-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-the-Tableberg-cell-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-the-Tableberg-cell-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-the-Tableberg-cell-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Increase-the-image-size-on-Tableberg.webp\" alt=\"Increase the image size on Tableberg\" class=\"wp-image-3299\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Increase-the-image-size-on-Tableberg.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Increase-the-image-size-on-Tableberg-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Increase-the-image-size-on-Tableberg-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Increase-the-image-size-on-Tableberg-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Increase-the-image-size-on-Tableberg-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>In the same way, complete adding images to all the other cells of the last column keeping them relevant to the content.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-images-to-all-the-other-cells-of-the-last-column.webp\" alt=\"Add images to all the other cells of the last column\" class=\"wp-image-3300\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-images-to-all-the-other-cells-of-the-last-column.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-images-to-all-the-other-cells-of-the-last-column-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-images-to-all-the-other-cells-of-the-last-column-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-images-to-all-the-other-cells-of-the-last-column-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-images-to-all-the-other-cells-of-the-last-column-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5-step-06-add-your-contact-information\">Step 06: Add Your Contact Information<\/h2>\n\n\n\n<p>Similarly, using the paragraph block, add contact information so visitors and users can reach you for help.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-contact-information-so-people-can-reach-you-for-help.webp\" alt=\"Add contact information so people can reach you for help\" class=\"wp-image-3301\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-contact-information-so-people-can-reach-you-for-help.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-contact-information-so-people-can-reach-you-for-help-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-contact-information-so-people-can-reach-you-for-help-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-contact-information-so-people-can-reach-you-for-help-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-contact-information-so-people-can-reach-you-for-help-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Now, add the <strong>Styled List block<\/strong> to the last row of the table.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Styled-List-block.webp\" alt=\"Add the Styled List block\" class=\"wp-image-3302\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Styled-List-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Styled-List-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Styled-List-block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Styled-List-block-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Styled-List-block-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Select an icon that represents the website. Next to the icon, write your website address.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-website-address.webp\" alt=\"Add the website address\" class=\"wp-image-3303\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-website-address.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-website-address-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-website-address-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-website-address-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-website-address-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6-step-07-customize-the-table-border\">Step 07: Customize the Table Border<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Go to the <strong>Styles tab<\/strong>. Scroll down the tab and come to the <strong>Border section<\/strong>. In today&#8217;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.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-Table-Border.webp\" alt=\"Customize the Table Border\" class=\"wp-image-3304\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-Table-Border.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-Table-Border-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-Table-Border-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-Table-Border-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-Table-Border-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"7-step-08-preview-the-process-steps\">Step 08: Preview the Process Steps<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Preview-the-Process-Steps.webp\" alt=\"Preview the Process Steps\" class=\"wp-image-3305\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Preview-the-Process-Steps.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Preview-the-Process-Steps-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Preview-the-Process-Steps-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Preview-the-Process-Steps-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Preview-the-Process-Steps-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"8-conclusion\">Conclusion<\/h2>\n\n\n\n<p>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 <a href=\"https:\/\/tableberg.com\/how-to-add-feature-boxes-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">how to add feature boxes in WordPress<\/a>.<\/p>\n\n\n\n<p>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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As we have repeatedly said in many of our blog posts, Tableberg is a versatile plugin. It&#8217;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&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7954,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[10,9,102],"class_list":["post-3291","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-customize-table","tag-tableberg","tag-web-design"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/How-to-Show-Process-Steps-in-WordPress.png","author_info":{"display_name":"Istiak Rayhan","author_link":"https:\/\/tableberg.com\/ja\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/3291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/comments?post=3291"}],"version-history":[{"count":4,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/3291\/revisions"}],"predecessor-version":[{"id":7955,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/3291\/revisions\/7955"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media\/7954"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media?parent=3291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/categories?post=3291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/tags?post=3291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}