Services boxes are often known as feature boxes. They are used to highlight the key services your product and businesses offer. Service boxes often include images, icons, headings, and brief descriptions to make them meaningful
Although Tableberg is a table builder plugin, you can use it for various web design projects, such as appealing service boxes. In this tutorial post, we’ll show you how to add service boxes in WordPress with an easy guide.
If you don’t have the Tabelberg plugin on your site, get it by clicking the buttons on the banner below.
美しいテーブルを作る
ブロックエディター付き
Step 01: Create Rows and Columns
を追加する。 テーブルバーグ・ブロック to the editor by clicking the プラス（＋）アイコン.
次ページ set the number of rows and columns you want to create your service boxes. As we’ll create four service boxes, we’ve selected 2*2 rows and columns.
Step 02: Add Content to a Cell
We need three types of elements in our service boxes. They are icons, paragraphs, and buttons. Let’s start adding them.
Background Color to the Table
It’s good to add a background color for the table from the beginning. Because you have to determine the color of the other elements of the cell based on the background color.
Tablebergアイコンを選択 ツールバーのツールバーの スタイルタブ. You’ll see the Background color options under the Color section. Choose suitable colors.
Icon to the Cell
Tableberg lets you add various blocks just like the Gutenberg editor. Click the プラス（＋）アイコン and add the Icon block to the cell.
に来てほしい。 設定タブ. You’ll get options to change the icon size, rotation, そして icon. Now, select an icon that goes with your service type for the particular cell.
に行く。 スタイルタブ. You’ll see the options to change the color of your icon. We’ve made it white.
Service Name
You need the 段落ブロック to write the service name.
After the Paragraph block is added, write a service name for the cell. From the right sidebar, colorize the service name そして set its size.
Description Of the Service
Just like the previous method, write a description of the service by using the Paragraph block.
CTA Button
A service is incomplete without a CTA button. So, add a CTA button to the cell by clicking the plus (+) icon.
Now, customize the background color, text color, そして hover effect for the button as you want.
Step 03: Add Space Between Blocks
You must add spaces between the elements on the cell to remove congestion. To do this, select the entire cell.
Then, go to the スタイルタブ. Scrolling down the tab, come to the Cell Padding そして Cell Spacing options.
By setting values in these two options, you can add space between the cell elements.
Step 04: Add Content to the Other Cells
Tableberg has an interesting feature on the toolbar that allows you to instantly duplicate rows and columns of the table.
をクリックする。 [Pro] Edit table icon を選択する。次に Duplicate this row オプションがある。
This will create a blank column. Delete the column as it’s not necessary.
Now, using the [Pro] Edit table icon, select the Duplicate this column オプションがある。
So, the service boxes are ready. Thus, you can duplicate cells, rows, and columns of a table with the Tableberg plugin.
Step 05: Add Spaces Between Service Boxes
テーブルブロック全体を clicking the Tableberg icon ツールバーの
に行く。 スタイルタブ. Scroll down the tab, and come to Cell Spacing. Using this option, you can create gaps between the service boxes.
Step 06: Hide Borders of the Service Boxes
Now, to hide the box borders, スタイルタブを開く. Again, scroll down the tab, and come to the 国境セクション.
Toggle off the options [PRO] Row Only Border そして Hide Cell Outside Borders.
So, your service boxes are ready. You can make your service boxes more attractive with further customization if you want. To learn more about how to customize Tableberg tables, explore our documentation.
結論
Tableberg is not only a table builder plugin. It’s a versatile tool that you can use to use for your various web design and content creation projects. Hope you have enjoyed the tutorial from top to bottom.
If there is any confusion regarding today’s post, just leave your comment below. Our support team will respond to you very soon.
Visit the post to learn how to format tables in WordPress.
