[Wat zijn] WordPress Gutenberg Blocks & Hoe je ze goed gebruikt

De WordPress Gutenberg-editor werd in december 5.0 geïntroduceerd in WordPress 2018. Deze nieuwe functie, beter bekend als de 'blok-editor', zorgt ervoor dat het maken van pagina's en berichten niet langer verloopt via een eenvoudig, blokvormig ontwerp uit eerdere versies, maar via een pagina-editor.

Gutenberg blocks bieden nu een modulaire aanpak voor het creëren van content. In plaats van code te gebruiken om een ​​ander element aan een pagina toe te voegen, kunt u een blok verwisselen. U kunt bijvoorbeeld een tekstblok verwisselen voor een videoblok of tabel, net zoals u dat zou doen bij het bouwen van een pagina in Beaver Builder of Elementor. Het is een evolutie die lang op zich liet wachten, maar nu het er is, zul je je snel afvragen hoe je ooit zonder hebt kunnen pagina's maken!

{automatisch}

Gutenberg blocks

Als je updatet naar WordPress 5.0 en hoger, en dat zou je inmiddels moeten doen, zul je merken dat de gebruikersinterface iets is veranderd. Je ziet nog steeds het traditionele zijmenu aan de linkerkant en het inhoudsmenu aan de rechterkant, maar in het midden is alles veranderd.

Vóór de update zag je een lege titel en een leeg inhoudsvak waar je je pagina of bericht had gebouwd. Nu zie je een leeg gedeelte in het midden met een titelblok en een tekstblok dat al is ingevuld. Het rechtermenu verandert dynamisch, afhankelijk van wat je doet. In eerste instantie worden de traditionele opties voor categorie, tag en afbeelding met kenmerken weergegeven, net als voorheen, maar nu is er een tabblad 'Blok'.

Met het tabblad Blok kun je het individuele blok bewerken, net als bij paginabuilders die veel ontwerpvrijheid bieden. Wat je op het tabblad Blok ziet, is afhankelijk van het betreffende blok, maar alle blokken hebben de mogelijkheid om aangepaste CSS toe te voegen.

Gutenberg blocks Introduceer een echt modulaire aanpak voor paginaontwerp. Je hebt de mogelijkheid om dingen op dezelfde manier te blijven doen of er dieper op in te gaan. Je kunt elk blok aanpassen om er subtiel of opvallend anders uit te zien, of ze allemaal als één geheel laten werken. Het is een zeer krachtig en vergevingsgezind systeem.

Gebruiksaanwijzing Gutenberg blocks

Het mooie van het vernieuwde WordPress-ontwerp is dat het voldoende lijkt op hoe het voorheen werkte, waardoor de gebruikersinterface nog steeds vertrouwd is. Zelfs als je niet bekend bent met de nieuwe blokken, kun je nog steeds je paginatitel, content, codes en widgets toevoegen en publiceren zoals voorheen. Het ziet er misschien iets anders uit, maar de werking is vrijwel hetzelfde.

Dit is ideaal voor incidentele bloggers of voor mensen die nieuw zijn met WordPress. Omdat gebruiksgemak een belangrijk element van het CMS is, zijn de ontwikkelaars er op de een of andere manier in geslaagd om meer geavanceerde functies toe te voegen zonder het systeem als geheel gebruiksvriendelijker te maken.

Met de standaardopties kunt u nog steeds binnen enkele minuten een pagina maken, maar u kunt nu veel dieper graven zonder dat u een regel code hoeft te leren of zelfs maar hoeft te weten hoe een shortcode eruitziet.

Het zijn deze dingen die het maken Gutenberg blocks zo handig.

U kunt beide gebruiken Gutenberg blocks of niet.

Met de standaard pagina- en berichtinstellingen kunt u uw pagina-inhoud nog steeds elders opmaken en deze eenvoudig kopiëren en plakken op de pagina. Plak de titel in het titelblok en de pagina-inhoud in het tekstblok. Als dat alles is wat u nodig hebt, is het aanmaakproces net zo eenvoudig als voorheen. Wilt u nog verder gaan? Dat kan.

Als u dieper wilt ingaan op de werking van de blokeditor, ziet u nog een paar opties:

• Selecteer het kleine '+'-icoontje naast het middelste blok om een ​​nieuw blok toe te voegen.
• Selecteer de 'H' om een ​​kop toe te voegen.
• Selecteer het lijsticoontje om een ​​lijst aan uw blok toe te voegen.
• Selecteer het afbeeldingspictogram om een ​​afbeelding toe te voegen.

Al deze vier opties zijn beschikbaar in het contentmenu, maar doordat ze voor elk blok beschikbaar zijn, kunt u uw content in elk gewenst ontwerp maken. De afzonderlijke, opvallende blokken kunnen afzonderlijk worden bewerkt en van een kader worden voorzien, en elk blok wordt weergegeven op de voltooide pagina.

Dit is iets Elementor (en soortgelijke pagina-bouwers zoals Divi) doen we al jaren met groot succes. Je kunt nu vrijwel hetzelfde doen binnen WordPress.

Meer informatie vindt u hier Divi in ​​onze Elegant Themes-recensies.

Het maken van een pagina met de blokeditor is eenvoudig:

1. Selecteer Nieuwe pagina of Nieuw bericht in het WordPress-zijmenu.
2. Schrijf of plak de titel van uw pagina in het titelblok.
3. Schrijf of plak uw inhoud in het tekstblok.
4. Selecteer het '+'-pictogram rechts van het blok om een ​​nieuw blok toe te voegen.
5. Selecteer het meest geschikte blok uit het pop-upvenster.
6. Maak de hoofdblokelementen in het middelste paneel af.
7. Selecteer het pictogram met de drie puntjes bovenaan het blok dat u hebt toegevoegd om het ontwerp te wijzigen of aan te passen.
8. Om aangepaste CSS toe te voegen, selecteert u Geavanceerd in het menu aan de rechterkant.
9. Selecteer twee keer Publiceren om live te gaan.

Hoewel het gebruik van de blokeditor heel eenvoudig is, kun je er veel dieper op ingaan als dat nodig is. Het menupictogram met drie puntjes bij elk blok opent een overvloed aan aanpassingsmogelijkheden, afhankelijk van het blok. Je kunt duplicaat het blok, voeg andere blokken ervoor of erna in, wijzig de HTML-kenmerken, groepeer blokken en meer, afhankelijk van de beschikbare opties.

Bovendien kunnen ontwikkelaars naast de standaardblokken die bij WordPress worden geleverd, ook hun eigen blokplugins maken. Gezien de enorme gebruikersbasis en het enorme ontwikkeltalent van WordPress zijn er na slechts een jaar gebruik al talloze blokplugins beschikbaar.

Veelgebruikte blokken

WordPress heeft een reeks blokken opgenomen die de basis vormen voor het maken van pagina's. Elk blok maakt het eenvoudig om verschillende pagina-elementen toe te voegen en biedt tegelijkertijd aangepaste ontwerpfuncties voor dat blok. Het is een krachtige bewerkingsoptie die zeer effectief kan worden gebruikt.

De standaard Gutenberg blocks binnen WordPress zijn onder andere:

• Tekstblok – Het traditionele inhoudsblok waarin u precies zo kunt werken als voorheen en wijzigingen kunt aanbrengen met behulp van HTML of shortcodes.
• Kop – Kopblokken met de standaard H1, H2, H3, H4-instellingen.
• Lijst - Een apart blok waarmee u opvallende lijsten kunt maken, geordend of ongeordend.
• Galerij - Een galerijblok waarmee u afbeeldingen op maat kunt opmaken, zodat ze passen bij de inhoud van uw pagina.
• Afbeelding - Een specifiek afbeeldingblok dat op een soortgelijke manier werkt als de galerij, maar dan voor afzonderlijke afbeeldingen.
• Citaat - Een opvallend blok waarmee u citaten of recensies op een pagina kunt markeren.
• Audio - Een specifiek blok met de mogelijkheid om te klikken en audioclips af te spelen in de pagina-inhoud.
• Hoes - Een nieuw blok waarmee u een omslagafbeelding voor uw pagina of bericht kunt plaatsen die de uitgelichte afbeelding aanvult.
• Video - Een videoblok dat werkt als audio en het eenvoudig maakt om video op een pagina of bericht weer te geven.

Alles wat je ermee kunt doen Gutenberg blocks Vroeger kon je dat met de originele editor doen, maar die was niet altijd gebruiksvriendelijk of toegankelijk voor nieuwe gebruikers. Dit blokontwerp maakt het voor iedereen gemakkelijk om pagina's op een logische en lineaire manier op te bouwen.

De beste Gutenberg-blokplugins

De standaard WordPress Gutenberg blocks Dekken het grootste deel van wat je waarschijnlijk van je CMS nodig hebt. We noemden echter al eerder dat ontwikkelaars ook hun eigen Gutenberg-blokplugins zijn gaan ontwikkelen om nog meer functies toe te voegen. Er zijn tientallen blokplugins van verschillende kwaliteit en we hebben hier een aantal van onze favorieten verzameld.

Laten we er nu eens een paar bekijken.

We zullen kijken naar:

1. Toolset-blokken
2. Ultieme blokken
3. Ultieme add-ons voor Gutenberg
4. Geavanceerd Gutenberg Blocks
5. Stapelbaar Gutenberg Blocks
6. Atoomblokken
7. Otterblokken
8. Blokken van Templatic
9. Kadansblokken

Veel van deze Gutenberg-blokplugins zijn volledig gratis, terwijl andere gratis blokken aanbieden met de mogelijkheid om te upgraden naar geavanceerdere premiumblokken. We hebben in elke beschrijving vermeld welke gratis blokken beschikbaar zijn en waar er premiumopties beschikbaar zijn.

Elke plug-in wordt op dezelfde manier geïnstalleerd als elke andere WordPress-plug-in. Selecteer de plug-in op WordPress.org en installeer en activeer, of download de bestanden naar je computer en upload ze naar je WordPress-installatie. Na de installatie zou je de nieuwe blokopties moeten zien verschijnen, waarbij de standaard geblokkeerd wordt wanneer je op '+' klikt op een pagina.

1. Gereedschapssetblokken

Toolset-blokken is een van onze favoriete plugins voor de blokeditor van WordPress. Het is een premium plugin die bewijst dat je weliswaar goede dingen gratis kunt krijgen, maar dat het soms de moeite waard is om wat extra te betalen voor kracht en gemak. De plugin wordt op dezelfde manier geïnstalleerd als andere plugins en voegt de nieuwe blokken toe aan het bestaande menu.

De blokken omvatten aangepaste berichttypen, aangepaste taxonomie, aangepaste velden, sjablonen, weergaven, paginering, oneindig scrollen, Ajax-blokken, WooCommerce, Google Maps, formulieren, betalingen en zelfs toegangscontrole. Sommige van deze blokken vind je niet in een gratis plugin, daarom hebben we Toolset Blocks uitgelicht.

Een van de beste functies van Toolset is de mogelijkheid om dynamisch gegenereerde content te creëren ZONDER dat je aangepaste PHP-code hoeft te schrijven. Toolset integreert direct met de WordPress Block Editor en stelt je in staat om dynamische content overal vandaan te halen.

Hier zijn een paar voorbeelden van wat u kunt doen: 

• Koppen maken op basis van titels
• Knopteksten en CTA's instellen vanuit aangepaste velden
• Afbeeldingsbronnen voor velden of aangepaste velden instellen
• enz.

De volgende video geeft een goede uitleg van de mogelijkheden van Toolset Blocks:

https://www.youtube.com/watch?v=yPExGHvf_mI

De meesten van ons weten hoe krachtig aangepaste velden en berichttypen kunnen zijn en het is fantastisch om die in een pagina te kunnen implementeren. Naast formulieren, lay-outs, weergaven, toegangscontrole en andere krachtige functies is het ongelooflijk gemakkelijk om deze plugin aan te bevelen, ook al is het een premiumproduct.

Soms is gratis niet de beste prijs en dit is zo'n geval.

2. Ultieme blokken

Ultieme blokken is gericht op bloggers, maar werkt even goed op elke WordPress-website. De plugin is gratis en bevat een selectie promotionele en zeer nuttige bewerkingsblokken die ideaal zijn voor bloggers, maar ook nuttig kunnen zijn voor marketeers, e-commercesites, kleine bedrijven en iedereen die wil dat zijn content opvalt.

Blokken omvatten recensies, een inhoudsopgave, oproepen tot actie, content-switches, afbeeldingensliders, content-filters, testimonials, social sharing, afteltimers, voortgangsbalken, berichtrasters en sterbeoordelingen. De ontwikkelaar zegt dat er nog meer in de maak zijn.

Ultimate Blocks heeft nog een extra troef in petto in de blokbeheerder. Een eenvoudige interface waarmee je blokken kunt in- of uitschakelen om het aanmaken van pagina's eenvoudig te houden. Dit betekent dat je de collectie kunt downloaden en alleen de blokken kunt inschakelen die je waarschijnlijk zult gebruiken, zodat de pagina overzichtelijk blijft tijdens het aanmaken.

3. Gutenberg Blocks – Ultieme add-ons voor Gutenberg

Gutenberg Blocks – Ultieme add-ons voor Gutenberg is van dezelfde ontwikkelaars als de superb Astra WordPress-themaDe gratis plugin voegt een reeks blokken toe voor dagelijks gebruik, die eenvoudig te gebruiken zijn en een breed scala aan aanpassingsmogelijkheden bieden. Ze werken allemaal ook met Astra, wat geweldig is als je dat thema gebruikt.

Blokken omvatten infoboxen, knoppen, geavanceerde koppen, teamblokken, prijzen, sociale shares, getuigenissen, pictogramlijsten, Gravity Form-blokken, marketingblokken, citaten, oproepen tot actie, Contact Form 7-blokken, Google Maps en meer.

Volgens de ontwikkelaars zijn deze blokken geoptimaliseerd voor paginasnelheid en bieden ze naadloze integratie met het Astra-thema en elk ander thema. Je hebt vergelijkbare aanpassingsmogelijkheden als deze andere plugins om blokken in bestaande pagina's te schuiven. Alleen al daarom is deze plugin het bekijken waard.

4. Geavanceerde Gutenberg

Geavanceerde Gutenberg Joom United voegt meer dan twintig editorblokken toe als gratis WordPress-plugin. Er is een behoorlijk aanbod aan opties, van de gebruikelijke kolom en kop tot meer geavanceerde blokken. Ze zijn goed ontworpen met een minimalistische interface die toch alle aanpassingsmogelijkheden biedt die je waarschijnlijk nodig hebt.

Blokken omvatten auteursprofielen, aangepaste CCS-blokken, WooCommerce, geavanceerde knoppen, contactformulieren, geavanceerde lijsten, kaarten, getuigenissen, tellers, inlog- en registratieblokken, video- en afbeeldingsblokken, sociaal delen en linken, berichtensamenvattingen, Lightbox-blokken en nog veel meer.

Elk blok integreert naadloos in een pagina en wordt geleverd met de geavanceerde aanpassingsoptie via het menu met drie stippen. De exacte opties verschillen per blok, maar dekken de meest voorkomende situaties, zoals kleur, grootte, inspringing, uitlijning, enzovoort.

5. Stapelbaar Gutenberg Blocks

Stapelbaar Gutenberg Blocks was een andere vroege toevoeging aan de update en bracht een aantal zeer nuttige aangepaste blokken voor de WordPress-editor uit. De meeste Stackable-blokken zijn gratis, maar de ontwikkelaar biedt ook een aantal premiumblokken aan die specifiek geschikt zijn voor specifieke toepassingen, mocht je die nodig hebben.

Gratis blokken zijn onder andere berichtenblokken, een functieraster, accordion, call-to-action, kaart, header, video-popup, prijsblok, notificatieblok, spacer, divider, functielijst en meer. Er zijn in totaal 23 gratis blokken.

Een bijkomend voordeel is dat Stackable een modulair systeem is, zodat je de blokken die je waarschijnlijk nodig hebt kunt toevoegen en de andere kunt weglaten. Dit kan een kleine opslag- en paginasnelheidsbesparing opleveren, afhankelijk van hoe je website is opgezet. Hoe dan ook, het is een fijne extra functie die de backend overzichtelijk houdt.

6. Atoomblokken

Atoomblokken was een van de eerste plugins op de markt en biedt nu 15 gratis blokken en enkele WordPress-thema's om deze nieuwe ontwerpvrijheid te complementeren. Blokken bevatten onder andere testimonials, prijzen, nieuwsbrieven, berichtenraster, geavanceerde kolommen, deelpictogrammen, call-to-actions, auteursprofielen en andere nuttige blokken.

De plugin is gratis, net als de meeste thema's. Na installatie zie je een nieuwe reeks blokken in de bloksectie van een nieuwe pagina of bericht. Zoek naar AB Post Grid etc. om de functies van Atomic Block te identificeren.

Net als bij deze andere editor-blok-plugins kun je het uiterlijk ervan aanpassen via het geavanceerde menu. Je hebt vergelijkbare opties wat betreft dekking, kleur, positionering, enzovoort, met als bijkomend voordeel extra keuzes als je een Atomic Block-thema gebruikt. Het is een kleine extra functie, maar hij is er!

7. Gutenberg Blocks en sjabloonbibliotheek van Otter

Gutenberg Blocks en sjabloonbibliotheek van Otter is een mond vol, maar de naam is veel begrijpelijker qua functies. Het is een gratis, lichtgewicht plugin met een aantal goed ontworpen blokken die voortbouwen op de blokken van WordPress, maar dan met meer ontwerpmogelijkheden.

Blokken omvatten secties, geavanceerde koppen, knoppen, prijzen, testimonials, Google Maps, auteursbiografieblokken, berichtraster, Font Awesome, delen en een kaartblok. Ze zijn allemaal geoptimaliseerd voor paginasnelheid en functies. Hoewel ze beperkt zijn in functionaliteit, vormen ze een uitstekende aanvulling op de standaardblokken.

Elk blok biedt extra aanpassingsmogelijkheden en een aantal bibliotheekopties. Je kunt elk blok aanpassen aan je specifieke behoeften of een bibliotheekoptie gebruiken om een ​​kant-en-klaar ontwerp te gebruiken binnen het blok. Het is snel en heel eenvoudig.

8. Blokken van Templatic

Blokken van ontwikkelaar Templatic is een andere solide toevoeging aan onze lijst met fantastische Gutenberg-blokplugins. We hebben veel respect voor Templatic-thema's en deze blokken werken met of zonder een van hun thema's. Als je een Templatic-thema gebruikt, passen deze blokken er direct in en zijn ze klaar voor gebruik. Als je geen Templatic-thema gebruikt, integreren deze blokken nog steeds naadloos in je ontwerp.

De blokken zijn gratis en bevatten een auteursbiografie, meldingen, mogelijkheden om te delen op sociale media, scheidingslijnen, een omslagafbeelding, kopopties, een kaart, prijzen, knoppen en een tweetblok. Elk blok heeft de basisfuncties centraal staan, met aanpassingen via het menu. Ze zijn zeer eenvoudig te gebruiken en verschijnen naast alle standaardblokken op de nieuwe pagina of het nieuwe berichtscherm.

Er zijn hier een aantal goede blokken, maar de plugin is al bijna een jaar niet meer bijgewerkt. Ze werken wel met de huidige versie van WordPress, zoals we ze voor dit artikel hebben getest, maar we weten niet wanneer er nieuwe blokken zullen verschijnen.

9. Kadansblokken

Kadansblokken heeft zowel gratis als premium opties die de standaardblokken in WordPress versterken. De gratis versie heeft twaalf blokken en een ingebouwde editor, terwijl de premiumversie van $ 59 per jaar zeven premiumblokken, unieke animatieopties en ondersteuning toevoegt. Er is ook een derde optie: voor $ 99 per jaar krijg je toegang tot alle premium bewerkingsblokken plus alle Kadence-thema's en -producten.

Blokken omvatten pagina-indelingsblokken, infovakken, geavanceerde galerijen, testimonials, videoblokken, accordeon, knoppen, tabbladen, pictogrammen, geavanceerde koppen en afbeeldingen. De premiumversie voegt raster- en carrouselblokken, productcarrousels, modelblokken, afbeeldingsoverlays, gesplitste content en videopop-ups toe.

Elk blok heeft een eigen bewerkingsgedeelte waar je de positie, omtrek, kleur, afbeeldingsgrootte, dekking en diverse andere factoren kunt aanpassen. Als je binnen een specifiek ontwerp of kader werkt, kun je met de editor eenvoudig blokken in dat ontwerp implementeren.

Samenvatting Gutenberg blocks en hun plug-ins

Gutenberg blocks zijn een uitstekende evolutie van WordPress. Ze nemen alles wat we weten en waarderen aan het snel creëren van pagina's of berichten en brengen het naar een hoger niveau. WordPress biedt nog steeds het kenmerkende gebruiksgemak en de lage instapdrempel voor beginners, terwijl het meer ervaren of designgerichte gebruikers de mogelijkheid biedt om zich te onderscheiden. Deze balans tussen vorm en functie is het vieren waard.

Net als de Gutenberg-blokplugins die we in deze lijst bespreken. De gratis plugins bieden vrijwel alles wat je nodig hebt voor het maken van pagina's. Je kunt een pagina of bericht opsplitsen in afzonderlijke componenten en elk afzonderlijk stylen tot het perfect is.

Zelfs die premium plugins zijn de prijs waard. Ze bieden vaak hogere standaarden qua ontwerp en gebruiksvriendelijkheid, en ook een aantal blokken die nergens anders verkrijgbaar zijn. Hoewel ze premium zijn, onderscheidt Toolset Blocks zich door een reeks blokken die je in geen enkele gratis plugin vindt, zoals zoeken, toegangscontrole, WooCommerce en aangepaste berichten en velden.

Heb je een favoriete Gutenberg-blokplugin? Vind je er eentje leuk die we hier niet genoemd hebben? Vertel het ons hieronder!