Een prijstabel maken in WordPress

Nog niet zo lang geleden moest je een specifieke ‘pricing plugin’ gebruiken om een prijstabel te maken in WordPress. Dit waren vaak premium plugins van een paar tientjes.

Tegenwoordig kan je dit ook eenvoudig met de Gutenberg editor. Naast dat je hierdoor geld bespaart, is het ook voordelig voor de snelheid van je website om niet onnodig veel plugins te gebruiken.

Een ander voordeel is dat je de prijstabel gemakkelijker in dezelfde stijl kan maken als de rest van je website.

In dit artikel laat ik eerst zien hoe je een prijstabel kan maken met de standaard Gutenberg editor. Vervolgens laat ik een aantal populaire uitbreidingen zien.

Inspiratie opdoen

Als je een prijstabel wilt maken voor je website maar je geen idee hebt hoe dit eruit moet komen te zien raad ik aan eerst inspiratie op te doen voordat je gelijk wat gaat maken in WordPress.

Een website die ik hiervoor graag gebruik is Dribbble. Door op ‘pricing’ te zoeken krijg je een overzicht van duizenden prijstabellen ontworpen door designers.

Als je vervolgens een prijstabel hebt gevonden die je mooi vindt en geschikt is voor de product/dienst die jij verkoopt, kan je deze gebruiken ter inspiratie voor jouw prijstabel. Uiteraard pas je wel je eigen stijl (kleuren en lettertypes) van je website toe.

Een prijstabel maken met Gutenberg

Eerst laat ik je zien hoe je een prijstabel maakt met de standaard blokken in WordPress.

Klik om het plusje om het blok ‘Kolommen’ toe te voegen:

Kies vervolgens een variatie die past bij jouw prijstabel.

Het gaat hierbij vooral om de voordeling. Heb je een prijstabel bestaande uit 3 tabellen, dan ligt het voor de hand om voor ’33/33/33′ te kiezen.

Wellicht wil je een prijstabel met 4 kolommen en zie je dit er niet tussen staan. Dat is geen probleem.

Kies de verdeling die je wilt. Wil je kolommen die even groot zijn dan kies je voor ’50/50′ of ’33/33/33′.

Vervolgens klik je in het navigatiemenu (zie pijl hieronder) en klik je op ‘kolommen’. In de blok instellingen aan de rechterkant kan je daarna het aantal kolommen aanpassen.

Klik in het plusje in de eerste kolom en voeg het blok ‘groep’ toe:

In de groep klik je wederom op het plusje. Nu voeg je een Heading toe.

Ik kies ervoor om de kop te centreren.

Hoe je prijstabel eruit komt te zien hangt uiteraard af van de keuzes die je nu gaat maken. Ik kies ervoor om onder de kop (Basis) nog een kop toe te voegen met daarin de prijs (en dit wederom te centreren).

Daaronder voeg ik nog een paragraaf toe met de tekst ‘per maand’.

Vervolgens voeg ik een ‘knop’ toe. Als je de knop selecteert kan je aan de rechterkant bij de blok instellingen de knop een kleur geven, de afronding instellen, etc.

Om de button te centreren moet je het hoofd van de knoppen selecteren. Dat doe je door met je muis boven ‘bloktype of stijl wijzigen’ te houden. Dit is de meest linker knop:

Je hoeft hier niet op te klikken. Zodra je je muis hierboven houdt verschijnt er boven een knop waarmee je het hoofd kan selecteren.

Daar klik je wel op. Je kan hier de uitlijning aanpassen.

Onder de knop voeg ik het blok ‘scheidingsteken’ toe.

Als laatste voeg ik het blok ‘lijst’ toe om wat eigenschappen van het product op te sommen.

Wat we tot nu toe hebben gemaakt ziet er als volgt uit:

Dit is volledig gemaakt met de standaard Gutenberg blokken: Kolommen, groep, heading, paragraaf, knoppen, scheidingsteken en lijst.

Om de prijstabel mooier te maken hoeft het alleen nog opgemaakt te worden.

Je kan er voor kiezen om de tabel een kleur te geven. Selecteer in de lijstweergave de groep en geef de groep een achtergrondkleur:

In de editor ziet het er nu zo uit:

Je kan nu alle stappen herhalen bij de andere kolommen.

Om tijd te besparen kies ik er voor om de lege kolommen te verwijderen.

Selecteer in de de lijstweergave een van de lege kolommen en klik op de 3 puntjes om het blok te verwijderen.

Je hebt nu nog 2 kolommen, waarvan 1 leeg is.

Het ziet er nu als volgt uit:

Selecteer in de lijstweergave nu de prijstabel. Klik op de ‘3 puntjes’ om de groep te dupliceren.

Je hebt als het goed is nu 2 opgemaakte tabellen en 1 lege.

Selecteer nu in de lijstweergave de lege kolom en verwijder deze. Vervolgens dupliceer je weer een opgemaakte tabel.

Je hebt nu 3 opgemaakte kolommen. Je hoeft nu alleen de inhoud nog aan te passen.

Het eindresultaat is als volgt:

Dat ziet er al best aardig uit.

In een eerder geschreven Gutenberg Handleiding leg ik uit dat je door bepaalde Gutenberg plugins te installeren meer mogelijkheden krijgt zoals bijvoorbeeld het instellen van afmetingen, marges en kleuren. Hiermee kan je dus ook mooiere prijstabellen kan maken.

Ik ga je in dit artikel drie voorbeelden laten zien van Gutenberg plugins waarmee je meer blokken krijgt.

Als het bovenstaande voorbeeld gemaakt met de standaard blokken binnen WordPress goed genoeg voor je is, dan hoef je uiteraard wat nu volgt in dit artikel niet te volgen.

Een prijstabel maken met GenerateBlocks

GenerateBlocks is een Gutenberg plugin gemaakt door dezelfde maker als het GeneratePress thema.

GenerateBlocks voegt 4 blokken toe aan Gutenberg. Hiermee kan je elk aspect van hoe een blok eruit ziet instellen, waaronder de afmetingen, marges, kleuren, achtergronden, etc.

Met de premium versie van GenerateBlocks krijg je toegang tot de template library. Hiermee kan je blokken toevoegen die al opgemaakt zijn. Op dit moment zijn er 10 prijstabellen om uit te kiezen.

GeneratePress in combinatie met GenerateBlocks is waar ik zelf altijd gebruik van maak. Ook op deze website. Maar je kan GenerateBlocks ook gebruiken met andere thema’s.

Hieronder zie je een voorbeeld van hoe een prijstabel gemaakt met GenerateBlocks eruit kan zien.

Om dit artikel overzichtelijk te houden heb ik een apart artikel geschreven waarin ik uitleg hoe je een prijstabel met GenerateBlocks kan maken.

Klik op de onderstaande link voor meer informatie:

Een prijstabel maken met Genesis Blocks

Genesis Blocks is een Gutenberg plugin gemaakt door StudioPress. Met deze plugin voeg je 15 extra blokken toe aan de Gutenberg editor.

StudioPress staat bekend om zijn premium thema’s. Voordat ik gebruik maakte van GeneratePress maakte ik altijd websites met het Genesis Framework van StudioPress.

De gratis versie van Genesis Blocks komt met een template library met opgemaakte blokken. Hier zit geen prijstabel tussen.

Genesis Blocks heeft wel een specifieke ‘pricing’ block waarmee je eenvoudig en snel een prijstabel kan maken.

Hieronder zie je een voorbeeld van hoe een prijstabel gemaakt met Genesis Blocks eruit kan zien.

Een prijstabel maken met Kadence Blocks

Kadence Blocks is van dezelfde maker als het Kadence Thema.

Kadence Blocks (de gratis versie) voegt 15 blokken toe aan Gutenberg.

Je kan ervoor kiezen om een prijstabel zelf te maken met de extra blokken die Kadence Blocks toevoegen aan Gutenberg of op gebruik te maken van de design library.

In de design library van de gratis versie vind je 2 prijstabellen en de betaalde versie voegt daar nog 2 aan toe.

Hieronder zie je een voorbeeld van hoe een prijstabel gemaakt met Kadence Blocks eruit kan zien.

Mijn advies

Ik raad niet aan om een bepaalde Gutenberg plugin te installeren alleen omdat je daar een prijstabel mee wilt maken.

Als je een eenvoudige website hebt, enkel gemaakt met de standaard blokken van Gutenberg, dan voldoet een eenvoudige prijstabel ook.

Indien je een website hebt gemaakt met GenerateBlocks (zoals ik) dan is het logisch om je prijstabel ook daarmee te maken. Het zelfde geldt natuurlijk voor Kadence Blocks en Genesis Blocks.

Verder hoef je uiteraard niet voor een van deze plugins te kiezen. Je hebt ook nog Gutenberg plugins zoals Stackable, Qubely, Editor Plus, Ultimate Addons for Gutenberg, etc.

Met al deze Gutenberg plugins kan je mooie websites maken en dus ook mooie prijstabellen. De een is niet perse beter dan de ander. Het komt vooral aan op wat je prettiger vindt werken.

Het voordeel is dat er allemaal gratis versies zijn die je uit kan proberen.

Door gewoon uit te proberen kom je er vanzelf achter welke blokken je het fijnst vindt om mee te werken.

Het ligt voor de hand om eerst te kijken of het thema dat je gebruikt ook zijn eigen Gutenberg plugin heeft.

Hoewel dit niet perse noodzakelijk is, vind ik het zelf wel fijn om een Gutenberg plugin te gebruiken van dezelfde maker als het thema dat ik gebruik.

In mijn geval is dat dus GeneratePress (het thema) met GenerateBlocks (de plugin). Of Kadence (het thema) met Kadence Blocks (de plugin), WP Astra (het thema) met Ultimate Addons for Gutenberg (de plugin), etc.

Ik hoop dat in ieder geval duidelijk is geworden hoe je met Gutenberg een prijstabel kan maken, dat je daar geen aparte plugin voor nodig hebt of een pagebuilder.