WordPress Ontcijferen: Werken met Blokpatronen

Gepubliceerd: door Jason Cosper
WordPress Ontcijferen: Werken met Blokpatronen thumbnail

Stel je voor dat het bouwen van een website is als Tetris spelen — voorgevormde stukken stapelen in welke volgorde je maar wilt.

Het zou best bevredigend zijn, toch?

Nou, dat krijg je met WordPress blokpatronen. Met deze vooraf gemaakte ontwerpen kun je met een klik hele secties toevoegen aan elke pagina of bericht. En in tegenstelling tot bij Tetris, verdwijnen ze niet als je ze perfect stapelt. 

Dit klinkt geweldig op papier. Maar hoe gebruik je precies blokpatronen? 

Daar gaat deze gids helemaal over.

Blijf de komende minuten bij ons en je leert wat blokpatronen zijn en hoe je ze op je eigen WordPress-website kunt gebruiken.

Laten we beginnen!

Wat Is Een WordPress Blokpatroon?

Een blokpatroon in WordPress is een kant-en-klare lay-out gemaakt van herbruikbare blokken. 

Deze lay-outs kunnen bijna overal op je WordPress-site worden geplaatst, inclusief pagina’s en berichten.

voorbeeld van een WordPress blokpatroon met h1 linksboven, beschrijving rechts en een foto van bergen eronder

Zodra je ze hebt ingevoegd, kun je de inhoud in de blokpatronen bewerken en aanpassen. De afzonderlijke componenten werken net als gewone Gutenberg blocks, dus je kunt aanpassingen maken aan kleuren en lettertypen, componenten herschikken, afbeeldingen verwisselen en inhoud binnen elk blok wijzigen. 

Gutenberg

Gutenberg is de naam voor het Block Editor project in WordPress. Veel WordPress-ontwikkelaars en liefhebbers gebruiken de termen Gutenberg Editor en Block Editor door elkaar.

Lees Meer

Je kunt blokpatronen ook talloze keren hergebruiken op je site, zelfs binnen een enkele pagina of bericht. 

Dit betekent dat je niet handmatig lay-outs hoeft te maken (en opnieuw te maken) één blok tegelijk wanneer je de Block Editor gebruikt.

Kennismaking Met WordPress Blokken

Om volledig te begrijpen hoe blokpatronen werken, moet je een beetje weten over blokken.

Blokken zijn sinds eind 2018 een essentieel onderdeel van WordPress, toen versie 5.0 de nieuwe WordPress blokeditor, Gutenberg, introduceerde.

Dit flexibele onderdeel van WordPress stelt je in staat om berichten en pagina’s te construeren met behulp van individuele elementen, bekend als blokken. Voorbeelden hiervan zijn afbeeldingen, alinea’s, lijsten, koppen, embeds, scheiders, tabellen en kolommen.

Embed

Embedden betekent het direct invoegen van externe inhoud in een webpagina in plaats van ernaar te linken. Door te embedden kunnen bezoekers de inhoud bekijken zonder de website te verlaten.

Lees Meer

Elk blok wordt geleverd met een reeks aanpassingsopties, zoals uitlijning, kleur en lettergrootte. Je kunt blokken verplaatsen via een websitebouwer met slepen-en-neerzetten.

Om terug te gaan naar de Tetris-metafoor, stel je voor dat je een stuk in het spel kunt verplaatsen nadat het volledig was gevallen — alleen omdat je niet leuk vond waar je het in eerste instantie had geplaatst. Dat is het soort flexibiliteit dat Gutenberg je biedt.

Blokpatronen: Wat Zijn De Voordelen?

Wanneer je blokpatronen bouwt, plak je eenvoudigweg meerdere blokken aan elkaar om een kleine sjabloon te creëren. Dit betekent dat je jouw website vrij snel kunt samenstellen, aangezien je niet elke pagina vanaf nul opbouwt.

En dat is niet het enige voordeel. Hier zijn enkele andere voordelen:

  • Je kunt hele secties maken met behulp van blokken: Het maken van je eigen aangepaste blokpatronen betekent dat iedereen die aan je site werkt, inhoud kan beheren zonder zich zorgen te maken over de lay-out en het ontwerp.
  • Je kunt kant-en-klare blokpatronen van professionele ontwerpers gebruiken: Je kunt deze sjablonen aanpassen aan je eigen stijl, wat je veel mogelijkheden biedt om mee te spelen bij het maken van een bericht of pagina.
  • Je kunt patronen die je vaak gebruikt opslaan: Na het creëren of selecteren van blokpatronen, kun je ze opslaan en een bibliotheek van sjablonen opbouwen die bij je merk past.
  • Je kunt sneller nieuwe inhoud bouwen. Het is veel sneller om een opgeslagen patroon in te voegen dan een pagina vanaf nul te ontwerpen.
  • Ze zijn flexibel en aanpasbaar: Je kunt vooraf gebouwde blokpatronen aanpassen aan je specifieke ontwerp- en functionaliteitsbehoeften. Vind een blokpatroon in de WordPress Pattern Directory dat je aanspreekt en verander het zoals je creativiteit je leidt.
  • Ze zijn onafhankelijk van thema’s: Op maat gemaakte blokpatronen zijn niet gebonden aan een specifiek thema. Als je later het thema van je WordPress-site wijzigt, blijven je patronen hetzelfde.
  • Ze bieden responsieve pagina- en berichtindelingen: Het ontwerpen van je WordPress-site met behulp van blokken en blokpatronen zorgt ervoor dat de inhoud van je site goed geoptimaliseerd is voor verschillende apparaten, zoals smartphones of tablets.

Ontvang inhoud rechtstreeks in uw inbox

Meld u nu aan om alle laatste updates rechtstreeks in uw inbox te ontvangen.

Hoe Blokpatronen In De Loop Der Tijd Zijn Geëvolueerd

Blokpatronen zijn al geïntroduceerd in augustus 2020 met de release van WordPress 5.5 “Eckstine.” 

Sinds die tijd hebben we veel evolutie gezien:

  • WordPress 5.9 voegde de optie toe om blokpatronen te kopiëren en plakken in de Volledige Site Editor.
  • WordPress 6.0 maakte de blokinvoeger gemakkelijker te navigeren en maakte het voor ontwikkelaars gemakkelijker om patronen aan hun thema’s toe te voegen.
  • WordPress 6.3 introduceerde gesynchroniseerde patronen, die er identiek uitzien op je hele site. Je kunt een gesynchroniseerd patroon op één pagina bewerken, en alle andere kopieën worden bijgewerkt om er hetzelfde uit te zien.
  • WordPress 6.5 bood een mooie nieuwe selectie van blokpatronen aan, verdeeld in categorieën.
  • WordPress 6.6 introduceerde de optie om het systeem van gesynchroniseerde patronen te overschrijven, zodat elke kopie van een patroon unieke inhoud of styling kan hebben.

Hoe Je Eigen Blokpatronen Creëert

Vandaag de dag zijn blokpatronen behoorlijk krachtig en zeer eenvoudig te gebruiken.

Als je klaar bent om te beginnen met experimenteren met deze WordPress-functie, volg dan deze snelle stap-voor-stap handleiding:

Stap 1: Maak Een Conceptbericht

Om een blokpatroon te creëren, begin met het maken van een nieuw conceptbericht of -pagina in WordPress. 

Een nieuw concept heeft geen bestaande inhoudsrommel. Het is een leeg canvas voor je blok-gebaseerde creativiteit!

Begin met het toevoegen van de blokken die je wilt opnemen in je patroon: koppen en paragrafen, kolommen, afbeeldingen en galerijen, video- en audiomedia, scheidingstekens, en meer.

screenshot van de gebruikersweergave op wordpress met behulp van de blokpatronen in een bericht

Zodra je je blokken hebt toegevoegd, zorg ervoor dat je ze stijlt. Gebruik de ingebouwde kleurenpaletten en lettertypekiezers.

Stap 2: Selecteer en Kopieer Blokken

Zodra je blokken er precies goed uitzien, moet je het patroon maken. Maak je geen zorgen, het is niet technisch!

Begin door handmatig alle blokken te selecteren die je in je blokpatroon wilt hebben. Klik op het eerste blok, houd Alt (Shift op Mac) ingedrukt en klik dan op het laatste blok dat je in het patroon wilt laten verschijnen.

Om af te sluiten, klik je op de drie verticale puntjes bovenaan je editor en selecteer je Patroon creëren uit het dropdownmenu.

dezelfde screenshot als eerder waarin getoond wordt waar de patroonopties binnen het titelblok te openen

Professionele tip: Als je niet gemakkelijk alle blokken kunt zien die je wilt selecteren, open dan het tabblad Documentoverzicht om de volledige lijst met elementen te zien. Het is de knop met drie verspringende horizontale lijnen in de rechterbovenhoek van de editor. 

Stap 3: Sla Je Blokpatroon Op

Nadat je je blokpatroon hebt gebouwd, hoef je het alleen nog maar op te slaan in de WordPress-patroonbibliotheek.

Je zou een pop-upvenster moeten zien dat je vraagt om je blokpatroon een naam te geven en een categorie te kiezen. Patrooncategorieën helpen je om sjablonen te groeperen, zoals alle patronen voor een bepaalde pagina.

screenshot van het vak nieuwe patroon toevoegen waarin wordt getoond waar de naam en categorieën ingevoerd moeten worden met een toevoegknop rechtsonder in het vak

Tenslotte heb je een grote keuze te maken: te synchroniseren of niet te synchroniseren (zoals Shakespeare waarschijnlijk zou zeggen).

Onthoud dat gesynchroniseerde blokpatronen allemaal gelinkt zijn. Als je er een verandert, veranderen alle andere kopieën ook. In tegenstelling, ongesynchroniseerde blokpatronen zijn onafhankelijk. 

Zodra je je beslissing hebt genomen, klik op Create… en je bent klaar!

Hoe Blokpatronen Te Creëren In De Site Editor

De bovenstaande methode is waarschijnlijk de gemakkelijkste manier om blokpatronen te creëren. Maar je kunt ze ook bouwen en opslaan via de WordPress Site Editor als je een op blokken gebaseerd thema hebt.

Om dit te doen, ga naar Weergave > Editor in het WordPress-beheerderspaneel.

screenshot van de editor-knop onder thema's onder uiterlijk in de navigatiebalk aan de linkerkant

Kijk nu naar links. Zie je die zijbalk? Klik op Patterns, en je ziet alle patronen die je tot nu toe verzameld hebt, netjes georganiseerd in categorieën.

screenshot van de patronennavigatie die de categorisatie van sjablonen zoals voettekst, koptekst, koptekst afrekenen en mini-winkelwagen toont

In de rechterbovenhoek zou je de knop Nieuw Patroon Toevoegen moeten zien. Klik daarop.

Dit opent het pop-upvenster voor naam en categorie. Vul de details in en klik op Create.

WordPress opent dan een lege editor.

screenshot van de lege editor met een kopvak en een afbeelding direct daaronder met de tekst DreamHost

Kies en configureer gewoon de blokken die je wilt in je blokpatroon en druk op Opslaan in de rechterbovenhoek om te voltooien.

Bladeren In De Patroondirectory

Als het ontwerpen van je eigen patronen als hard werk klinkt, hebben we goed nieuws te delen.

Net als bij thema’s heeft WordPress een directory waar mensen blokpatronen delen.

Screenshot van de Patronenpagina

Op het moment van schrijven zijn er ongeveer 2.000 van deze patronen om uit te kiezen, en ze zijn allemaal volledig gratis.

Om deze ontwerpen te pakken, ga naar de Patronendirectory (beschikbaar op zowel WordPress.org als .com) en zoek iets dat je leuk vindt. Tik op een ontwerp en klik dan op Kopiëren. Hiermee wordt de volledige broncode van het blokpatroon naar je klembord overgebracht.

screenshot geklikt een stap verder in een van de patroonopties die de knop voor het kopiëren van het patroon toont

Keer vervolgens terug naar de post of pagina waar je aan werkt en plak de code in. Et voilà! Je hebt een gloednieuw patroon.

Professionele tip: Afbeeldingen die in blokpatronen door andere ontwerpers zijn gebruikt, worden doorgaans van externe bronnen gehaald. Het is altijd mogelijk dat deze links breken, dus het is meestal een beter idee om je eigen afbeeldingen te gebruiken (of die je hebt gelicentieerd).

Voeg Blokpatronen Toe Uit Je Bibliotheek

Als je enkele patronen hebt gemaakt en opgeslagen, vraag je je misschien af hoe je ze kunt gebruiken.

Om te beginnen, open een conceptbericht of pagina, en tik op het + in de linkerbovenhoek om de blokinvoeger te openen.

Als eerste krijg je enkele blokken aangeboden. Klik op het tabblad Patronen bovenaan dit paneel.

screenshot van een bericht waarin de blokpatronen worden getoond en geschakeld naar patronen vanuit blokken bovenaan het menu

Hier kun je al je opgeslagen blokpatronen bekijken of door ze bladeren per categorie. Zodra je de juiste hebt gevonden, klik je op de voorbeeldafbeelding om deze aan je concept toe te voegen.

Onthoud dat blokpatronen gewoon sjablonen zijn, dus je kunt de inhoud aanpassen zodra je een opgeslagen patroon hebt ingevoegd.

Pro tip: Bepaalde Plugins (zoals paginabouwers) voegen extra voorgemaakte patronen toe aan je assortiment. Spectra en JetBrains zijn twee die een hele vloot aan patronen toevoegen als ze geactiveerd worden.

Hoe Beheer Je Jouw Blokpatronen

Als je een blokthema gebruikt, kun je de patronen die je hebt gemaakt beheren via de Site Editor. Het relevante menu vind je onder Weergave > Editor > Patronen.

In het hoofdgedeelte aan de rechterkant, tik op de drie puntjes naast elk opgeslagen patroon om het te bewerken of te verwijderen.

screenshot van de categorische organisatie van patronen die opnieuw de drie stippen onder een sjabloon toont om te klikken voor de bewerk- en dupliceeropties

Als je een klassiek WordPress-thema gebruikt dat geen volledige ondersteuning biedt voor volledige sitebewerking, navigeer dan naar Weergave > Patronen om een klassieke lijst van je opgeslagen patronen te zien. Hier kun je ze bewerken, exporteren of verwijderen.

Heb Je Hulp Nodig?

Zoals je kunt zien, zijn blokpatronen niet super technisch. Ze zijn eigenlijk vrij eenvoudig te gebruiken. 

Dat gezegd hebbende, komt er nog steeds wat ontwerpwerk bij kijken. Als je daar niet zeker van bent, kunnen we je helpen.

Ons deskundig ontwerpteam kan de site van je dromen vanaf nul opbouwen, dus je hoeft geen vinger uit te steken.

En met onze beheerde WordPress-hosting service, is het opzetten en onderhouden van een aantrekkelijke website makkelijker dan ooit. Het is super snel en volledig betrouwbaar.

Meld je vandaag nog aan om het zelf te proberen!

website management by DreamHost
WordPress Hosting

Onverslaanbare WordPress Hosting

Betrouwbare, razendsnelle hostingsoplossingen specifiek geoptimaliseerd voor WordPress.

Zie Meer

Deze pagina bevat affiliatelinks. Dit betekent dat we een commissie kunnen verdienen als je via onze link diensten aanschaft, zonder extra kosten voor jou.