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. Tableberg 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.
Cree bonitas mesas
Con el editor de bloques
Step 01: Add the Tableberg Block to the Editor
Añada el Bloque Tableberg 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
Seleccionar toda la tabla mediante clicking el Icono Tableberg en la barra de herramientas. A continuación, vaya a la pestaña Ficha Estilos. Under the tab, you’ll see the color options. Using the suitable option, set a background for the table cells.
Nota: 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. Click the plus (+) icon on a cell. Find and add the Bloque de iconos a la célula.
Change and Select an Icon
Ir a la Ficha Configuración 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
Ir a la Ficha Estilos. 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, y radio opciones.
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. Add the Paragraph block 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 Bloque de párrafos.
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 Bloque de botones a la célula.
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. Go to the Ficha Estilos. Scroll down a bit below.
You’ll get Cell Padding y 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.
Haga clic en el botón [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
Ir a la Ficha Estilos. 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 Borde de la mesa y 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.
