Beste originele WordPress blokken [Snel overzicht]

We geven je een handleiding voor het gebruik van de Gutenberg WordPress editor en blokken. Lees het nieuws over de veranderingen aan de blokken in de volgende versie 5.4. We hebben de meest gebruikte blokken geselecteerd die op elke website gebruikt moeten worden. Zodra deze versie beschikbaar is, zullen we meer details over alle functies publiceren.

Toen WordPress in 2018 de nieuwe Gutenberg-editor aankondigde, waren we er enthousiast over. Nu een paar jaar later zien we een enorme verbetering. Gutenberg WordPress editor is een geweldige tool om een website te maken.

Al deze standaard WordPress blokken voor Gutenberg editor zijn volledig functioneel in ons nieuwste project Gratis Citadela WordPress Thema. Je kunt het op elke website gebruiken een account aanmaken en download het gratis.

Met AitThemes Citadela pluginsJe kunt specifieke inhoud maken voor de presentatie van een bedrijf, blog of non-profit website. Of zelfs een nieuw online bedrijf starten. De snelheid van de website en het gemak waarmee je de website kunt bewerken zijn de belangrijkste factoren.

Wat is een blok?

Gutenberg WordPress blokken zijn bouwstenen van de website. Elk van hen heeft zijn eigen speciale plaats en doel. Het is heel belangrijk om het juiste WordPress blok te gebruiken voor een bepaald type inhoud.

Maar hoe vind je het meest geschikte blok dat bij je doel past?

Om je te helpen WordPress blokken beter te begrijpen, hebben we dit overzicht gemaakt van de populairste blokken.

Tekstinhoud blokken

Er zijn verschillende blokken die je kunt gebruiken om tekstinhoud op je website in te voegen. Je kunt verschillende blokken gebruiken. Vanaf WordPress 5.4 is er een nieuwe instelling waarmee je de tekstkleur kunt veranderen.

• Paragraaf
• Rubriek
• Citaat
• Lijst
• Pullquote
• Tabel
• Vers
• Voorgeformatteerd

Behalve dit, gebruik je Classic block, wat handiger kan zijn voor een lange paragraaf.

Knopblok

Het maken van een aantrekkelijke CTA-knop in WordPress is super eenvoudig geworden met Button block. Je hoeft geen aangepaste CSS in te voeren of HTML te begrijpen. Je kunt - maar dat hoeft niet - de hexadecimale code van je favoriete kleur invoeren om de knop er mooi en opvallend uit te laten zien.

Waar gebruik je Knopblok?

Zodra de webbezoeker op je website komt, wil je hem aanmoedigen om actie te ondernemen. Daar zijn CTA-knoppen voor.

In het algemeen zijn er 3 plaatsen waar je het WordPress Button blok moet gebruiken:

• Homepage - om een actie te voltooien die leidt tot het bereiken van je doel, zoals je aanmelden voor de nieuwsbrief, de speciale aanbieding ontdekken of je registreren voor een gratis proefperiode.
• Productpagina - afhankelijk van hoe je productpagina wordt geleid, kan er 1 CTA-knop (KOPEN) of meer knoppen zijn, bijv. productdetails, kopen, toevoegen aan verlanglijstje, enz.
• Blog - CTA-knoppen kunnen verwijzen naar een ander nuttig artikel of de aankoop van je product/dienst.

Instellingen knopblok

In Inspector, aan de rechterkant, kun je eenvoudig de instellingen van je knop beheren:

• Stijl
• Achtergrondkleur
• Kleur lettertype
• Grens

De tekst op je CTA-knop moet kort en duidelijk zijn en de actie stimuleren die je wilt dat je webbezoekers ondernemen.

Nieuws voor de volgende versie van WordPress 5.4 (release 31 maart 2020)

Button blok wordt vervangen door nieuwe Buttons blok.
Uit de nieuwe naam kun je opmaken dat je meerdere knoppen naast elkaar kunt maken in één blokcontainer. Vaak is het nodig om twee CTA's tegelijk te maken, bijvoorbeeld: Koop nu en Lees meer. Er komen ook nieuwe stijl- en kleurinstellingen. Kies de stijl Vullen of Outline en vervolgens de kleur van de achtergrond. Je kunt kiezen voor een effen achtergrond of een achtergrond met kleurverloop. Er zullen enkele presets als startpunt beschikbaar zijn voor meer moeiteloze fine-tuning. Het goede nieuws is dat alle bestaande knoppenblokken zullen werken en dat je ze niet hoeft te migreren.

Kolommen blok

Het Columns blok is een geweldig WordPress blok dat deuren opent naar nieuwe lay-outs. Het geeft je meer opties voor de indeling van pagina-elementen, wat resulteert in meer ontwerpalternatieven.

Werken met het blok Columns is eenvoudig:

• Geen extra plugin-installatie.
• Geen codering nodig.
• Het enige wat je nodig hebt, is een beetje gevoel voor netjes design.

In vergelijking met het gedoe dat je vroeger moest doormaken voordat de WordPress block editor werd uitgebracht, is het nu super eenvoudig om het Columns WordPress blok te gebruiken.

Hoe gebruik je het blok Columns?

Zoals hierboven aangegeven, zijn er 2 manieren waarop het blok Columns kan worden gebruikt:

• Om de stroom van je teksten te organiseren (in een blogpost of op de gewone pagina).
• Andere blokken in kolommen rangschikken.

Door tekst in kolommen te organiseren, bijvoorbeeld in een blogpost, vergroot je de leesbaarheid en maak je je website overzichtelijker en gebruiksvriendelijker.

Maar als je het blok Kolommen gebruikt om andere blokken te nesten, zoals afbeeldingen, teksten en knoppen, verander je de hele lay-out van je gekozen pagina en maak je nieuwe ontwerpen.

Kolom blok instellingen

Na het invoegen van een Kolomblok op de pagina, kies je hoeveel kolommen je wilt. Dit kunnen er 2 tot 6 zijn. Vervolgens kun je beginnen met het typen van je tekst of het toevoegen van blokken in elke kolom.

De uitlijning van de inhoud van je kolomblok kan afzonderlijk worden ingesteld voor het hele blok en voor afzonderlijke kolommen. Je kunt zelfs de verhouding van de kolombreedte kiezen. Zo kan de ene kolom breder zijn dan de andere.

Afdekblok

Laten we het eens hebben over de header van je website. Het is een sectie die de eerste indruk bepaalt wanneer iemand op je homepage komt. Best belangrijk, toch? En wist je dat Cover-blok kan worden gebruikt als header op al je pagina's?

Cover is de kern van de WordPress blokken waarmee je indruk kunt maken op je webbezoekers. Vooral als het goed wordt gebruikt, of beter gezegd, als het netjes is geïntegreerd in je webdesign.

Waar Cover block gebruiken?

Zoals hierboven vermeld, kan Cover block op al je pagina's worden gebruikt. Bovendien kan het overal op de pagina worden toegevoegd, in tegenstelling tot de header van je website die vast bovenaan je website staat.

Dekselblok kan worden gebruikt als:

• Koptekst van elke pagina, inclusief homepage.
• Afbeelding of video overschreven door tekst op productpagina.
• Scheider van inhoud in blogpost.

Instellingen afdekblok

Het instellen van je Cover-blok is heel eenvoudig. Kies eerst een afbeelding of video als achtergrond. Je kunt ook een enkele kleur gebruiken. Wanneer je de achtergrond hebt ingesteld, voeg je een titel en ondertitel toe. 

Je kunt de uitlijning van het blok kiezen en natuurlijk de uitlijning van de tekst erin.

Cover block alignment biedt de volgende opties:

• Links uitlijnen
• Centrum uitlijnen
• Rechts uitlijnen
• Breedte
• Volledige breedte

Mijn persoonlijke favoriet is de kleurenoverlay die beschikbaar is in de inspector - de achtergrondafbeelding van het omslagblok kan worden aangepast aan elke kleur die je maar wilt. Samen met de aangepaste lettergrootte en -kleur kun je prachtige contrasten creëren en het uiteindelijke uiterlijk van je omslagblok zal verbluffend zijn.

Vanaf WordPress 5.4 kun je kiezen voor een verlopende achtergrond in plaats van een effen achtergrond.

Galerij blok

Toon afbeeldingen op je website met het Galerij blok. Dit standaard WordPress blok is ontworpen om je afbeeldingen vast te houden en ze mooi weer te geven op elke pagina van je website. Net als andere WordPress blokken kan het Galerij blok overal op de website of in het blogbericht worden geplaatst.

Je kunt je afbeeldingen uploaden door bestanden te kiezen uit de mediabibliotheek, vanaf je computer of met de sleepfunctie.

Waar gebruik je Gallery block?

Afhankelijk van het type website wil je misschien een complexe fotogalerij of een eenvoudige afbeeldingspresentatie maken. Je kunt het blok Galerij gebruiken op:

• Uw homepage
• Individuele subpagina's gemaakt als albums van je fotogalerij
• Product pagina's
• Blogpost

Galerij blok instellingen

Naast de verschillende uitlijnopties van het Galerij-blok zelf, zijn er een paar interessante opties binnen dit blok, zoals:

• Aantal kolommen waarin de afbeeldingen worden geplaatst.
• Afbeelding bijsnijden tot dezelfde grootte (van de kleinste afbeelding).
• Hyperlink om je de optie te geven om naar een andere pagina of een mediabestand te linken.

Beeldblok

Image block is niets anders dan het blok waarmee je een afbeelding op je website kunt weergeven.

Dat klopt. Als je een afbeelding wilt toevoegen aan een van je pagina's, dan moet je het Image WordPress blok gebruiken. Het lijkt misschien op andere gepresenteerde blokken, maar er zijn belangrijke verschillen die het perfect maken voor losse afbeeldingen.

Wanneer gebruik je beeldblok?

Het afbeeldingsblok moet vooral worden gebruikt als het object dat op de afbeelding wordt weergegeven bijzonder belangrijk is voor je webbezoeker:

• Trek de aandacht van webbezoekers met een specifieke afbeelding.
• Afbeelding met bijschrift weergeven.
• Toon infographics die bezoekers helpen om het besproken onderwerp beter te begrijpen.

Instellingen afbeeldingsblok

Een van de grootste voordelen van het Image WordPress blok zijn de opties voor het afbeeldingsformaat. Je kunt eenvoudig het formaat van een afbeelding aanpassen door het bij de hoek te trekken, een vaste grootte in pixels kiezen of de grootte in procenten bepalen.

Een andere belangrijke optie zijn invoervelden voor alternatieve tekst, bijschrift en link. Ik raad het gebruik van deze velden sterk aan, omdat ze een belangrijke rol spelen in on page SEO.

Media & tekstblok

Laten we overgaan naar meer geavanceerde paginalay-outs die je kunt maken met behulp van het blok Media & tekst. Met dit WordPress kernblok kun je media en tekst naast elkaar combineren, op een manier die esthetisch en contextueel is.

Waar Media & tekstblok gebruiken?

Hoewel het blok Media & tekst het meest geschikt is voor gebruik binnen blogposts, kun je het met een beetje verbeelding ook elders gebruiken. Je kunt bijvoorbeeld een mooi product- of dienstenoverzicht maken met beeld & tekst naast elkaar.

Vergeet niet een Button-blok toe te voegen aan de tekstsectie van het Media & tekst-blok, als dit wordt gebruikt als product-/dienstenoverzicht. Zo kun je op elke pagina een mooie CTA-sectie ontwerpen.

Voordelen van media & tekstblok

• Beeld en tekst samenbrengen die in hun context bij elkaar passen.
• Verkeerde plaatsing van afbeeldingen binnen de blogpost vermijden.
• Helpen met de responsiviteit van de site (gebruik de functie "Stapelen op mobiel").

Instellingen voor media en tekstblokken

Als je kijkt naar de instellingen van het blok Media & tekst, zie je dat er heel wat uitlijnopties zijn, waarvan sommige uniek zijn in vergelijking met de meeste andere blokken.

Interessante en nuttige instelling van dit blok is achtergrondkleur. Door het gebied rond de afbeelding en tekst die bij elkaar passen in te kleuren, kun je hun verbinding visueel benadrukken.

Een koppeling invoegen vanuit WordPress versie 5.4 (31.3.2020). Je kunt kiezen uit een link, mediabestand of pagina met bijlagen.

Tabel blok

Tabel blok is een van de voorbeelden van hoe WordPress is verbeterd na de introductie van WordPress blok editor in versie 5.0 en hoger. Waar je voorheen een plugin nodig had om tabellen in je WordPress website in te voegen, kun je nu gewoon Tabel blok gebruiken.

Waar tafelblok gebruiken?

Tabellen spelen een grote rol bij het bieden van nuttige inhoud op een overzichtelijke en transparante manier. Zeker, de meeste websites hebben tabellen gebruikt. Hier zijn enkele voorbeelden van het gebruik van tabellen op verschillende websites:

• Gegevensvergelijking
• Tabellen met prijzen
• Product technische details
• Recepten
• Overzicht lidmaatschapspakketten

Tabelblok als onderdeel van de gratis WordPress kern is echt geweldig.

Instellingen tabelblok

Wanneer je een Tabelblok invoegt in de pagina, moet je een aantal kolommen en rijen van je tabel definiëren. Maak je geen zorgen, dit aantal staat niet vast. Je kunt op elk moment meer rijen en kolommen toevoegen (of verwijderen).

Kies vervolgens een stijl voor je tabel: standaard of strepen. Ga verder met uitlijning en lettertypestijl en vul ten slotte je tabel in voordat je hem afwerkt.

Meer opties zijn onder andere:

• Achtergrondkleur
• Cellen met vaste breedte
• Kop
• Voettekst
• Link (tekstinvoer in een tabel kan linken naar andere pagina's)

Welk blok zou je als volgende willen zien?

Ik hoop dat je het leuk vond om te lezen over onze selectie van zeer nuttige WordPress core blokken - gratis beschikbaar voor iedereen. Laat ons alsjeblieft weten over welke blokken je de volgende keer meer wilt lezen of welke functionaliteit je nog mist in WordPress core. Bedankt voor het lezen!