Creëer je eigen templates met patronen

Aan de slag met patronen

In WordPress kun je werken met Gutenberg-patronen. Dit bespaart veel tijd, omdat je patronen eenvoudig kunt aanpassen, hergebruiken en dupliceren. Bovendien zorgt het voor meer consistentie en herkenbaarheid op je website.

Wat zijn patronen?

Een patroon is een combinatie van één of meerdere blocks die samen een stuk layout vormen. Deze layout kun je zelf opslaan als een patroon en vervolgens toepassen op een nieuwe of bestaande pagina.

Het woord ’template’ is je misschien ook bekend. Een patroon kun je zo klein of groot maken als je wilt, zelfs een volledige pagina kan als patroon worden opgeslagen. Bij PowerKraut spreken we in dat geval van een template, omdat je een pagina layout hebt gemaakt die je op een specifiek type pagina wilt gebruiken. Je kunt ook meerdere kleinere patronen samen opslaan als één groot patroon. Jij bepaalt zelf welke werkwijze je het prettigst vindt.

Voordelen van patronen

• Bespaar tijd door je eigen layouts eenvoudig te hergebruiken
• Je oorspronkelijke patroon blijft intact, terwijl je op nieuwe pagina’s je toegepaste patroon gerust kunt wijzigen
• Stel complete pagina layouts samen voor nog meer efficiëntie
• Eenvoudig ‘dezelfde’ content op meer pagina’s in één keer updaten met een gesynchroniseerd patroon

Patroon synchroniseren (voorheen Herbruikbaar block)

Heb je een patroon waarvan de inhoud op elke pagina hetzelfde moet blijven en bij updates ook op elke pagina toegepast moet worden? Maak dan een gesynchroniseerd patroon. Je hoeft dit slechts één keer te wijzigen, waarna de update automatisch op elke pagina waar het patroon staat wordt doorgevoerd. Dit is veel eenvoudiger dan alles handmatig te kopiëren en plakken.

Voordat je een patroon maakt, is het handig om eerst te bedenken welk stukje layout je op meerdere pagina’s wilt toepassen. Zo kun je bij het samenstellen van je patroon al rekening houden met eventuele inhoudsverschillen per pagina.

In dit voorbeeld gebruiken we de informatiemelding van deze pagina (onder de introductie) als patroon dat we gaan maken.

We stellen dit patroon samen door een Groep te maken, met daarin Kolommen met een Afbeelding en een Paragraaf. In dit geval zal alleen de tekst bij elke toepassing van het patroon verschillen.

Selecteer de elementen die je wil opslaan als patroon. Het opslaan kan op twee manieren.

1. Open het submenu van je hoofdelement (in het voorbeeld de Groep). Klik op Patroon aanmaken.
2. Je kunt ook je hoofdelement op de pagina selecteren en via de zwevende optiebalk erboven hetzelfde submenu openen.

In het venster dat verschijnt kun je het patroon een naam geven. Deze melding uit het voorbeeld noemen we Informatiemelding.

Hoe meer patronen je maakt, hoe minder overzicht je hebt. Het is daarom handig om een categorie te selecteren of aan te maken. Op die manier kun je de patronen sneller terugvinden. Je kunt Gesynchroniseerd aan of uitzetten.

In het geval van deze melding schakelen we deze uit. Op die manieren kunnen we op elke pagina de melding voorzien van specifieke tekst voor die pagina. Als we de optie “Gesynchroniseerd” wel aanzetten, zal de melding op elke pagina hetzelfde zijn. Veranderen we dan de achtergrondkleur of de tekst, dan gebeurt dit op alle pagina’s tegelijk.

Bepaal de juiste plek

Bij het plaatsen van een patroon bepaal je eerst de juiste plek. Het patroon uit het voorbeeld kan geplaatst worden in andere elementen, bijvoorbeeld in een reeds bestaande kolom. De breedte van de kolom bepaalt dan de breedte van de melding.

Heb je zelf een patroon gemaakt binnen een Groep die ingesteld staat op Volledige breedte? Dan is het handig om deze op het hoofdniveau van je pagina te plaatsen en niet in een ander bestaand blok. Het patroon zou dan namelijk zijn volledige breedte niet kunnen toepassen.

In de afbeelding zie je dat het patroon Informatiemelding die zojuist is opgeslagen is geplaatst in een dieper niveau, namelijk in de Groep waarin ook de tekst van dit artikel staat. Een patroon met volledige breedte zal dus op het hoofdniveau geplaatst worden. Dat zou in de afbeelding hieronder dan zijn tussen de Omslagafbeelding en de groep Artikel. Of wat verder op de pagina tussen Voorbeelden en Videotutorial.

Een patroon plaatsen

Klik linksboven op het blauwe plusje en kies voor de tab Patronen. Je ziet hier de verschillende aangemaakte categorieën staan, waaronder meldingen. Daar kun je vervolgens ons aangemaakte patroon kiezen.

That’s it! Je patroon is nu geplaatst op de pagina.