A feature box is a designed area on a web page that draws attention to specific content, products, and services. Feature boxes are designed with elements like images, icons, concise text, and buttons.
Tableberg is a multipurpose table-builder plugin. It can help you create wonderful layouts for your feature boxes. In this tutorial post, we’ll show you an easy guide on how to add feature boxes in WordPress with the plugin.
Get the plugin by clicking the buttons on the banner below.
Creare bellissimi tavoli
Con l'editor di blocchi
Once you have the plugins installed on your site, follow the tutorial below.
Step 01: Add the Tableberg Block to the Editor
Aggiungere il Blocco Tableberg all'editore.
Define the number of rows and columns for your website according to the number of feature boxes you want to create.
As we’ll create three feature boxes, we have selected the number of columns and rows 2*2.
The defined number of rows and columns has been added.
Step 02: Add a Product Image to the Box
A feature box is meaningless without an image of the respective product. Add the Blocco immagine to a suitable cell.
Add an image to a suitable cell. You can resize the image by dragging the circular icon.
Step 03: Add a Star Rating
A star rating is an intuitive way to express the quality and popularity of a product. It also helps in customer engagement. So, add the Blocco di valutazione a stelle al tavolo.
From under the Scheda Impostazioni on the right sidebar, set values for the Star Rating block. You can even resize the block if necessary.
Step 04: Add a CTA Button
With a CTA button, you can motivate users to buy or visit the product page. So, add the Blocco di pulsanti under the rating.
Vai al sito Scheda Stili, keeping the button block selected.
From here, you can change the button text color, background color, size, padding, and radius as needed.
Step 05: Add the Feature List and Description
As you need more space to add the feature list and description, it’s better to merge two cells. Select cells with your cursor by holding the Shift key.
Click Edit Table sulla barra degli strumenti. Premete il tasto Opzione di fusione nell'elenco.
Aggiungere il Blocco di paragrafi for writing text in the feature box.
It’s better to show the product features in a list. So, add the Blocco elenco stilizzato.
Hope you can list your product features like the image below. You can change the list icon, increase its size, e modify its color.
Finally, add a short description of your product using the Paragraph block under the feature list.
So, your feature box content is ready. We’ll now customize the boxes a bit more.
Step 06: Customize the Feature Box Borders
Tableberg allows to customize both the external e inner borders.
Vai al sito Scheda Stili. Scroll down a bit. You’ll get these options. Set your desired colors e thickness for the borders.
Step 07: Add Ribbon to the Feature Box
A ribbon is a small decorative tag or banner that helps highlight important information, like discounts, new arrivals, etc. Add the Blocco nastro to the closest cell.
Going to the Scheda Impostazioni, write a ribbon copy and fix its position on the feature box.
Finally, go to the Scheda Stili.
Selezionare la voce testo e colore di sfondo for the ribbon.
Step 08: Preview the Feature Box
Go to the preview page. You’ll see the feature is working well.
Conclusione
Hope you enjoyed this article. You can do more designs with the Tableberg plugin. For example, explore two more posts before you exit. Those posts are:
If you have an question regarding the plugin, please let us know through the comment box. We’ll get back to you very soon with a satisfying answer.
