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 standaard WordPress tabelblok mist veel geavanceerde functies. Je kunt er geen uitgebreide prijstabellen mee maken. Je hebt een table builder plugin zoals Tableberg nodig om prachtige prijstabellen te maken.

Je kunt conversiegerichte prijstabellen maken, zelfs met de gratis versie. In dit artikel laten we je zien hoe je een prijstabel kunt maken in WordPress met behulp van de Tableberg plugin.

Maak prachtige tafels
Met blok-editor

Een sjabloon voor prijstabellen kiezen

De Tableberg plugin wordt geleverd met een aantal kant-en-klare sjablonen voor prijstabellen. Je kunt meteen aan de slag door een van deze sjablonen te kiezen.

Stap 1: Installeer en activeer de Tableberg-plugin

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

Stap 2: Voeg het Tableberg blok toe aan je bericht of pagina

Open de post of pagina waar je de prijstabel wilt maken. Klik op het + pictogram en zoek naar 'Tableberg'. Klik op het Tableberg-blok om het in te voegen.

Stap 3: Kies een kant-en-klare tafel

Als je wilt, kun je nu vanuit het niets een tabel maken. Dat zal ik later laten zien.

Laten we eerst de kant-en-klare optie bekijken. Nadat je het Tableberg-blok hebt ingevoegd, klik je gewoon op 'Vooraf gebouwde tabellen'.

Er verschijnt een patronenbibliotheek. Selecteer de sectie 'Prijstabel' en kies een prijstabelsjabloon.

De tabel wordt ingevoegd in de editor.

Stap 4: de tabel aanpassen

Selecteer het hele blok door op het pictogram Tableberg te klikken en klik vervolgens op het pictogram Instellingen in de rechterbovenhoek. Van daaruit kunt u de tabel aanpassen.

Een prijstabel maken vanuit het niets

Je kunt ook een tabel maken vanuit het niets.

Stap 1: Kies het aantal kolommen en rijen

Zodra je het Tableberg blok hebt ingevoegd, stel je het rij- en kolomnummer in. Je kunt het aantal rijen en kolommen echter naar behoefte verhogen of verlagen nadat je de tabel hebt gemaakt. Maar voor nu kiezen we een 4*4 rij en kolom.

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

Stap 2: Titels toevoegen aan de tabelkolommen

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

Stap 3: Prijzen en kortingspercentages toevoegen aan de kolommen van de prijstabel

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

Stap 4: CTA-knoppen toevoegen aan de tabel

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

Stap 5: Functies toevoegen aan de prijstabel

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

Stap 6: Een voorbeeld van de prijstabel bekijken

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