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. Tafelberg 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.
Maak prachtige tafels
Met blok-editor
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 Tafelberg 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 Paragraaf blok 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. Klik op de Meer optie op de werkbalk.
Ga naar de Markeer en 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 Knopblok.
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 Tabblad Stijlen. Kom naar de 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. Selecteer de Tabelberg icon op de werkbalk. Ga naar de Tabblad Stijlen.
Scroll and come to Cell Spacing. By dragging the respective option, you can add spaces between the columns of the table.
Je ziet de Table Border 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 Lint blok. Then, click and the block to the column.
The ribbon will be added to the table. Next, from the Tabblad Instellingen, select the Ribbon Type, Ribbon Text, Side, and Distance.
After that, customize the text and background color from the Tabblad Stijlen.
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.
Hier is een gids over how to create a pricing table with the toggle switch in WordPress.
