Een prijstabel maken met GenerateBlocks

In dit artikel laat ik je zien hoe je een prijstabel kan maken met de GenerateBlocks plugin.

GenerateBlocks is een Gutenberg plugin waarmee je 4 extra blokken toevoegt:

  • Container
  • Grid
  • Headline
  • Button

Samen met de standaard blokken die Gutenberg heeft biedt dit meer dan voldoende mogelijkheden om een mooie prijstabel te maken.

Inhoudsopgave

Installeer GenerateBlocks

Het design van de prijstabel bepalen

Een eenvoudige prijstabel maken

Een prijstabel namaken

Een prijstabel maken met GenerateBlocks Pro

1. Installeer GenerateBlocks

Je kan GenerateBlocks gratis installeren door in het dashboard naar plugins > nieuwe plugin te gaan.

Zoek daarna op GenerateBlocks en klik op nu installeren.

Vervolgens moet je de plugin alleen nog activeren.

2. Het design van de prijstabel bepalen

GenerateBlocks is mijn favoriete Gutenberg plugin.

In vergelijking met andere Gutenberg plugins kan het alleen wat minimalistisch overkomen omdat het maar 4 blokken toevoegt aan Gutenberg in plaats van tientallen zoals alternatieve plugins.

Om aan te tonen dat je met deze 4 blokken meer dan genoeg kan, wil ik 3 verschillende prijstabellen maken in dit artikel.

Allereerst een eenvoudige, omdat het belangrijk is om eerst de basis te begrijpen.

Daarna heb ik twee prijstabellen uitgezocht op Dribbble. Dit is een website waar ik graag inspiratie op doe.

3. Een eenvoudige prijstabel maken

Open eerst de pagina waar je de prijstabel wilt maken.

Klik daarna op het plus-teken linksboven:

Je ziet nu dat de 4 blokken van GenerateBlocks zijn toegevoegd.

Container toevoegen

Om te beginnen voeg je een Container toe.

Ik kies er in dit voorbeeld voor om de pagina ‘full-width’ te maken.

De layout instellingen hebben geen invloed op hoe we de prijstabel hierna gaan maken. Dit is enkel om in te stellen hoe breed te pagina moet zijn.

De keuze die je hierin maakt hangt vooral af van het design van je website en hoe je overige pagina’s eruit zien.

Je hoeft dus niet precies dezelfde keuzes te maken die ik in dit voorbeeld maak. Kijk vooral naar hoe het layout van je eigen website er uit ziet.

Je kan nu de container een achtergrondkleur (colors > background color), een afbeelding (backgrounds > image url) of een gradiënt (backgrounds > use gradiënt) geven.

Om duidelijk te maken wat de container is, kies ik in dit voorbeeld voor een donkere achtergrondkleur:

Grid toevoegen

De volgende stap is om een grid in de container toe te voegen.

Ga met je muis over de container.

Als je net zoals ik een donkere achtergrondkleur hebt gekozen kan het wellicht wat lastig leesbaar zijn.

Klik in de container op Blok toevoegen.

Nu voeg je een Grid toe.

Een grid valt te vergelijken met kolommen.

Het ligt voor de hand om als je een prijstabel hebt die bestaat uit 3 kolommen om te kiezen voor een grid die uit 3 kolommen bestaat.

Ik kies zelf meestal voor een grid die bestaat uit 1 kolom.

Als je een kolom hebt opgemaakt kan je de afmetingen achteraf eenvoudig aanpassen en daarna de kolom dupliceren. Hierdoor bespaar je veel tijd. Hoe dit precies werkt zal later in dit artikel duidelijk worden.

Om zeker te weten dat je het juiste onderdeel hebt geselecteerd is het in Gutenberg handig om de lijstweergave te gebruiken.

Je ziet dat we een container (hetgeen met de paarse achtergrondkleur) hebben met daarin een grid.

In het grid zit weer een aparte container. Dit is de daadwerkelijke kolom waarin we de prijstabel gaan maken.

Klik in de lijstweergave op de container in het grid.

Nu is het tijd om de container in het grid een achtergrondkleur te geven.

Omdat ik al een donkere achtergrondkleur gebruik, kies ik er voor om nu een lichte kleur te gebruiken.

De volgende stap is de spacing instellen.

Je kan hier de volgende dingen instellen:

Minimum height: zoals de naam al zegt kan je hier de minimale hoogte van de container instellen. Ik gebruik dit vooral in situaties waarbij je meerdere containers naast elkaar hebt en ik wil dat ze even groot zijn ongeacht dat de ene container meer inhoud heeft dan de ander.

Padding: hier stel je de hoeveelheid afstand in binnen een element.

Margin: hier stel je de hoeveelheid afstand in buiten het element.

Border Size: hier stel je de dikte van de rand om het element in. Wil je geen rand dan laat je dit dus leeg.

Border Radius: hier kan je de rondingen in de hoeken van het element instellen.

Ik kies voor de volgende instellingen:

Dit levert het volgende resultaat op:

Probeer gerust verschillende instellingen uit om te kijken wat jij mooi vindt. Wil je bijvoorbeeld alleen rondingen in de bovenste hoeken, dan laat je bij Border Radius ‘B-right’ en ‘B-left’ op 0.

Klik op het plus-teken in het grid om een blok toe te voegen.

Kies voor Headline:

Het verschil tussen de ‘Headline blok’ van GenerateBlocks en de standaard ‘Heading blok’ van WordPress is dat je met die van GenerateBlocks veel meer kan instellen.

Allereerst kies ik ervoor om de headline te centreren.

Als je de headline geselecteerd hebt kan je aan de rechterkant bij de blokinstellingen zaken instellen zoals de typografie, kleuren en eventueel een icoon.

Weet je niet zeker of je de headline hebt geselecteerd? Dan kan je altijd gebruik maken van de lijstweergave. De lijstweergave kan je openen door op de 3 streepjes in het menu te klikken of gebruik te maken van de toet combinatie SHIFT + ALT + O

Ik kies enkel voor een vetgedrukte headline in de kleur paars.

Onder de headline voeg ik een nieuwe headline toe.

De prijstabel ziet er tot zover als volgt uit:

Het is nu tijd om wat eigenschappen van het product toe te voegen aan de prijstabel.

Ik voeg daarom een nieuwe headline toe en verander deze (door op H2 te klikken) in Paragraph.

Je kan nu bij de nieuwe headline (in dit voorbeeld met een eigenschap) de spacing nog instellen. Eventueel kan je dit later ook nog weer aanpassen en kijken wat je mooi vindt staan.

Voorlopig kies ik voor:

Daarna selecteer je het blok en klik je op 3 puntjes:

Ik kies er nu voor om het blok een aantal keer te dupliceren. Dit zorgt ervoor dat ik niet steeds dezelfde spacing instellingen moet instellen.

Na dit een aantal keer hebben gedaan voeg ik een button toe.

Ik kies voor het ‘buttons blok’ van GenerateBlocks en niet voor de standaard ‘knoppen’ van WordPress. Net zoals met de Headline kan je hier veel meer mee.

In de lijstweergave kan dit een beetje verwarrend overkomen.

Om de knop te centreren moet je op Buttons klikken in de lijstweergave.

Om de instellingen van de button in te stellen klik je daaronder op Button.

Dit heeft te maken omdat je meerdere buttons naast elkaar kan gebruiken.

Je kan hier (net zoals met de headline) de spacing en kleuren instellen.

Ik kies voor een border radius van 5 om een beetje rondingen in de button te krijgen en een groene kleur.

Het begint nu ergens op te lijken.

Ik vind alleen dat alles nog wat te dicht op elkaar staat dus ik pas de spacing nog een beetje aan.

De margin van alle eigenschappen verander ik in 15 zodat het wat dichter op elkaar staat.

Alleen bij de bovenste eigenschap verander ik de padding in 25 zodat er wat meer afstand is tussen de prijs en de eigenschappen.

Selecteer nu in de lijstweergave de container in het grid:

Nu kan je de breedte van de container aanpassen.

Bestaat je prijstabel uit 3 kolommen kies je voor 33%.. bestaat het uit 2 kolommen voor 50%..

Als je de container hebt geselecteerd kan je door op 3 puntjes te klikken het dupliceren.

Je hebt nu 3 opgemaakte containers.

Uiteraard moet je de inhoud nog aanpassen maar je hoeft nu niet alles 3x op te maken.

Bij nader inzien vind ik de streep onder de laatste eigenschap niet mooi dus die haal ik nog weg.

En ik voeg nog wat meer ruimte tussen de button en de eigenschappen.

Het eindresultaat is als volgt:

En dit is dus volledig gemaakt met het container, grid, headline en buttons:

We hebben nu 3 kolommen naast elkaar gemaakt.

Dit ziet er op de desktop (naar mijn mening) mooi uit.

Je moet nu alleen nog even kijken of je dit op de tablet en mobiel ook mooi vindt.

Selecteer een container in het grid:

Pas vervolgens de layout en de spacing op tablet en mobiel indien nodig aan.

Op mobiel staat bijvoorbeeld de container width op 100% omdat je onmogelijk 3 kolommen naast elkaar kan tonen op een klein mobiel scherm.

Je krijgt dan dus 3 containers in het grid van 100%.

Vervolgens moet je er goed opletten dat de spacing overal mooi is en niet alles tegen elkaar aan staat.

Dit doe je per container in het grid. In dit voorbeeld dus 3x.

Zaken als spacing en layout zijn vooral een persoonlijke voorkeur. Let er alleen op dat je hier consequent in bent.

Ik heb er in dit voorbeeld voor gekozen om een hele eenvoudige prijstabel te maken.

Je kan echter met deze 4 blokken je prijstabel precies zo maken als je zelf wilt.

4. Een prijstabel namaken

Om te laten zien dat je niet perse eenvoudige prijstabel hoeft te maken heb ik een mooi voorbeeld opgezocht op Dribbble.

Ik ga nu deze zo goed mogelijk na proberen te maken in WordPress met de blokken container, grid, headline en buttons.

Ik weet niet precies welk lettertype in het voorbeeld is gebruikt en ik kan ook niet precies dezelfde iconen gebruiken.

Het zal er dus niet 100% op lijken maar ik ga mijn best doen om in korte tijd iets te maken dat er op lijkt.

De basis van deze prijstabel zal op dezelfde manier worden gemaakt als de vorige, dus om dit artikel niet te lang te maken zal ik niet alle stappen herhalen.

In dit voorbeeld krijgt de rechter prijstabel een blauwe rand. Dit doe je door de container te selecteren en bij spacing een Border Size in te stellen. Daarna geef je bij Color de Bordor Color een blauwe kleur.

Verder valt op dat in dit voorbeeld de buttons breder zijn. Nadat de Buttons zijn geselecteerd stel ik bij Spacing daarom Fill Horizontal Space in:

Verder wordt er gebruik gemaakt van vinkjes en kruisjes. Als je een headline toevoegt kan je bij Icon een vinkje uitkiezen.

Bij Colors kan je daarna het icoon een kleur geven.

In het geval van de kruisjes krijgt het icoon en de tekst uiteraard een andere kleur. Je kan uit een aantal SVG iconen kiezen, maar helaas zit daar geen kruisje tussen. Daarom maak ik gebruik van een gratis icoon van Feather Icons.

Het eindresultaat is:

Er is gebruik gemaakt van precies dezelfde blokken als het eerste voorbeeld, maar toch ziet het er heel anders uit.

Als je inspiratie opdoet wil je natuurlijk niet iets volledig kopiëren zoals ik in dit voorbeeld heb gedaan. Dit was puur om te laten zien dat je enkel door wat instellingen te wijzigen een mooi design kan maken.

Op het moment dat ik echt een prijstabel voor mij zelf wil maken dan zou ik bijvoorbeeld alleen het idee van de headlines met kruisjes in een lichte kleur overnemen.

Maar om dit voorbeeld toch een beetje een eigen draai te geven heb ik de button verplaatst, de randen wat veranderd en andere kleuren/lettertypes gebruikt.

5. Een prijstabel maken met GenerateBlocks Pro

Alles wat ik toe nu toe heb laten zien is met de gratis versie van GenerateBlocks gemaakt.

De gratis versie biedt in mijn ogen alles wat je nodig hebt om een mooie website met Gutenberg te maken. En je kan er dus ook mooie prijstabellen mee maken.

Maar er is ook een betaalde versie genaamd GenerateBlocks Pro.

Voor 1 website kost dit $39 per jaar.

Met de Pro versie krijg je onder andere wat meer flexibiliteit en opmaak mogelijkheden. De reden dat ik zelf de Pro versie gebruik is omdat het mij veel tijd bespaard en mij dit op jaarbasis de investering van $39 waard is.

Met de Pro versie komt bijvoorbeeld ook een Template Library.

Hiermee kan je met een paar klikken blokken toevoegen aan je website die door een professional zijn ontworpen.

Op dit moment zijn er in totaal 169 templates waar je uit kan kiezen.

Je kan natuurlijk zelf een prijstabel ontwerpen en maken zoals we in de eerdere voorbeelden hebben gedaan.

Maar als je GenerateBlocks Pro gebruikt kan je ook met 1 klik een prijstabel invoegen die je mooi vindt.

Stel je vindt de middelste blauwe prijstabel mooi.

Met 1 klik voeg je deze in op jouw pagina.

Daarna pas je eenvoudig de inhoud en de stijl aan zodat het bij de rest van je website past.

Op deze manier bespaar je veel tijd.

Ook als je geen inspiratie hebt of nog niet zo goed bent met design en/of WordPress kan het helpen om gebruik te maken van dit soort templates.

Alleen voor een prijstabel is het in mijn ogen wat onnodig om de Pro versie aan te schaffen.

Wil je echter op andere onderdelen van je website ook gebruik maakt van de Template Library, dan is de investering van $39 wel interessant omdat je hiermee zoveel tijd bespaard.

Maar het is niet noodzakelijk.

Zoals je eerder in dit artikel zag kan je met de gratis versie meer dan voldoende. Maak dus voor je zelf de afweging of je de gratis of de Pro versie wilt gebruiken voor jouw website.