An icon box typically consists of a small graphic that is paired with a short piece of text. Using icon boxes, you can highlight things like key features, services, benefits, and offers in visually captivating and meaningful ways.
You can also use icon boxes to showcase testimonials, call to action, process steps, and more. テーブルバーグ is a versatile table builder plugin. You can create gorgeous and engaging icon boxes easily with the plugin.
In the following parts of this article, we’ll explain to you how to add icon boxes in WordPress with the plugin. Get the plugin by clicking the links below.
美しいテーブルを作る
ブロックエディター付き
Step 01: Add the Tableberg Block to the Editor
を追加する。 テーブルバーグ・ブロック to your editor as you would any Gutenberg block.
Set the number of rows and columns according to the number of icon boxes you want to create.
For example, in this tutorial, we’ll create three icon boxes. So, we’ll set 3 columns and 1 row.
You can see the number of boxes that have been created. Next, we’ll add content to create icon boxes.
Step 02: Add an Icon to a Box/Cell
Tableber allows you to add various elements to its cells by which you can make the table cells super attractive. We’ll explain them in this section.
Add a Background Color to the Cells
でテーブル全体を選択する。 clicking その Tablebergアイコン をクリックする。次に スタイルタブ. Under the tab, you’ll see the color options. Using the suitable option, set a background for the table cells.
Note: You must set the background color at the beginning as all the table box elements will be designed based on it.
Add an Icon to a Box/Cell
You can add blocks inside the table cells like the Gutenberg block editor. プラス（＋）アイコンをクリック on a cell. Find and add the Icon block to the cell.
Change and Select an Icon
に行く。 設定タブ on the right sidebar while keeping the Icon block selected. Under this tab, you’ll get options to increase the icon size, set rotation, and change the icon.
You may select an icon from the existing icon library or import one from your local drive.
Colorize the Icon
に行く。 スタイルタブ. Set the Icon color and the Background color.
Indeed, the background color layout doesn’t look good, right? We have got you covered.
Scroll down a bit below the Styles tab. You’ll see the padding, margin, そして radius options.
You can create a layout for the background color by placing suitable values, as in the image below.
Step 03: Add Text to the Cell/Box
No icon box is meaningful without text content. パラグラフ・ブロックの追加 below the icon on the cell.
Add a title about the icon box. Next, align it centrally, select a color, and set a size for the text.
Similarly, add a description of the icon box using the 段落ブロック.
Step 04: Add a Button to the Cell/Box
You can direct users to another page, documentation, or resource by adding a button. Add the ボタンブロック to the cell.
After adding the button, add a CTA copy, change its text and background color, and increase the copy size.
Step 05: Add Spaces Between the Blocks
The cell looks congested, right? It’s because there isn’t enough space between the blocks in the cell. But you can easily solve this problem.
Select the entire cell.に行く。 スタイルタブ. Scroll down a bit below.
You’ll get Cell Padding そして Block Spacing options. Using these options, you can create necessary spaces between these blocks.
So, your one icon box is ready.
Step 06: Duplicate the Icon Box
You can manually create other icon boxes in the same way, or you can duplicate the box. Tableberg has an exciting feature for duplicate rows and columns.
をクリックする。 [Pro] Edit Table option on the toolbar. The rest you can do yourself. For a detailed guide, explore this post on how to add service boxes in WordPress. We have explained how to use this feature at the later part of this post.
You can see in the image below that we have duplicated the icon box and changed its content.
Step 07: Add Spaces Between the Cells
に行く。 スタイルタブ. Scroll down to Cell Spacing. This option allows you to add space between the cells, as in the image below.
Step 08: Remove the Cell Border
Under the Styles tab, you’ll see the テーブル・ボーダー そして Inner Border options. Set the border value to 0 in both places. This will remove borders from the cells.
Thus, you can create an icon box in WordPress.
Closing Up!
Hope you enjoyed this tutorial. By following the steps outlined in this guide, you can easily add and customize icon boxes to align with your brand and effectively highlight key information.
Before moving away, have a few more minutes to learn how to format tables in WordPress.
