Für schnellere Prozesse und die Vereinfachung der täglichen Arbeit auf der Website sorgen Block Pattern in WordPress. Das sind vordefinierte Block Layouts, die mit wenig Aufwand an unterschiedlichen Stellen eingefügt und angepasst werden können. Wir stellen dir in diesem Beitrag deswegen das Pattern Verzeichnis von WordPress und den Block Pattern Creator vor.
Die meisten Websites bestehen aus wiederkehrenden Strukturen. Diese sogenannten Patterns sind in WordPress vordefinierte Blöcke, die an unterschiedlichen Stellen auf der Website einen Platz finden. Bei Bedarf lassen sich diese auch individuell anpassen, komplett unkompliziert und schnell.
Was ist der Unterschied zwischen wiederkehrenden Blöcken und Patterns?
Wiederkehrende Blöcke können, wie Patterns , nach Bedarf an unterschiedlichen Stellen auf der Website genutzt werden. Sie unterscheiden sich jedoch im Hinblick auf einen Punkt deutlich voneinander: Sobald ein wiederkehrender Block geändert wird, ändern sich auch alle Verknüpfungen. Der Block kann also an zentraler Stelle angepasst werden und die Änderung überträgt sich dann auf allen Seiten, auf denen der Block genutzt wurde.
Bei den Pattern ist genau das nicht der Fall: Nach dem Einfügen sind die Patterns nämlich nicht mehr mit der eigentlichen Vorlage verknüpft. Diese kann entsprechend ohne Probleme jederzeit angepasst werden, ohne dass sich die bereits eingefügten Blöcke verändern.
Dieser Unterschied ist eine große Entlastung für alle Website Betreiber:innen, die bislang mit den wiederkehrenden Blöcken gearbeitet haben. Durch die fehlende Verknüpfung sind Anpassungen unkomplizierter und machen die tägliche Arbeit deutlich einfacher.
„*“ zeigt erforderliche Felder an
Seit wann gibt es das Pattern Verzeichnis von WordPress?
Seit dem WordPress-Update 5.5 finden Website-Betreiber:innen die Patterns neben den wiederkehrenden Blöcken. Die Patterns sind eine eigene Kategorie, worunter Nutzer:innen zahlreiche Vorlagen inkl. einer Vorschau sehen.
Zusammen mit dem WordPress-Update 5.8 ist auch das Pattern Verzeichnis von WordPress online gegangen. Dieses ist ähnlich aufgebaut wie das Plugin- oder Theme Verzeichnis von WordPress. Nutzer:innen erhalten hier einen Überblick über zahlreiche Block Vorlagen für den Gutenberg Editor.
Was ist das Block Pattern Verzeichnis von WordPress?
Direkt auf der Website von WordPress finden Website Betreiber:innen eine große Auswahl an Vorlagen. Die Patterns sind nach unterschiedlichen Funktionen sortiert, darunter Buttons, Kategorien oder Footer. Es besteht entweder die Möglichkeit, sich die neuesten oder die beliebtesten Vorlagen anzeigen zu lassen. Mithilfe der Suchfunktion kannst du zudem nach einem bestimmten Keyword suchen und findest dann alle Patterns, die genau zu diesem Thema passen.
Sobald Website Betreiber:innen ein passendes Pattern für ihre Website gefunden haben, können sie sich mit einem Klick auf das Vorschaubild das Layout genauer ansehen. Denn der Block-Editor ermöglicht eine individuelle Gestaltung komplett ohne Code. Hier haben Interessierte die Möglichkeit, das Pattern mit einem Klick auf den Button „Copy Pattern“ direkt zu kopieren. Direkt danach kann das Layout in jeden WordPress Beitrag oder auf jede WordPress Seite kopiert werden.
Um ein besseres Gefühl dafür zu bekommen, ob das Pattern wirklich auf die Website passt, lässt sich die Größe individuell verschieben. Vorgegeben sind die Größen 320px, 480px, 960px und 1200px. Mit dem Mauszeiger lässt sich die Vorlage aber auch auf jede andere Größe verschieben. Das ist besonders wichtig, um zu sehen, ob das Pattern auch für die mobile Anzeige geeignet ist.
Ganz unten werden dann noch, falls vorhanden, weitere Patterns der Designer:innen angezeigt. Falls den Website Betreiber:innen eines davon direkt zusagt, ist das Kopieren über den Button „Copy“ möglich, ohne dass sie das Pattern überhaupt aufrufen.
Drei nützliche Patterns, die die tägliche Arbeit erleichtern
Für einen besseren Einblick in die unterschiedlichen Vorlagen im Block Pattern Verzeichnis, stellen wir im Folgenden drei praktische Patterns vor.
Die Preistabelle
Zum einen das Pattern „Pricing table“. Diese Vorlage ist besonders für alle Website Betreiber:innen nützlich, die Produkte oder Dienstleistungen verkaufen und die verschiedenen Tarife mit einer Preistabelle anzeigen möchten. In der Vorlage sind insgesamt drei Spalten vorhanden, die sich farblich voneinander unterscheiden.
Über mich Pattern
Oder das Pattern „About Me Cards“. Mit dieser Vorlage haben Website-Betreiber:innen die Möglichkeit, die “Über Mich” Seite grafisch schöner zu gestalten. Viele Personen verwenden hier reinen Text, um sich vorzustellen. Mithilfe des Patterns lassen sich jedoch drei Unterseiten verlinken, wie beispielsweise die eigene Geschichte, eine Kontaktmöglichkeit und die Social-Media-Kanäle.
Das Zitate Pattern
Mit dem Pattern „Quote“ hast du außerdem die Möglichkeit, Zitate übersichtlich und einfach auf deiner Seite oder in deine Beiträge einzubauen. Über dem Zitat selbst hast du die Möglichkeit ein Bild einzubauen und unter dem Zitat ist der Name des Zitatgebers eingefügt. Du musst deine wichtigsten Zitate also nicht mehr ausschließlich mit Anführungszeichen markieren, sondern kannst diese grafisch schön darstellen.
Wieso macht es Sinn, die Block Pattern von WordPress zu nutzen?
Durch passende Block Patterns, die zu dem jeweiligen Thema und zur Seite passen, haben Website Betreiber:innen die Möglichkeit, ihre Inhalte visuell darzustellen. Das erleichtert es den Besucher:innen, den Content direkt zu verstehen. Besonders für unerfahrene Personen sind die Vorlagen eine einfache und schnelle Möglichkeit, Inhalte zu visualisieren.
Viele WordPress Themes sind bereits mit passenden Patterns ausgestattet oder du hast die Möglichkeit, deine eigenen Patterns zu erstellen (dazu gleich mehr im Artikel). Trotzdem bietet das Block Pattern Verzeichnis eine große Auswahl an Vorlagen, die bei der täglichen Arbeit unterstützen. Wenn ein passendes Pattern bereits im Verzeichnis vorhanden ist, muss dieses nicht neu programmiert werden, sondern kann mit wenigen Klicks direkt benutzt werden.
Da sich die Patterns auch leicht anpassen lassen, können Website Betreiber:innen diese nach Bedarf auch individualisieren. Nutzer:innen haben also bei allen Patterns aus dem Verzeichnis die Möglichkeit, diese anzupassen, bis sie zur jeweiligen Website oder Marke passen.
Mit dem Block Pattern Creator Block Pattern selbst entwerfen: So einfach funktionierts
Die Auswahl der Block Patterns ist im Verzeichnis von WordPress bereits sehr groß. Und falls eine Vorlage zwar grundsätzlich passt, du aber noch Änderungen vornehmen musst, ist das ohne Probleme möglich. Falls Website Betreiber:innen aber entweder kein passendes Pattern für einen bestimmten Zweck finden oder grundsätzlich gerne Vorlagen erstellen möchten, ist das möglich.
Bislang erfolgte die Erstellung des Patterns im Block Editor, um dann den erstellten Code zu kopieren und anschließend an der gewünschten Stelle im Code des Themes einzufügen. Seit März 2022 ist dieser Prozess deutlich leichter geworden: WordPress hat den Block Pattern Creator veröffentlicht.
Dabei handelt es sich um ein Tool, um unkompliziert eigene Block Patterns zu erstellen und direkt auch im Block Pattern Verzeichnis mit anderen Nutzer:innen zu teilen. Und das, im Gegensatz zur ursprünglichen Vorgehensweise, komplett ohne Code.
Der Vorteil ist, dass besonders unerfahrene Nutzer:innen, die sich nicht mit Code auskennen, auch eigene Patterns erstellen und dann wiederum auch unkompliziert für die eigene Website kopieren können.
WordPress hat für die Erstellung eigener Patterns im Block Pattern Creator einige Richtlinien vorgegeben. Um eigene Patterns einzureichen, müssen die Ersteller:innen das Urheberrecht der erstellten Inhalte besitzen. Zudem werden illegale Inhalte sofort wieder entfernt. Sämtliche Patterns müssen in Englisch erstellt und eingereicht werden und ihnen muss ein passender, beschreibender Name hinzugefügt werden. Wenn Ersteller:innen beispielsweise die Namen „Test“ oder „My Pattern“ verwenden, wird die Registrierung des Patterns direkt abgelehnt.
WordPress gibt Ersteller:innen einige Tipps, um gute Patterns zu kreieren. Gute Patterns kombinieren beispielsweise mehrere Blöcke miteinander. Das hat den Hintergrund, dass die Vorlagen normalerweise von Grund auf kompliziert zu erstellen wären. Ein gutes Pattern hebt zudem die Fähigkeiten der darin enthaltenen Blöcke hervor und bietet einen optimalen Ausgangspunkt für die Anpassung der Inhalte. Ein gutes Pattern hat außerdem einen klar definierten Zweck und beschränkt Platzhaltertext auf ein Minimum.
Gleichzeitig sollten Pattern nie eine ganze Seite oder einen gesamten Blog Artikel einnehmen. Sehr simple Muster, wie beispielsweise ein einfacher Absatz mit Farben, ist in der Regel keine Zeitersparnis für die Nutzer:innen. Außerdem sollte sich das Pattern nicht nur auf ein Thema beschränken, sondern sollte auch für verschiedene Themen und Seiten einsetzbar sein.
Fazit: Das Block Pattern Verzeichnis von WordPress spart Zeit
Das Block Pattern Verzeichnis kann bei der täglichen Arbeit helfen. Insbesondere dann, wenn Website Betreiber:innen nach einem bestimmten Layout suchen, aber keine Zeit haben, ein eigenes zu erstellen. Im Verzeichnis sehen Anwender:innen, nach Zweck sortiert, sämtliche Patterns und können diese mit nur einem Klick kopieren und anschließend an der gewünschten Stelle auf der Seite oder im Artikel einfügen.
Wer eigene Block Patterns erstellen und mit anderen Nutzer:innen teilen möchte, kann das unkompliziert mit dem Block Pattern Creator machen. Das Besondere daran: Es ist an keiner Stelle erforderlich, im Code zu arbeiten. Nutzer:innen melden sich dafür lediglich im Block Pattern Creator an und können eigene Vorlagen erstellen. Diese sind dann, sofern sie die Richtlinien von WordPress erfüllen, dauerhaft für den eigenen Gebrauch verfügbar.
Deine Fragen zu WordPress Block Pattern
Welche Fragen zu WordPress Block Pattern und den genannten Beispielen hast du? Nutze gerne die Kommentarfunktion. Du willst über neue Beiträge zum Thema WordPress & Updates informiert werden? Dann folge uns auf Twitter, Facebook, LinkedIn oder über unseren Newsletter.