Als je gebruik maakt van GeneratePress als thema op je website, dan raad ik het zeker aan om de bijbehorende plugin GenerateBlocks te installeren. Deze plugin voegt enorm veel toe aan je website qua lay-out en andere opties. Het zou kunnen dat deze plugin al is geïnstalleerd als je een GeneratePress starter-website hebt gekozen. In dit artikel bekijk ik wat je allemaal kan met deze plugin, wat de voordelen zijn van de betaalde versie (maar waarom je de gratis versie kiest) en geef ik mijn mening over GenerateBlocks.
Een stukje geschiedenis
In december 2018 werd Gutenberg gelanceerd door WordPress Gutenberg is een editor voor WordPress waarmee je op een gebruiksvriendelijke manier webpagina’s en berichten kunt maken en aanpassen met behulp van blokken. Deze blokken bevatten verschillende soorten inhoud en kunnen gemakkelijk worden verplaatst, bewerkt en aangepast, waardoor het maken van een website veel flexibeler en eenvoudiger wordt.
Voorbeeld van blokken in de Gutenberg editor
Je werkt in WordPress dus nu standaard met blokken om pagina’s en berichten op te bouwen. Hoewel de nieuwe editor in 2018 niet echt positief werd ontvangen, is dat tegenwoordig wel een heel stuk beter. Sterker nog: de meeste mensen hebben het werken met blokken omarmt. Ik ben er zelf ook fan van. Hieronder zie je enkele voorbeelden van de standaard blokken die je in de Gutenberg editor kan gebruiken in een bericht:
Buttons
Opsomming
- Een
- Lijst
- Met
- Woorden
Auteursblock
Wat is GenerateBlocks?
GenerateBlocks is een WordPress-plugin die extra blokken toevoegt aan de Gutenberg-editor. Je krijgt dankzij deze (gratis) plugin nog meer mogelijkheden om een website op te bouwen. De plugin werkt goed samen met het thema GeneratePress, maar je kan het ook bij andere thema’s gebruiken. Ik gebruik het zelf in combinatie met de premium versie van GeneratePress.
GeneratePress
Snel thema
geschikt voor vrijwel alle projecten
Gratis versie beschikbaar
Wij gebruiken de Premium versie van GeneratePress voor al onze grote websites
MijnOnlineInkomen is ook gebouwd in GeneratePress
Bekijk mijn uitgebreide GeneratePress review
De extra opties van GeneratePress op een rij
Na het installeren van deze plugin krijg je nog meer mogelijkheden om je website op te bouwen. Hieronder zie je enkele opties van deze plugin.
Container
Je begint bij het opbouwen van een pagina of berichten in GenerateBlocks altijd met een container. Hier plaats je de overige elementen in. Dit ontbreekt in het standaard gedeelte van WordPress. Zo hou je de pagina overzichtelijk voor jezelf. Je kan eenvoudig zien welke elementen er in de container zitten.
Koptekst
Hoewel WordPress zelf ook een koptekst heeft, kan je deze niet echt bewerken. GenerateBlocks heeft een speciaal Headline block. Je kan dit block opmaken naar wens. Zo kan je de koptekst verschillende kleuren geven of gebruikmaken van dynamische content. Hieronder zie je een voorbeeld van een koptekst met achtergrond, pictogram en overige opmaak. Ook heb ik een rand gemaakt die alleen zichtbaar is aan de onderkant en bovenkant. Een erg veelzijdig block dus!
Je kan een koptekst mooi opmaken
Knop
Je krijgt meer controle over de buttons. Ook kun je eenvoudig meerdere buttons in een rij toevoegen en kun je de kleuren beter bewerken. Een ideaal block, waar ik in het verleden zelfs een hele aparte plugin voor nodig had. Hieronder heb ik een button gemaakt met een pictogram (die ik heb vergroot), een verloop in de achtergrondkleur en een rand met willekeurige diktes aan alle kanten. De mogelijkheden zijn eindeloos. Ideaal voor een affiliatewebsite, omdat je hier graag werkt met buttons en Call-To-Actions.
Afbeelding
Dit block gebruik ik persoonlijk niet heel vaak. Het standaard block van WordPress vind ik al goed. Toch kan het soms handig zijn als je een dynamische afbeelding wilt gebruiken. Dit is een afbeelding die zich aanpast aan de pagina. Een voorbeeld is een dynamische afbeelding van de auteur. Je kan bijvoorbeeld aangeven dat de afbeelding weergeven moet worden die bij de auteur hoort. Schrijf ik een bericht, dan wordt mijn afbeelding getoond. Schrijft iemand anders het bericht, dan wordt zijn afbeelding getoond. Verder heb je in dit block ook meer mogelijkheid tot opmaak van de afbeelding.
Hieronder heb ik als voorbeeld een afbeelding op formaat gemiddeld gezet en hier een dikke oranje rand omheen gemaakt.
Raster
Je maakt eenvoudig een grid in kolommen met GenerateBlocks. Handig als je content naast elkaar wilt weergeven. Een goed voorbeeld zie je hieronder.
Ik heb hier een container aangemaakt met daarin een raster. Ik heb daarbij aangegeven dat ik een raster wil hebben van twee gelijke kolommen. Op mobiel wordt dit onder elkaar weergeven. Op een tablet, laptop of pc zie je deze blokken naast elkaar
Query Loop
Deze loop gebruik ik erg vaak. Eigenlijk zijn alle blogpagina’s en archiefpagina’s op al onze websites gebouwd met deze loop. Je kan het design goed aanpassen en precies aangeven wat je wilt tonen. Als ik bijvoorbeeld de laatste berichten in de categorieën informatie & SEO wil tonen, dan kan dat mooi via de Query Loop. Hier kom ik later in deze cursus natuurlijk nog op terug.
Een mooi voorbeeld van een Query loop
Informatie & SEO
Overige opties
In de editor zelf krijg je bij meerdere blokken meer opties om deze te bewerken. Erg fijn, want de standaard editor van WordPress is hier wat karig in. Je krijgt meer opties voor het aanpassen, zoals:
- Typografie: Pas het lettertype aan in diverse blokken
- Tussenruimte: Speel met de spatiëring van blokken. Pas de opvulling, marges en randen aan van blocks.
- Kleuren: Ook krijg je meer controle over de kleuren in een block. Handig als je de website naar jouw smaak aan wilt passen.
- Verlopen: Maak mooie verlopen in de kleuren. Handig voor bijvoorbeeld in buttons en als overlay in afbeeldingen.
- Achtergronden: Voeg achtergrondafbeeldingen toe en bepaal hun grootte en positie. Dit moet je normaal in CSS doen (zelf code schrijven), maar dat is nu niet meer nodig!
- Pictogrammen: Voeg mooie icoontjes toe aan buttons en andere blocks.
De Pattern Library
Dit vind ik persoonlijk een van de leukste dingen aan de plugin. Je krijgt (ook in de gratis versie) toegang tot de Pattern Library. Dit is een bibliotheek met opmaak voor je website en kant-en-klare blokken. Je kan deze blokken één op één kopiëren op je website. De bibliotheek met blokken kan je hier vinden. Rechtsboven kan je filteren op Pro & Free of alleen Pro of alleen Free. Zoals je waarschijnlijk wel begrijpt moet je voor alle pro-patterns een licentie hebben (zie verderop in de tekst) Ook kan je filteren per categorie. Hieronder zie je een voorbeeld van een Call-to-action (deze), die ik direct vanaf de bibliotheek heb gekopieerd via de Copy-knop.
Ready to get started?
Contact us today to learn how our customized plans can help grow your business.
De vier voordelen van GenerateBlocks op een rij
Ik ben zelf erg fan van deze plugin en wel om de volgende redenen:
- Enorm veel mogelijkheden
- Gratis versie biedt enorm veel waarde
- Gaat niet ten koste van de snelheid
- Gebruiksvriendelijk, ook voor beginners
Gratis vs. Pro: is het de moeite waard?
Er is een pro-versie beschikbaar van deze plugin. Deze vind ik absoluut niet duur. Voor een enkele website kost een licentie (2023) per jaar $39,00, omgerekend zo’n €36,00. Voor 10 websites ben je slechts $69,00 per jaar kwijt. Dit is omgerekend zo’n €64,00. Je krijgt er best veel voor terug.
- 200+ patronen
- Bouw lokale patronen
- Wereldwijde stijlen
- Blokkeer effecten
- Accordeon blok
- Tabbladen blokkeren
- Bibliotheek
- Geavanceerde achtergronden
- Container hover-functies
- Aangepaste attributen
- Ondersteuning voor 1 jaar
- Updates voor 1 jaar
Mijn advies: Ben je erg enthousiast over je nieuwe affiliate website en vind je het niet erg om iets te investeren? Dan raad ik dit zeker aan. Je krijgt veel meer mogelijkheden over de blokken en krijgt toegang tot de pro-versie van de Pattern Library. Toch is de betaalde versie totaal niet nodig. Ik heb meerdere website opgebouwd zonder problemen met alleen de gratis versie. Voor de beginnende websitebouwer is dit meer dan voldoende.
Hoe installeer je deze plugin?
Ondertussen ben je waarschijnlijk wel gewend hoe je een plugin kan installeren. Zo niet, dan kun je het onderstaande stappenplan volgen.
- Log in op je website via /wp-admin
- In je dashboard ga je naar Plugins>Nieuwe plugin
- Zoek naar de GenerateBlocks plugin, gemaakt door Tom Usborne.
- Klik op Nu installeren
- Vervolgens klik je Activeren
Huiswerkopdracht
Installeer de gratis versie van GenerateBlocks op je website als plugin. Het kan zijn dat je deze al hebt geïnstalleerd toen je een starter-website importeerde. Dit kan je nakijken in de lijst met plugins op je website. De huiswerkopdracht is deze week wat uitgebreider. Het is de bedoeling dat je vertrouwd raakt met de plugin en het aanmaken van blokken. De huiswerkopdacht genaamd GenerateBlocks blokken toevoegen staat in DIT ARTIKEL.
