Zo maak je een prijstabel in WordPress Blok Editor

Een prijstabel is een goed gestructureerde weergave van producten en diensten met de bijbehorende prijzen en functies. Hiermee kunnen klanten verschillende prijsplannen vergelijken en de prijs kiezen die bij hen past.

De default WordPress table block lacks many advanced features. You cannot create comprehensive price tables with it. You need a table builder plugin like Tableberg to create stunning pricing tables.

You can create conversion-centric pricing tables even with its free version. In this article, we’ll show you how to create a pricing table in WordPress using the Tableberg plugin.

Maak prachtige tafels
Met blok-editor

Choosing a Pricing Table Template

The Tableberg plugin comes with some pre-built pricing table templates. You can get started right away by choosing one of these templates.

Step 1: Install and Activate the Tableberg Plugin

Ga naar Plugins > Nieuwe plug-in toevoegen. Type Tafelberg in het zoekvak. Installeer en activeren de plugin nadat deze hieronder is weergegeven.

Step 2: Add the Tableberg Block to Your Post or Page

Open the post or page where you want to create the pricing table. Click on the + icon and search for ‘Tableberg’. Click on the Tableberg block to insert it.

Step 3: Choose a Pre-Built Table

Now if you want, you can create a table from the scratch. I’ll show that later.

Let’s see the pre-built option first. Once you’ve inserted the Tableberg block, simply click on ‘Pre-Built Tables’.

A patterns library will be popped up. Select the ‘Pricing Table’ section and choose a pricing table template.

The table will be inserted to the editor.

Step 4: Customize the Table

Select the whole block by click on the Tableberg icon and then click on the Settings icon from the upper right-hand side corner. You can customize the table from there.


Creating a Pricing Table from the Scratch

You can also create a table from the scratch.

Step 1: Choose the Number of Columns & Rows

Once you’ve inserted the Tableberg block, set its row and column number. However, you can increase or decrease the number of rows and columns after creating the table as needed. But for now, we are selecting a 4*4 row and column.

Stel het rij- en kolomnummer in

Als je veel inhoud toevoegt, heb je misschien meer ruimte nodig in de tabelcellen. Het is dus beter om de breedte van de tabel te vergroten. Selecteer de hele tabel door drie keer op het TableBerg-pictogram op de werkbalk te klikken.

Je krijgt de Tabblad Instellingen in de rechterzijbalk. Onder de instellingentabel vindt u de Tabel Breedte optie. Vergroot de breedte naar behoefte.

Vergroot de breedte van de tabel

Step 2: Add Titles to the Table Columns

Voeg passende titels toe aan de kolommen van de tabel. Stel dat we een prijstabel maken voor een webhostingbedrijf. Er zijn vier prijsplannen in de tabel. De kolomtitel wordt dan Economy, Deluxe, Ultimate, en Maximaal.

Je kunt de titeltekst en de achtergrondkleur aanpassen via het tabblad aan de rechterkant. Je kunt ook de teksttypografie en de grootte aanpassen.

Titels toevoegen aan de kolommen in de prijstabel

Step 3: Add Prices and Discount Rates to the Pricing Table Columns

Voeg eerst de prijzen van de plannen toe aan hun respectievelijke kolommen. We hebben de prijsteksten vet, iets groter en blauw gekleurd gemaakt.

Prijzen toevoegen aan de prijstabel

Het kortingspercentage zit meestal dicht bij de hoofdprijs. Plaats je cursor op de prijscel en creëer ruimte eronder door op de knop Knop Enter op je toetsenbord.

Typ daarna je gewenste kortingspercentages in de respectievelijke kolommen.

Kortingspercentages toevoegen

We zullen nu de discontovoet benadrukken zodat deze beter zichtbaar wordt. Selecteer het kortingspercentage tekstgebied met je cursor. Klik op de Meer optie op de werkbalk. Kies de Markeer optie.

Selecteer de kortingstekst in de prijstabel

Gebruik een achtergrondmarkeerstift voor de kortingstarief tekst. We hebben de kleurcode toegepast #fcdc4b op de achtergrond van het kortingspercentage op de prijstabel.

Gebruik een achtergrondmarkeerstift voor de tekst over de disconteringsvoet

Pas hetzelfde proces toe op elke kolom in de respectieve gebieden.

Gebruik een achtergrondmarkeerstift voor alle kortingsteksten

Als er speciale opmerkingen zijn voor de plannen, moet u deze opgeven in het prijsgebied. Kijk, we hebben het gedaan met het eerste haakjesteken.

Speciale opmerkingen toevoegen aan de prijsplannen

Step 4: Add CTA Buttons to the Table

Door CTA-knoppen toe te voegen, kun je gebruikers niet uitlokken om je producten te kopen. Selecteer de cel waaraan je de CTA-knop wilt toevoegen. Druk op de Plus (+) pictogram op de cel en selecteer de CTA-knop.

Voeg het knoppenblok toe aan de TableBerg tabellen

We behandelen dit gedeelte niet in detail. Het enige wat je hier hoeft te doen is een overtuigende CTA-tekst schrijven voor elke knop. Koppel de knoppen aan de afrekenpagina. Achtergrond- en tekstkleuren toevoegen voor de knoppen.

Pas de CTA-knoppen aan

Step 5: Add Features to the Pricing Table

Ten slotte moet je alle functies van je producten en diensten op basis van hun prijsplannen opsommen. Als er speciale woorden zijn die je wilt benadrukken, kun je die vet maken.

Functies toevoegen aan de prijstabellen

Step 6: Preview the Pricing Table

Voordat je de prijstabel publiceert, kun je hem het beste bekijken in de voorbeeldmodus om te controleren of er fouten in zitten. Als de tabel helemaal schoon is, kun je hem live zetten.

Een voorbeeld van de prijstabel

Conclusie

Zo kun je informatieve prijstabellen op je site maken die klanten helpen weloverwogen beslissingen te nemen. TableBerg komt met meer nieuwe functies waarmee je meer geavanceerde tabellen op je site kunt maken.

Als je deze post leuk vindt, plaats dan hieronder een reactie en laat ons weten wat je ervan vindt. Neem een kijkje op hoe maak je een vergelijkingstabel in WordPress.



Het Tableberg-team

Early Bird-aanbieding is nu live!
Dit is de standaardtekst voor de meldingsbalk