WordPress Blog Pattern Header

WordPress Block Pattern: Wat is het en hoe helpt het je met je website?

Block Pattern in WordPress zorgen voor snellere processen en vereenvoudigen het dagelijkse werk aan de website. Dit zijn voorgedefinieerde blokindelingen die met weinig moeite op verschillende plaatsen kunnen worden ingevoegd en aangepast. In dit artikel laten we je daarom kennismaken met de WordPress Pattern directory en de Block Pattern Creator.

De meeste websites bestaan uit terugkerende structuren. Deze zogenaamde patronen zijn voorgedefinieerde blokken in WordPress die op verschillende plaatsen op de website een plaats vinden. Indien nodig kunnen ze ook individueel worden aangepast, geheel ongecompliceerd en snel.

Wat is het verschil tussen terugkerende blokken en patronen?

Terugkerende blokken, zoals patronen, kunnen naar behoefte worden gebruikt op verschillende plaatsen op de website. Op één punt verschillen ze echter sterk van elkaar: zodra een terugkerend blok wordt veranderd, veranderen ook alle links. Het blok kan dus op een centraal punt worden aangepast en de verandering wordt dan doorgevoerd op alle webpagina's waarop het blok werd gebruikt.

Dit is precies niet het geval met de patronen: Na het invoegen zijn de patronen niet meer gekoppeld aan het eigenlijke sjabloon. Dit kan op elk moment worden aangepast zonder problemen en zonder de reeds geplaatste blokken te veranderen. 

Dit verschil is een grote opluchting voor alle websitebeheerders die tot nu toe met terugkerende blokken werkten. Door het ontbreken van links zijn aanpassingen minder ingewikkeld en maken ze het dagelijks werk veel gemakkelijker.

"*" geeft verplichte velden aan

Ik wil me abonneren op de nieuwsbrief om op de hoogte te blijven van nieuwe blogartikelen, ebooks, features en nieuws over WordPress. Ik kan mijn toestemming te allen tijde intrekken. Bekijk ons Privacybeleid.
Dit veld dient ter validatie en mag niet worden gewijzigd.

Sinds wanneer bestaat de WordPress pattern directory?

Sinds de WordPress update 5.5 kunnen websitebeheerders de patronen vinden naast de terugkerende blokken. De patronen vormen een eigen categorie, waaronder gebruikers talloze sjablonen kunnen zien, inclusief een preview. 

Samen met de WordPress update 5.8 is ook de WordPress pattern directory online gegaan. Deze is net zo gestructureerd als de WordPress plugin- of thememap. Gebruikers krijgen een overzicht van talloze bloksjablonen voor de Gutenberg editor

Wat is de Block Pattern directory van WordPress?

Websitebeheerders kunnen direct op de WordPress website een grote selectie sjablonen vinden. De patronen zijn gesorteerd op verschillende functies, waaronder buttons, categorieën of footer. Het is mogelijk om de nieuwste of de meest populaire templates weer te geven. Met de zoekfunctie kun je ook zoeken op een specifiek trefwoord en dan alle patronen vinden die precies bij dit onderwerp passen.

Zodra websitebeheerders een geschikt patroon voor hun website hebben gevonden, kunnen ze de lay-out nader bekijken door op de voorbeeldafbeelding te klikken. Dit komt omdat de blok-editor een individueel ontwerp volledig zonder code mogelijk maakt. Hier hebben belangstellenden de mogelijkheid om het patroon direct te kopiëren door op de button "Patroon kopiëren" te klikken. Onmiddellijk daarna kan de lay-out worden gekopieerd in elk WordPress artikel of op elke WordPress pagina. 

Om een beter gevoel te krijgen of het patroon echt past op de website, kan de maat individueel verplaatst worden. De standaardformaten zijn 320px, 480px, 960px en 1200px. Het sjabloon kan echter ook met de muisaanwijzer naar elk ander formaat worden verplaatst. Dit is vooral belangrijk om te zien of het patroon ook geschikt is voor mobiele weergave. 

Onderaan staan verdere patronen van de ontwerpers, indien beschikbaar. Als de websitebeheerders er een direct mooi vinden, kunnen ze die kopiëren met de knop "Kopiëren", zonder zelfs het patroon te openen. 

Drie handige patronen die het dagelijks werk vergemakkelijken

Voor een beter inzicht in de verschillende sjablonen in de Block Pattern bibliotheek presenteren we hieronder drie praktische patronen.

De prijstabel

Een daarvan is het patroon van de "prijstabel". Dit sjabloon is bijzonder nuttig voor alle websitebeheerders die producten of diensten verkopen en de verschillende tarieven willen weergeven met een prijstabel. Het template bevat in totaal drie kolommen, die in kleur van elkaar verschillen.

WordPress Block Pattern for Pricing Tables
De prijstabel

Over mij patroon

Of het patroon "About Me Cards". Met dit sjabloon hebben websitebeheerders de mogelijkheid om de "Over mij" pagina grafisch aantrekkelijker te maken. Veel mensen gebruiken hier pure tekst om zich voor te stellen. Met behulp van het patroon kunnen echter drie subpagina's worden gekoppeld, zoals het eigen verhaal, een contactmogelijkheid en de sociale mediakanalen. 

WordPress Block Pattern for About Me Cards
"Over mij" patroon voor grafisch design

Het citatenpatroon

Met het "Quote" patroon heb je ook de mogelijkheid om citaten duidelijk en gemakkelijk op te nemen op je webpagina of in je berichten. Je hebt de mogelijkheid om een afbeelding boven het citaat zelf op te nemen en de naam van de citeerder wordt onder het citaat ingevoegd. Je hoeft je belangrijkste citaten niet langer uitsluitend met aanhalingstekens te markeren, maar kunt ze grafisch weergeven.

WordPress Block Pattern for Quotes
Quotes Pattern om ze op andere manieren als citaten te markeren

Waarom is het zinvol om de WordPress Block Pattern te gebruiken?

Door geschikte blokpatronen te gebruiken die passen bij het betreffende onderwerp en de pagina, hebben websitebeheerders de mogelijkheid om hun inhoud visueel te presenteren. Dit maakt het voor bezoekers gemakkelijker om de inhoud direct te begrijpen. Vooral voor onervaren mensen zijn de sjablonen een gemakkelijke en snelle manier om inhoud te visualiseren. 

Veel WordPress themes zijn al voorzien van bijpassende patronen of je hebt de mogelijkheid om je eigen patronen te maken (daarover straks meer in het artikel). Niettemin biedt de Block Pattern directory een grote selectie sjablonen die je ondersteunen bij je dagelijkse werk. Als een geschikt patroon al in de directory beschikbaar is, hoeft het niet opnieuw geprogrammeerd te worden, maar kan het met een paar klikken direct gebruikt worden.

Omdat de patronen gemakkelijk kunnen worden aangepast, kunnen websitebeheerders ze ook naar behoefte aanpassen. Gebruikers hebben dus de mogelijkheid om alle patronen in de directory aan te passen tot ze passen bij de betreffende website of het merk.

Ontwerp je eigen blokpatroon met de Block Pattern Creator: Zo eenvoudig is het

De selectie van blokpatronen in de WordPress bibliotheek is al erg groot. En als een sjabloon in principe past, maar je moet toch wijzigingen aanbrengen, dan kan dat zonder problemen. Als websitebeheerders echter geen geschikt patroon voor een bepaald doel kunnen vinden, of in principe sjablonen willen maken, dan is dat mogelijk. 

Tot nu toe gebeurde het maken van het patroon in de blok-editor, om vervolgens de gemaakte code te kopiëren en op de gewenste plaats in de code van het thema te plakken. Sinds maart 2022 is dit proces veel eenvoudiger geworden: WordPress heeft de Block Pattern Creator uitgebracht. 

Dit is een tool om gemakkelijk je eigen Block Patterns te maken en ze direct in de blokpatroondirectory te delen met andere gebruikers. En, in tegenstelling tot de oorspronkelijke procedure, geheel zonder code. 

Het voordeel is dat vooral onervaren gebruikers die niet bekend zijn met code ook hun eigen patronen kunnen maken en die dan gemakkelijk kunnen kopiëren voor hun eigen website.

WordPress heeft in het Block Pattern Creator enkele richtlijnen opgesteld voor het maken van je eigen patronen. Om eigen patronen in te zenden moeten de makers het auteursrecht op de gemaakte inhoud bezitten. Bovendien wordt illegale inhoud onmiddellijk verwijderd. Alle patronen moeten in het Engels gemaakt en ingediend worden en moeten een passende beschrijvende naam krijgen. Als makers bijvoorbeeld de namen "Test" of "My Pattern" gebruiken, wordt de registratie van het patroon onmiddellijk geweigerd. 

WordPress geeft ontwerpers enkele tips voor het maken van goede patterns. Goede patronen combineren bijvoorbeeld verschillende blokken met elkaar. Dit komt omdat de sjablonen normaal gesproken ingewikkeld zijn om vanaf nul te maken. Een goed patroon benadrukt ook de mogelijkheden van de blokken die het bevat en biedt een optimaal uitgangspunt voor het aanpassen van de inhoud. Een goed patroon heeft ook een duidelijk omschreven doel en beperkt placeholder-tekst tot een minimum.

Tegelijkertijd mogen patronen nooit een hele webpagina of een heel blogartikel in beslag nemen. Zeer eenvoudige patronen, zoals een eenvoudige paragraaf met kleuren, zijn meestal geen tijdsbesparing voor gebruikers. Bovendien moet het patroon zich niet beperken tot één onderwerp, maar ook toepasbaar zijn op verschillende onderwerpen en pagina's.

Conclusie: De WordPress Block Pattern Directory bespaart tijd

De Block Pattern Directory kan helpen bij het dagelijkse werk. Vooral als websitebeheerders op zoek zijn naar een specifieke lay-out, maar niet de tijd hebben om die zelf te maken. In de bibliotheek kunnen gebruikers alle patronen zien, gesorteerd op doel, en ze met één klik kopiëren en dan plakken op de gewenste plaats op de webpagina of in het artikel.

Als je je eigen blokpatronen wilt maken en die wilt delen met andere gebruikers, kun je dat gemakkelijk doen met de Block Pattern Creator. Het bijzondere eraan is dat het op geen enkel punt nodig is om in de code te werken. Gebruikers registreren zich eenvoudigweg in de Block Pattern Creator en kunnen hun eigen templates maken. Deze zijn dan permanent beschikbaar voor eigen gebruik, mits ze voldoen aan de richtlijnen van WordPress.

Jouw vragen over WordPress Block Pattern

Welke vragen heb je over het WordPress Block Pattern en de genoemde voorbeelden? Gebruik gerust de commentaarfunctie. Wil je op de hoogte blijven van nieuwe artikelen over WordPress & updates? Volg ons dan op Twitter, Facebook, LinkedIn of via onze nieuwsbrief.

Vond je het artikel leuk?

Met jouw beoordeling help je ons om onze inhoud nog verder te verbeteren.

Laat een reactie achter

Je e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *.