{"id":213556,"date":"2023-09-01T10:40:00","date_gmt":"2023-09-01T10:40:00","guid":{"rendered":"https:\/\/www.bluehost.com\/blog\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/"},"modified":"2025-06-02T08:57:21","modified_gmt":"2025-06-02T08:57:21","slug":"aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding","status":"publish","type":"post","link":"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/","title":{"rendered":"Aangepaste blokken van Gutenberg gebruiken om WordPress-inhoud te maken: Een gebruikersvriendelijke handleiding"},"content":{"rendered":"\n<p>De <a href=\"https:\/\/wordpress.org\/gutenberg\/\">Gutenberg <\/a><a href=\"https:\/\/wordpress.org\/gutenberg\/\" target=\"_blank\" rel=\"noreferrer noopener\">block editor<\/a>, de inhoudseditor van WordPress, heeft meer dan <a href=\"https:\/\/gutenstats.blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">81 miljoen actieve installaties<\/a>. Vanwege het marktdominante karakter van WordPress en de intu\u00eftieve aard van het ontwerp van deze editor, is het geen verrassing dat dit systeem zo populair is. <\/p>\n\n<p>Gutenberg is een toegankelijke drag-and-drop page builder en content editor. Het biedt veel functionaliteiten, samen met gevarieerde benaderingen die je kunt gebruiken om de curatieve website van je dromen te maken. <\/p>\n\n<p>Deze editor is gebouwd op <a href=\"https:\/\/wordpress.com\/support\/wordpress-editor\/blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Gutenberg-blokken<\/strong><\/a>Dit zijn verschillende eenheden inhoud die de pagina&#8217;s en lay-out van een website vormen.<\/p>\n\n<p>Je kunt deze blokken uit de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-block-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress Block Library<\/a> halen. Deze bibliotheek is uitgebreid, maar heeft niet <em>altijd<\/em> het exacte blok dat je nodig hebt voor je website. <\/p>\n\n<p>Dus, als je een ondernemer bent die geavanceerde websitefunctionaliteit of gespecialiseerde elementen wil die nog niet worden aangeboden door Gutenberg, dan ben je misschien ge\u00efnteresseerd in het gebruik van Gutenberg aangepaste blokken op je WordPress website.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"h-gutenberg-wordpress-core-content-editor\">Gutenberg: De belangrijkste inhoudseditor van WordPress<\/h2>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1999\" height=\"1094\" src=\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor.png\" alt=\"WordPress Gutenberg inhoudseditor.\" class=\"wp-image-46218\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor.png 1999w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-300x164.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-1024x560.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-768x420.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-1536x841.png 1536w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-24x13.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-36x20.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-content-editor-48x26.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermafbeelding<\/em><\/figcaption><\/figure>\n\n<p>De Gutenberg editor is de kern van het WordPress raamwerk voor het bewerken van inhoud. De blok-gebaseerde structuur maakt het eenvoudig om <a href=\"https:\/\/www.bluehost.com\/blog\/how-to-create-a-website-guide\/\">een <\/a><a href=\"https:\/\/www.bluehost.com\/blog\/how-to-create-a-website-guide\/\">WordPress<\/a><a href=\"https:\/\/www.bluehost.com\/blog\/how-to-create-a-website-guide\/\"> website<\/a> en al zijn pagina&#8217;s te bouwen  &#8211; zelfs voor totale beginners. <\/p>\n\n<p>Met deze editor kun je mediarijke inhoud maken in WordPress door de nieuwe blokken te kiezen die je nodig hebt. Vervolgens kun je ze naar wens indelen en de specifieke elementen toevoegen die je op elke pagina wilt weergeven. <\/p>\n\n<h3 class=\"wp-block-heading\">Wat zijn Gutenberg-blokken?<\/h3>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"689\" height=\"575\" src=\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks.png\" alt=\"Gutenberg-blokken zijn de elementen waaruit een pagina of bericht is opgebouwd.\" class=\"wp-image-46219\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks.png 689w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks-300x250.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks-24x20.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks-36x30.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-blocks-48x40.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermafbeelding<\/em><\/figcaption><\/figure>\n\n<figure class=\"wp-block-pullquote\"><blockquote><p>In Gutenberg bestaat elke pagina of post uit een verzameling op zichzelf staande elementen.<\/p><\/blockquote><\/figure>\n\n<p>Je gebruikt deze elementen &#8211; of blokken &#8211; om pagina&#8217;s, berichten en al het andere op je WordPress website op te bouwen.<\/p>\n\n<p>Het <a href=\"https:\/\/gutenstats.blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">populairste blok<\/a> is het blok met paragrafen, gevolgd door blokken met afbeeldingen en koppen. Andere voorbeelden van bloktypes zijn titels, tekst, verdelers, widgets en video&#8217;s. <\/p>\n\n<p>Zoals we al eerder zeiden, kun je WP blokken openen via de Block Library. Je vindt deze door tijdens het bewerken van een pagina of bericht op de <strong>+ <\/strong>linksboven in je WordPress werkbalk te klikken. <\/p>\n\n<p>Maar wat als de bibliotheek van WordPress niet het blokkentype biedt dat je zoekt? Of een placeholder die je zou kunnen upgraden om aan je behoeften te voldoen? <\/p>\n\n<p>Daar komen aangepaste blokken om de hoek kijken.<\/p>\n\n<h3 class=\"wp-block-heading\"><a><\/a>Wat zijn Gutenberg custom blokken?<\/h3>\n\n<p>Met Gutenberg kan iedereen gratis assets maken. Dus als je ervaring hebt met coderen en webontwikkeling, kun je <em>aangepaste<\/em> blokken maken terwijl je je website maakt. <\/p>\n\n<figure class=\"wp-block-pullquote\"><blockquote><p>Aangepaste blokken bieden nog meer flexibiliteit en niche-specifieke functionaliteit dan standaardblokken.<\/p><\/blockquote><\/figure>\n\n<p>Gebruikers bouwen aangepaste blokken om unieke pagina-elementen te maken.<\/p>\n\n<p>Aangepaste blokken van Gutenberg bieden vele voordelen, waaronder:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Je kunt visueel aantrekkelijke, mediarijke WordPress-elementen ontwerpen die zijn afgestemd op de behoeften van <em>je<\/em> bedrijf.<\/li>\n\n\n\n<li>Ze voegen unieke en geavanceerde functionaliteiten toe aan je website.<\/li>\n\n\n\n<li>Ze verbeteren het esthetische uiterlijk van je pagina&#8217;s en helpen je bedrijf zich te onderscheiden van de massa.<\/li>\n\n\n\n<li>Je hoeft blokken maar \u00e9\u00e9n keer te coderen. Daarna kun je ze op al je websites en pagina&#8217;s gebruiken. <\/li>\n<\/ul>\n\n<p>Aangepaste blokken hebben echter een aantal uitdagingen. Zo is er bijvoorbeeld een grondige technische kennis nodig om ze te maken. Daarnaast heb je specifieke codeerexpertise en ontwikkeltools nodig.  <\/p>\n\n<h2 class=\"wp-block-heading\"><a><\/a>Hoe krijg je aangepaste Gutenberg blokken voor WordPress<\/h2>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks.png\" alt=\"Hoe krijg je aangepaste Gutenberg-blokken voor WordPress.\" class=\"wp-image-46220\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks.png 1920w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-300x169.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-1024x576.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-768x432.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-1536x864.png 1536w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-24x14.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-36x20.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Custom-gutenberg-blocks-48x27.png 48w\" sizes=\"100vw\" \/><\/figure>\n\n<p>Om Gutenberg aangepaste blokken te krijgen, moet je ze zelf bouwen of kopen.<\/p>\n\n<p>Aangepaste blokken maken is niet voor iedereen weggelegd, maar dat is geen probleem. Je kunt aangepaste Gutenberg-blokken kopen in plaats van ze zelf te maken. Zoek hiervoor een <a href=\"https:\/\/www.bluehost.com\/about\">ontwikkelaar van topkwaliteit<\/a> die u vertrouwt en werk met hem samen om uw ideale blokken te maken.  <\/p>\n\n<p>Als je van plan bent om deze blokken zelf te maken, zijn er een aantal dingen waar je rekening mee moet houden voordat je begint.<\/p>\n\n<h2 class=\"wp-block-heading\"><a><\/a>Wat u moet overwegen voordat u aangepaste blokken maakt<\/h2>\n\n<p>Het maken van een aangepast Gutenberg-blok kost tijd en energie. Voordat je aan het proces begint, moet je ervoor zorgen dat je al je andere opties hebt uitgeput. <\/p>\n\n<p>U kunt controleren of er geen andere geschikte benaderingen zijn door zorgvuldig de bibliotheek met standaardblokken van Gutenberg door te nemen. Controleer of er geen bestaande blokken zijn die de basisfuncties of stijlspecificaties bieden die u nodig hebt. <\/p>\n\n<p>En als je hebt vastgesteld dat je een aangepast blok nodig <em>hebt<\/em>, zet dan de essenti\u00eble specificaties voor je blok op een rijtje<em> voordat <\/em>je begint met bouwen. Denk aan esthetische elementen, standaardinstellingen en kernfuncties. Denk ook aan werkbalkspecificaties en andere belangrijke stilistische en functionele kenmerken.  <\/p>\n\n<h2 class=\"wp-block-heading\"><a><\/a>Wat je nodig hebt om aangepaste Gutenberg-blokken te bouwen<\/h2>\n\n<p>Zodra je de meest essenti\u00eble aspecten van je blok hebt bepaald, zijn er nog een paar belangrijke vereisten waaraan je moet voldoen voordat je aan het proces begint.<\/p>\n\n<p>Een actieve WordPress website is essentieel. En je hebt op zijn minst enige ervaring nodig met JavaScript en JavaScript-bouwprogramma&#8217;s, zoals <a href=\"https:\/\/nodejs.org\/en\" target=\"_blank\" rel=\"noreferrer noopener\">Node.js<\/a>. <\/p>\n\n<p>Je hebt ook gemiddelde kennis nodig van HTML, CSS en PHP om je eigen aangepaste blokken te maken.<\/p>\n\n<p>Als je niet zo thuis bent op dit gebied, geen zorgen. Je kunt tijd en stress besparen door <a href=\"https:\/\/www.bluehost.com\/solutions\/full-service\">webdesign-experts<\/a> in te huren om je te helpen blokken te bouwen. <\/p>\n\n<h2 class=\"wp-block-heading\"><a><\/a>Hoe maak je aangepaste Gutenberg blokken in WordPress?<\/h2>\n\n<p>Er zijn twee toegankelijke benaderingen voor het bouwen van aangepaste blokken in Gutenberg. Je kunt een gebruiksvriendelijke plugin installeren die het proces vereenvoudigt of ze vanaf nul opbouwen met HTML\/CSS of PHP-code. <\/p>\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-1024x576.png\" alt=\"Hoe maak je aangepaste Gutenberg blokken in WordPress?\" class=\"wp-image-46221\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-1024x576.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-300x169.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-768x432.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-24x14.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-36x20.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-gutenberg-blocks-48x27.png 48w\" sizes=\"100vw\" \/><\/figure>\n\n<h3 class=\"wp-block-heading\">Aangepaste blokken maken met een plugin<\/h3>\n\n<p>Er zijn een aantal <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress plugins<\/a> beschikbaar die het proces van het maken van aangepaste Gutenberg blokken voor je WordPress site stroomlijnen. Wij raden aan om <a href=\"https:\/\/wordpress.org\/plugins\/genesis-custom-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">Genesis Custom Blocks<\/a> te gebruiken. <\/p>\n\n<p>Om je eerste blok te maken met deze plugin:<\/p>\n\n<p><strong>1. Genesis aangepaste blokken installeren<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1999\" height=\"988\" src=\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks.png\" alt=\"Installeer de Genesis Custom Blocks WordPress plugin.\" class=\"wp-image-46222\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks.png 1999w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-300x148.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-1024x506.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-768x380.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-1536x759.png 1536w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-24x12.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-36x18.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Genesis-custom-blocks-48x24.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermafbeelding<\/em><\/figcaption><\/figure>\n\n<p>Navigeer eerst naar <strong>Plugins &gt; Nieuwe toevoegen <\/strong>in de linker zijbalk van je admin dashboard en zoek naar Genesis in de <a href=\"https:\/\/wordpress.org\/plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress Plugins Directory<\/a>. Installeer het en klik op de knop <strong>Activeren <\/strong>. <\/p>\n\n<p><strong>2. Maak een nieuw blok<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"646\" height=\"312\" src=\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block.png\" alt=\"Ga naar Aangepaste blokken &amp;gt; Nieuwe toevoegen in je WordPress dashboard.\" class=\"wp-image-46223\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block.png 646w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block-300x145.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block-24x12.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block-36x17.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-new-block-48x23.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermafbeelding<\/em><\/figcaption><\/figure>\n\n<p>Navigeer vervolgens naar <strong>Aangepaste blokken &gt; Nieuw toevoegen <\/strong>om een blok te maken.<\/p>\n\n<p><strong>3. Blokspecificaties configureren<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"995\" height=\"467\" src=\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring.jpg\" alt=\"Het blok configureren.\" class=\"wp-image-46224\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring.jpg 995w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-300x141.jpg 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-768x360.jpg 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-24x11.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-36x17.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Block-configuring-48x23.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermafbeelding<\/em><\/figcaption><\/figure>\n\n<p>Nu kun je een bloknaam selecteren en de eigenschappen configureren en aanpassen. Voeg <a href=\"https:\/\/www.bluehost.com\/blog\/find-best-keywords-get-found\/\">relevante trefwoorden<\/a> toe <a href=\"https:\/\/www.bluehost.com\/blog\/website-seo-basics-how-to-optimize-your-content\/\">om te helpen met zoekmachineoptimalisatie<\/a> (SEO).<\/p>\n\n<p>Voeg vervolgens velden toe &#8211; zoals getallen, afbeeldingen en selectievakjes &#8211; door op de <strong>+ knop <\/strong>te drukken. Je moet meer specificaties invoeren, zoals <strong>Veldlabel<\/strong>, <strong>Veldlocatie<\/strong> en <strong>Helptekst<\/strong>. Je kunt velden ook herschikken, bewerken en verwijderen.  <\/p>\n\n<p><strong>4. Bouw uw sjabloon.<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1076\" height=\"470\" src=\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2018\/11\/Template-building.jpg\" alt=\"Een sjabloon bouwen.\" class=\"wp-image-46225\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building.jpg 1076w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-300x131.jpg 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-1024x447.jpg 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-768x335.jpg 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-24x10.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-36x16.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Template-building-48x21.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermafbeelding<\/em><\/figcaption><\/figure>\n\n<p>Vervolgens kun je je sjabloon opbouwen met HTML en CSS of PHP, afhankelijk van je blokuitvoer.<\/p>\n\n<p>Als je blok is geconfigureerd voor HTML en CSS, kun je de <strong>Sjablooneditor<\/strong> van de plugin gebruiken, te vinden in de bovenste balk. Daar kun je je blok aanpassen via de tabbladen <strong>Markup (<\/strong>HTML) en <strong>CSS <\/strong>. <\/p>\n\n<p>En als je PHP wilt toevoegen, moet je een platte teksteditor gebruiken om handmatig <strong>block<\/strong><strong>.php-<\/strong> en <strong>block.css-bestanden<\/strong> te maken.<\/p>\n\n<p><strong>5. Sla uw blok op en bevestig<\/strong><\/p>\n\n<p>Zorg ervoor dat je je blok opslaat door rechtsboven op <strong>Publiceren<\/strong> te klikken.<\/p>\n\n<p><strong>6. Voeg uw blok toe aan uw website<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1404\" height=\"592\" src=\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page.jpg\" alt=\"Het blok toevoegen aan een pagina.\" class=\"wp-image-46226\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page.jpg 1404w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-300x126.jpg 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-1024x432.jpg 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-768x324.jpg 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-24x10.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-36x15.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Add-block-page-48x20.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermafbeelding<\/em><\/figcaption><\/figure>\n\n<p>Tot slot kun je het blok toevoegen aan je website. Open of maak een bericht of pagina en druk vervolgens op de <strong>+ in <\/strong>de linkerzijbalk van je dashboard om je blok te vinden en in te sluiten. <\/p>\n\n<p>Pas vervolgens de inhoud van de pagina naar wens aan met andere blokken, handige <a href=\"https:\/\/www.bluehost.com\/blog\/what-is-wordpress-shortcode\/\">WordPress<\/a><a href=\"https:\/\/www.bluehost.com\/blog\/what-is-wordpress-shortcode\/\"> <\/a><a href=\"https:\/\/www.bluehost.com\/blog\/what-is-wordpress-shortcode\/\">shortcodes<\/a> en andere toegankelijke benaderingen die <a href=\"https:\/\/www.bluehost.com\/blog\/ux-matters-how-to-create-a-dynamic-user-experience-faqs\/\">de gebruikerservaring<\/a> (UX) en <a href=\"https:\/\/www.bluehost.com\/blog\/10-wordpress-setting-changes-to-optimize-your-sites-performance\/\">websiteprestaties<\/a> optimaliseren.<\/p>\n\n<h3 class=\"wp-block-heading\"><a><\/a>Aangepaste blokken handmatig maken<\/h3>\n\n<p>Je kunt ook aangepaste Gutenberg-blokken vanaf nul coderen door dit stapsgewijze proces te volgen:<\/p>\n\n<p><strong>1. Stel uw WordPress ontwikkelomgeving in<\/strong><\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1999\" height=\"1030\" src=\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment.png\" alt=\"Je moet Node.js opnemen in je WordPress ontwikkelaarsomgeving.\" class=\"wp-image-46227\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment.png 1999w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-300x155.png 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-1024x528.png 1024w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-768x396.png 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-1536x791.png 1536w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-24x12.png 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-36x19.png 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Wordpress-developer-environment-48x25.png 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermafbeelding<\/em><\/figcaption><\/figure>\n\n<p>Installeer eerst en vooral <a href=\"https:\/\/nodejs.org\/en\/download\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Node.js<\/strong><\/a> en de <a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Node package manager<\/a> (npm). Dit zijn JavaScript-bouwgereedschappen waarmee je basisblokfuncties kunt defini\u00ebren. Je kunt <strong>Node.js<\/strong> downloaden via het online installatieprogramma en er vervolgens voor zorgen dat <strong>npm<\/strong> is geactiveerd door het commando <strong>npm-v <\/strong>in je code-editor in te voeren.  <\/p>\n\n<p>Vervolgens moet je <a href=\"https:\/\/www.docker.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Docker<\/a> installeren, een vereiste om de ontwikkelaarstool van WordPress te kunnen gebruiken. De Docker-website biedt een eenvoudige installatie met \u00e9\u00e9n klik. <\/p>\n\n<p>Daarna <a href=\"https:\/\/developer.wordpress.org\/themes\/getting-started\/setting-up-a-development-environment\/\" target=\"_blank\" rel=\"noreferrer noopener\">stel je je ontwikkelomgeving in<\/a> en <a href=\"https:\/\/www.bluehost.com\/help\/article\/wordpress-how-to-create-a-staging-site\">activeer je je staging site<\/a>. Je kunt de ontwikkelomgeving instellen via de standaardtool van WordPress. Installeer het globaal door het commando <strong>npm -g install @wordpress\/env<\/strong> in te voeren.  <\/p>\n\n<p><strong>2. Stel je basis (starter) plugin bestand in<\/strong><\/p>\n\n<p>Voordat je je aangepaste Gutenberg-blok kunt maken, moet je een plugin basisblok maken als referentie. Gelukkig zijn er een paar manieren om deze stap niet handmatig uit te voeren. <\/p>\n\n<p>Voer het commando <strong>\/wp-content\/plugins\/ <\/strong>uit om naar je plugin-map te navigeren.<\/p>\n\n<p>Een optie is om het commando <strong>npx @wordpress\/create-block<\/strong> uit te voeren. Dit geeft je eenvoudig toegang tot en bewerkingsmogelijkheden voor je PHP-bestanden en JS-bestanden.<\/p>\n\n<p>Zorg ervoor dat je de naam die je wilt gebruiken voor je startblok toevoegt aan het commando. Je kunt iets eenvoudigs gebruiken, zoals <strong>mijn-nieuwe-blok<\/strong>, of wees creatief. <\/p>\n\n<p>Je andere optie is om het hulpprogramma <a href=\"https:\/\/www.npmjs.com\/package\/create-guten-block\" target=\"_blank\" rel=\"noreferrer noopener\">create-guten-block<\/a> te installeren en het commando <strong>npx create-guten-block<\/strong> uit te voeren met de naam van je startblok.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"888\" height=\"818\" src=\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block.jpg\" alt=\"Je kunt het hulpprogramma create-guten-block gebruiken om je startplugin-bestand in te stellen.\" class=\"wp-image-46228\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block.jpg 888w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-300x276.jpg 300w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-768x707.jpg 768w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-24x22.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-36x33.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Create-guten-block-48x44.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermafbeelding<\/em><\/figcaption><\/figure>\n\n<p>Deze processen cre\u00ebren een startpunt.<\/p>\n\n<p><strong>3. Block.json configureren<\/strong><\/p>\n\n<p>Je moet een <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-metadata\/\" target=\"_blank\" rel=\"noreferrer noopener\">block.json bestand<\/a> toevoegen aan je nieuwe map en het vervolgens configureren door metadata en selecties voor verschillende instellingen in te voeren. Voorbeelden van instellingen zijn blokattributen en andere instelbare specificaties, zoals de<strong>API-versie<\/strong>(Application Planning Interface<strong>)<\/strong>, <strong>titel<\/strong> en <strong>categorie<\/strong>. <\/p>\n\n<p>Hier is een voorbeeld van hoe een deel van de block.json code eruit zou kunnen zien:<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"583\" height=\"655\" src=\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file.jpg\" alt=\"Je moet de instellingen van je block.json bestand configureren, inclusief de API-versie.\" class=\"wp-image-46229\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file.jpg 583w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file-267x300.jpg 267w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file-21x24.jpg 21w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file-32x36.jpg 32w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Blockjson-file-43x48.jpg 43w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermafbeelding<\/em><\/figcaption><\/figure>\n\n<p>Het <strong>block.json<\/strong> bestand zorgt ervoor dat je basis block plugin wordt weergegeven in de plugins directory, maakt het registreren van je block later gemakkelijker en helpt bij de prestaties van je website.<\/p>\n\n<p><strong>4. Meer specificaties configureren<\/strong><\/p>\n\n<p>Vervolgens bepaal je enqueue je specifieke gegevens met betrekking tot:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Stijlen.<\/li>\n\n\n\n<li>Afhankelijkheden en activabestanden.<\/li>\n\n\n\n<li>Kenmerken.<\/li>\n\n\n\n<li>Scripts.<\/li>\n\n\n\n<li>Labels en trefwoorden.<\/li>\n<\/ul>\n\n<p>Je kunt naar het <a href=\"https:\/\/docs.npmjs.com\/cli\/v7\/configuring-npm\/package-json\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>package.json<\/strong> bestand<\/a> navigeren om je JavaScript eigenschappen, stijlen en scripts te configureren. Via <strong>block.json<\/strong> kun je attributen defini\u00ebren met de functie <strong>setAttributes <\/strong>. Je kunt ook blokinstellingen wijzigen met labels en trefwoorden.  <\/p>\n\n<p>Je kunt andere frontend- en backendspecificaties toevoegen en verschillende functies bewerken. Je moet bijvoorbeeld een asset-bestand maken om <a href=\"https:\/\/www.sonatype.com\/launchpad\/what-are-software-dependencies\" target=\"_blank\" rel=\"noreferrer noopener\">afhankelijkheden<\/a> toe te voegen. Je kunt dit doen door de opdracht <strong>npm run build <\/strong>in te voeren voor je JavaScript XML-bestand (JSX) of de volgende PHP-code:  <\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"266\" height=\"229\" src=\"https:\/\/www.bluehost.com\/nl-nl\/blog\/wp-content\/uploads\/2018\/11\/Php-code.jpg\" alt=\"PHP-code om een asset-bestand te maken voor je afhankelijkheden.\" class=\"wp-image-46230\" srcset=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Php-code.jpg 266w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Php-code-24x21.jpg 24w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Php-code-36x31.jpg 36w, https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Php-code-48x41.jpg 48w\" sizes=\"100vw\" \/><figcaption class=\"wp-element-caption\"><em>Schermafbeelding<\/em><\/figcaption><\/figure>\n\n<p><strong>5. Registreer uw blok<\/strong><\/p>\n\n<p>Zodra je je blokplugin hebt gemaakt, gebruik je de functie <strong>register_block_type<\/strong>. Deze blok registratie techniek haalt automatisch de eerder bepaalde metadata uit het <strong>block.json<\/strong> bestand. <\/p>\n\n<p><strong>6. Sla uw blok op en bevestig dat het werkt<\/strong><\/p>\n\n<p>De laatste stap is het opslaan van alle bestanden en het testen van je nieuwe blok.<\/p>\n\n<p>U kunt de functionaliteit ervan bevestigen door uw nieuwe aangepaste Gutenberg-blok toe te voegen aan uw website. Als u het invoegt en het toont het bericht \u201cHello World\u201d, dan is dat een teken dat u het proces correct hebt voltooid. <\/p>\n\n<p>Als je hetzelfde blok in de toekomst in meerdere lay-outs of websites wilt gebruiken, probeer het dan te gebruiken in een <a href=\"https:\/\/www.bluehost.com\/blog\/what-are-gutenberg-block-patterns-in-wordpress-and-how-to-use-them\/\">Gutenberg-blokpatroon<\/a>.<\/p>\n\n<p>Ga naar de <a href=\"https:\/\/learn.wordpress.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress \u201cLeren\u201d pagina<\/a> voor meer informatie en <a href=\"https:\/\/learn.wordpress.org\/tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\">tutorials<\/a> over het configureren van je website.<\/p>\n\n<h2 class=\"wp-block-heading\"><a><\/a>Laatste gedachten: Hoe Gutenberg aangepaste blokken maken &#8211; een Bluehost gids<\/h2>\n\n<p>Het maken van aangepaste Gutenberg-blokken voor WordPress is een handige oplossing als je website-elementen nodig hebt die niet worden aangeboden door standaardblokken.<\/p>\n\n<p>Je kunt je eigen Gutenberg-blokken maken met een plugin of door handmatig te coderen. Beide processen vereisen echter enige technische expertise. <\/p>\n\n<p>Als je zelf geen blokken op maat wilt maken, probeer dan <a href=\"https:\/\/www.bluehost.com\/solutions\/website-design\">de website ontwerpdiensten van Bluehost<\/a>. Ons team van toegewijde experts staat klaar om je te helpen bij het aanpassen en cre\u00ebren van de perfecte website. <\/p>\n\n<p>Als je je website zelf wilt ontwerpen, maar wel graag deskundige begeleiding wilt bij het bewerken van je site, bieden we ook <a href=\"https:\/\/www.bluehost.com\/pro-design-live\">Pro Design met live ondersteuning<\/a>. Onze experts kunnen je helpen bij het kiezen en aanpassen van de perfecte thema&#8217;s en plugins en bij het optimaliseren van je website. <\/p>\n\n<p>Als je website klaar is om live te gaan, neem dan <a href=\"https:\/\/www.bluehost.com\/contact\">contact op met Bluehost<\/a> voor snelle, hoogwaardige en goed presterende <a href=\"https:\/\/www.bluehost.com\/wordpress\/wordpress-hosting\">WordPress<\/a><a href=\"https:\/\/www.bluehost.com\/wordpress\/wordpress-hosting\"> hostingdiensten<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>De Gutenberg block editor, de inhoudseditor van WordPress, heeft meer dan 81 miljoen actieve installaties. Vanwege het marktdominante karakter van WordPress en de intu\u00eftieve aard van het ontwerp van deze editor, is het geen verrassing dat dit systeem zo populair is. Gutenberg is een toegankelijke drag-and-drop page builder en content editor. Het biedt veel functionaliteiten, [&hellip;]<\/p>\n","protected":false},"author":74,"featured_media":213558,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_title":"Hoe Gutenberg Custom Blocks maken | Een Bluehost gids","_yoast_wpseo_metadesc":"Ge\u00efnteresseerd in het maken van aangepaste Gutenberg-blokken voor je WordPress website? Ontdek verschillende manieren om aangepaste blokken te maken en te krijgen in deze gids.","inline_featured_image":false,"footnotes":""},"categories":[2356,3177],"tags":[3558],"ppma_author":[599],"class_list":["post-213556","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-inloggen","category-ontwikkeling","tag-gidsen"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.1 (Yoast SEO v27.1.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Hoe Gutenberg Custom Blocks maken | Een Bluehost gids<\/title>\n<meta name=\"description\" content=\"Ge\u00efnteresseerd in het maken van aangepaste Gutenberg-blokken voor je WordPress website? Ontdek verschillende manieren om aangepaste blokken te maken en te krijgen in deze gids.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.bluehost.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/213556\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Aangepaste blokken van Gutenberg gebruiken om WordPress-inhoud te maken: Een gebruikersvriendelijke handleiding\" \/>\n<meta property=\"og:description\" content=\"Ge\u00efnteresseerd in het maken van aangepaste Gutenberg-blokken voor je WordPress website? Ontdek verschillende manieren om aangepaste blokken te maken en te krijgen in deze gids.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/\" \/>\n<meta property=\"og:site_name\" content=\"Bluehost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bluehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-01T10:40:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-02T08:57:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Minal Agarwal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/minalagarwal\" \/>\n<meta name=\"twitter:site\" content=\"@bluehost\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Minal Agarwal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/\"},\"author\":{\"name\":\"Minal Agarwal\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/#\/schema\/person\/e9ccb012781e05c929d20c7b89f8bbe3\"},\"headline\":\"Aangepaste blokken van Gutenberg gebruiken om WordPress-inhoud te maken: Een gebruikersvriendelijke handleiding\",\"datePublished\":\"2023-09-01T10:40:00+00:00\",\"dateModified\":\"2025-06-02T08:57:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/\"},\"wordCount\":2000,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\",\"keywords\":[\"Gidsen\"],\"articleSection\":[\"Inloggen\",\"Ontwikkeling\"],\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/\",\"url\":\"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/\",\"name\":\"Hoe Gutenberg Custom Blocks maken | Een Bluehost gids\",\"isPartOf\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\",\"datePublished\":\"2023-09-01T10:40:00+00:00\",\"dateModified\":\"2025-06-02T08:57:21+00:00\",\"description\":\"Ge\u00efnteresseerd in het maken van aangepaste Gutenberg-blokken voor je WordPress website? Ontdek verschillende manieren om aangepaste blokken te maken en te krijgen in deze gids.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/#primaryimage\",\"url\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\",\"contentUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/www.bluehost.com\/nl-nl\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Websites\",\"item\":\"https:\/\/www.bluehost.com\/blog\/nl\/category\/websites\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Aangepaste blokken van Gutenberg gebruiken om WordPress-inhoud te maken: Een gebruikersvriendelijke handleiding\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/#website\",\"url\":\"https:\/\/www.bluehost.com\/blog\/nl\/\",\"name\":\"Bluehost\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bluehost.com\/blog\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/#organization\",\"name\":\"Bluehost\",\"url\":\"https:\/\/www.bluehost.com\/blog\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg\",\"contentUrl\":\"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg\",\"width\":136,\"height\":24,\"caption\":\"Bluehost\"},\"image\":{\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/bluehost\/\",\"https:\/\/x.com\/bluehost\",\"https:\/\/www.linkedin.com\/company\/bluehost-com\/\",\"https:\/\/www.youtube.com\/user\/bluehost\",\"https:\/\/en.wikipedia.org\/wiki\/Bluehost\"],\"description\":\"Bluehost is a leading web hosting provider empowering millions of websites worldwide. \\u2028Discover how Bluehost's expertise, reliability, and innovation can help you achieve your online goals.\",\"telephone\":\"+1-888-401-4678\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/#\/schema\/person\/e9ccb012781e05c929d20c7b89f8bbe3\",\"name\":\"Minal Agarwal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/www.bluehost.com\/blog\/nl\/#\/schema\/person\/image\/c8d40b28171fda3585c635bc9672f478\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g\",\"caption\":\"Minal Agarwal\"},\"description\":\"Minal is the Director of Brand Marketing at Bluehost. With over 15 years of business experience in the technology industry, she strives to create solutions and content that fulfill a customer's needs. She is a dog mom and a stickler for calendaring.\",\"sameAs\":[\"https:\/\/x.com\/https:\/\/twitter.com\/minalagarwal\"],\"knowsAbout\":[\"WordPress\"],\"url\":\"https:\/\/www.bluehost.com\/blog\/nl\/author\/minal-agarwal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Hoe Gutenberg Custom Blocks maken | Een Bluehost gids","description":"Ge\u00efnteresseerd in het maken van aangepaste Gutenberg-blokken voor je WordPress website? Ontdek verschillende manieren om aangepaste blokken te maken en te krijgen in deze gids.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.bluehost.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/213556\/","og_locale":"nl_NL","og_type":"article","og_title":"Aangepaste blokken van Gutenberg gebruiken om WordPress-inhoud te maken: Een gebruikersvriendelijke handleiding","og_description":"Ge\u00efnteresseerd in het maken van aangepaste Gutenberg-blokken voor je WordPress website? Ontdek verschillende manieren om aangepaste blokken te maken en te krijgen in deze gids.","og_url":"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/","og_site_name":"Bluehost Blog","article_publisher":"https:\/\/www.facebook.com\/bluehost\/","article_published_time":"2023-09-01T10:40:00+00:00","article_modified_time":"2025-06-02T08:57:21+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","type":"image\/png"}],"author":"Minal Agarwal","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/minalagarwal","twitter_site":"@bluehost","twitter_misc":{"Geschreven door":"Minal Agarwal","Geschatte leestijd":"10 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/#article","isPartOf":{"@id":"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/"},"author":{"name":"Minal Agarwal","@id":"https:\/\/www.bluehost.com\/blog\/nl\/#\/schema\/person\/e9ccb012781e05c929d20c7b89f8bbe3"},"headline":"Aangepaste blokken van Gutenberg gebruiken om WordPress-inhoud te maken: Een gebruikersvriendelijke handleiding","datePublished":"2023-09-01T10:40:00+00:00","dateModified":"2025-06-02T08:57:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/"},"wordCount":2000,"commentCount":0,"publisher":{"@id":"https:\/\/www.bluehost.com\/blog\/nl\/#organization"},"image":{"@id":"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","keywords":["Gidsen"],"articleSection":["Inloggen","Ontwikkeling"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/","url":"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/","name":"Hoe Gutenberg Custom Blocks maken | Een Bluehost gids","isPartOf":{"@id":"https:\/\/www.bluehost.com\/blog\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/#primaryimage"},"image":{"@id":"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","datePublished":"2023-09-01T10:40:00+00:00","dateModified":"2025-06-02T08:57:21+00:00","description":"Ge\u00efnteresseerd in het maken van aangepaste Gutenberg-blokken voor je WordPress website? Ontdek verschillende manieren om aangepaste blokken te maken en te krijgen in deze gids.","breadcrumb":{"@id":"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/#primaryimage","url":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","contentUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2018\/11\/Gutenberg-Custom-blocks.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/www.bluehost.com\/blog\/nl\/aangepaste-blokken-van-gutenberg-gebruiken-om-wordpress-inhoud-te-maken-een-gebruikersvriendelijke-handleiding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.bluehost.com\/nl-nl\/blog\/"},{"@type":"ListItem","position":2,"name":"Websites","item":"https:\/\/www.bluehost.com\/blog\/nl\/category\/websites\/"},{"@type":"ListItem","position":3,"name":"Aangepaste blokken van Gutenberg gebruiken om WordPress-inhoud te maken: Een gebruikersvriendelijke handleiding"}]},{"@type":"WebSite","@id":"https:\/\/www.bluehost.com\/blog\/nl\/#website","url":"https:\/\/www.bluehost.com\/blog\/nl\/","name":"Bluehost","description":"","publisher":{"@id":"https:\/\/www.bluehost.com\/blog\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bluehost.com\/blog\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/www.bluehost.com\/blog\/nl\/#organization","name":"Bluehost","url":"https:\/\/www.bluehost.com\/blog\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.bluehost.com\/blog\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg","contentUrl":"https:\/\/www.bluehost.com\/blog\/wp-content\/uploads\/2023\/08\/bluehost-logo.svg","width":136,"height":24,"caption":"Bluehost"},"image":{"@id":"https:\/\/www.bluehost.com\/blog\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/bluehost\/","https:\/\/x.com\/bluehost","https:\/\/www.linkedin.com\/company\/bluehost-com\/","https:\/\/www.youtube.com\/user\/bluehost","https:\/\/en.wikipedia.org\/wiki\/Bluehost"],"description":"Bluehost is a leading web hosting provider empowering millions of websites worldwide. \u2028Discover how Bluehost's expertise, reliability, and innovation can help you achieve your online goals.","telephone":"+1-888-401-4678"},{"@type":"Person","@id":"https:\/\/www.bluehost.com\/blog\/nl\/#\/schema\/person\/e9ccb012781e05c929d20c7b89f8bbe3","name":"Minal Agarwal","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.bluehost.com\/blog\/nl\/#\/schema\/person\/image\/c8d40b28171fda3585c635bc9672f478","url":"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g","caption":"Minal Agarwal"},"description":"Minal is the Director of Brand Marketing at Bluehost. With over 15 years of business experience in the technology industry, she strives to create solutions and content that fulfill a customer's needs. She is a dog mom and a stickler for calendaring.","sameAs":["https:\/\/x.com\/https:\/\/twitter.com\/minalagarwal"],"knowsAbout":["WordPress"],"url":"https:\/\/www.bluehost.com\/blog\/nl\/author\/minal-agarwal\/"}]}},"authors":[{"term_id":599,"user_id":74,"is_guest":0,"slug":"minal-agarwal","display_name":"Minal Agarwal","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/042b2a6396c1ee0366c5c9560120123c4f0235ad09355e28ecc11f17cf341b97?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":"","9":"","10":"","11":"","12":"","13":"","14":"","15":""}],"_links":{"self":[{"href":"https:\/\/www.bluehost.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/213556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bluehost.com\/blog\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bluehost.com\/blog\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/nl\/wp-json\/wp\/v2\/users\/74"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/nl\/wp-json\/wp\/v2\/comments?post=213556"}],"version-history":[{"count":0,"href":"https:\/\/www.bluehost.com\/blog\/nl\/wp-json\/wp\/v2\/posts\/213556\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/nl\/wp-json\/wp\/v2\/media\/213558"}],"wp:attachment":[{"href":"https:\/\/www.bluehost.com\/blog\/nl\/wp-json\/wp\/v2\/media?parent=213556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/nl\/wp-json\/wp\/v2\/categories?post=213556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/nl\/wp-json\/wp\/v2\/tags?post=213556"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bluehost.com\/blog\/nl\/wp-json\/wp\/v2\/ppma_author?post=213556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}