The presentation of your pricing tables is important in influencing customers. One powerful way to enhance pricing tables is by incorporating a ribbon. It’s visually a striking banner of labels displayed diagonally across a table to highlight specific offers, discounts, and features.
Whether you are promotion a limited-time discount, special feature, or hot-selling packages, a well-placed ribbon can instantly influence the potential customers to take decisions. Tableberg is an intuitive and powerful plugin to do this.
In this post, we’ll show you how to add a pricing table with ribbon in WordPress with Tableberg.
Cree bonitas mesas
Con el editor de bloques
Once you have the plugin installed on your site, get into the following tutorial.
Step 01: Add the Tableberg Block to the Editor
The plugin adds a block named Tableberg to the Gutenberg block library. Add the block to editor simply the pressing the plus (+) icon.
Set the number of columns and rows you need for your table. For this tutorial, we’ll set 3*1 for columns and rows.
You can see that the basic layout for the pricing table has been created with columns and a row.
Step 02: Add Content to the Table
A pricing table usually includes products’ names, images, prices, discounted prices, and CTA buttons. Let’s see how to add them to the table.
Add the Product Name
Tableberg allows you to add different types of blocks to its cells like the Gutenberg block editor. Add the Bloque de párrafos to write the product’s name. (By default, the paragraph block is added to the table cells).
Write your product’s name in the cell. Align the text centrally, make it bold, change its color, and resize it using the options shown in the image below.
Add the Product Image
Add the Image block to the pricing table.
The image block will let you upload the product image. Resize the image as needed and align it suitably.
Add a Previous Price
Showing the difference between the previous and current price is a great way to highlight the discount. So, let’s now add a previous price under the product image.
Adding a strikethrough effect to the previous price can grab people’s attention. To do this, select the price using your cursor. Haga clic en el Más opciones en la barra de herramientas.
Ir a el Destaque y Strikethrough options. You’ll be able to change the color of the price and add a strikethrough.
Add the Current Price of the Product
Now, add the current price of the product in a comparatively larger font so it can hook people’s eye.
Add a CTA Button
At the end of all content, add the Bloque de botones.
Change the button’s background color, text color, typography size, and padding. Do these changes as you want.
Step 03: Add Spaces Between the Blocks
So, column content is ready. But as you can see, all the blocks are too congested. We need to add spacing between them to create a fresher look.
To do this, select the particular column. Then, go to the Ficha Estilos. Come to the Block Spacing option by scrolling the tab. Increase space by adding a value on the box.
Similarly, add content to the other columns. But to save time, you can duplicate the column and then update the content. Here’s a guide on how to duplicate a Tableberg column and row.
Step 04: Add Radius to the Table Columns
You can enhance aesthetics by adding a border radius to the table columns. Select el Tabelberg icon en la barra de herramientas. Ir a el Ficha Estilos.
Scroll and come to Cell Spacing. By dragging the respective option, you can add spaces between the columns of the table.
Verá el Borde de la mesa option just below. Set your desired Radius value for both the inner and outer border.
Thus, you can prepare your pricing table.
Step 05: Add a Ribbon to the Pricing Table
Select the column to which you want to add a ribbon. Hit the plus (+) icon and find the Bloque de cintas. Then, click and the block to the column.
The ribbon will be added to the table. Next, from the Ficha Configuración, select the Ribbon Type, Ribbon Text, Side, and Distance.
After that, customize the text and background color from the Ficha Estilos.
So, your pricing table is ready with a ribbon on it.
Closing Up!
Hope you enjoyed this tutorial. But there are several points you must remember. Make sure your table is clean and uncluttered. Minimalistic pricing table designs always have an impact on potential customers.
Secondly, use a clear and concise copy that instantly connects web visitors. if possible add some benefits/features of the products in the table. If you want to cover multiple plans in your pricing tables, it’s better to display them with a toggle switch.
Aquí tiene una guía sobre how to create a pricing table with the toggle switch in WordPress.
