Gutenberg Block Patterns und WordPress Starter Templates
Mรถchtest du mehr zum Thema Gutenberg Block Patterns erfahren?
Wenn es um das Erstellen und Bauen von Websites geht, dann ist WordPress eines der beliebtesten Systeme. Die weltweit fรผhrende Blogging-Software zeichnet sich durch hohe Benutzerfreundlichkeit und eine beeindruckende Anpassungsfรคhigkeit aus.
Gutenberg Block Patterns sind Vorlagen aus einer Kombination unterschiedlicher Gutenberg-Blรถcke. Diese Block-Vorlagen kรถnnen รผberall im Block-Editor eingefรผgt werden. Anschlieรend sind alle Bereiche und Texte frei anpassbar.
Allerdings kann es ab und zu dann doch etwas kompliziert und enorm zeitaufwendig werden, wenn es um das Gestalten von neuen Seiten und Unterseiten fรผr die eigene Internetprรคsenz geht.
Doch dafรผr gibt es eine Lรถsung: die Block Patterns und Starter Templates fรผr den Gutenberg Editor. Doch worum handelt es sich dabei, wo sind die Vorteile und warum sind sie so hilfreich? Wir klรคren die wichtigsten Fragen rund um Gutenberg Block Patterns und Starter Templates fรผr dich. Egal welches WordPress-Theme du nutzt, diese Funktionen stehen dir immer zur Verfรผgung.
Das beliebte Astra Theme und die Ultimate Addons for Gutenberg kommen mit unzรคhligen Seiten-Templates und Blog-Patterns.
Warum sind die Templates sinnvoll und nรผtzlich?
Wenn du eine Website von Grund auf entwerfen willst, dann wirst du schnell feststellen, dass es sich um einen komplizierten und zeitaufwรคndigen Prozess handelt – selbst bei der benutzerfreundlichen Software von WordPress. Zunรคchst einmal fรคllt Recherche an, dann die Fertigstellung von Mockups, die Gestaltung von Seitenlayouts und die Auswahl von Farben, Typografien und einem passenden Design. Eine lange Liste.
Zeit ist in der Welt der Unternehmen bekanntlich Geld und daher eine wichtige Ressource. Deswegen kommen an dieser Stelle die Starter Templates ins Spiel, die neue und attraktive Mรถglichkeiten fรผr Unternehmen schaffen.
Wozu sind Starter Templates bei WordPress da?
Bei den Astra Starter Templates handelt es sich um zeitsparende Lรถsungen rund um das Erstellen deiner Website. Sie stellen die ideale Lรถsung fรผr alle Herausforderungen im Design der Website dar. Die Frage nach dem Warum ist einfach zu beantworten: durch die Starter Templates kรถnnen ganze Seiten und sogar komplette Websites mit nur einem Klick importiert werden.
Diese Funktion bietet sich fรผr dich in WordPress schon eine ganze Weile. Nun kommen aber neue Mรถglichkeiten hinzu, welche mit dem Problem zu tun haben, dass es einiges an Geschick und Know-how benรถtigt, wenn einzelne Abschnitte nach dem Importieren der Seite angepasst und verรคndert werden sollen. Fรผr dieses Problem gibt es nun eine Lรถsung, die Gutenberg Block Patterns.
Was sind Gutenberg Block Patterns?
Die Gutenberg Block Patterns kรถnnte man im Deutschen auch mit Gutenberg-Blockmuster รผbersetzen – was schon einen kleinen Einblick in die Funktionen gibt. Es handelt sich dabei um vorgefertigte Abschnitte von Websites, die du zu jedem Design hinzufรผgen kannst. Das funktioniert einfach, die Block Patterns kรถnnen mit nur einem Klick eingefรผgt werden – und zwar รผberall auf der Seite.
Durch die praktische Drag-and-Drop-Funktion, die du bei der Seitenerstellung in WordPress รผberall nutzen kannst, kannst du in kรผrzester Zeit Elemente zu der Seite hinzufรผgen. Dann kommen die Gutenberg Block Patterns ins Spiel, mit denen du einzelne Elemente gruppieren und sie in ein gemeinsames Design verpacken kannst. Die Erstellung wird dadurch nicht nur deutlich einfacher, sondern frisst vor allem auch nicht mehr so viel wichtige Arbeitszeit.
Du kannst deine Seiten auch mit einer Kombination aus verschiedenen Mustern erstellen. Ein weiterer Pluspunkt: du kannst auch ein Muster auf einer bestehenden Seite anwenden, um das Aussehen und die Benutzerfreundlichkeit der Seite zu verbessern und eine bessere User-Experience zu ermรถglichen. Auch bei Abschnitten wie einem Call to Action, einem Kontaktformular, oder รคhnlichen – zumeist wiederkehrenden – Elementen helfen die Gutenberg Block Patterns.
Durch die Block Patterns kannst du bei WordPress nun nicht nur รผber 150 Astra Starter Templates auswรคhlen, sondern auch alle Block Patterns, welche zu den Vorlagen hinzugefรผgt wurden – und auch das sind eine ganze Menge.
Schon jetzt scheint klar, dass die Block Patterns die Zukunft der Erstellung von Websites sein wird und diese enorm prรคgen. Das Beste daran: Sie sind bereits in den Astra Starter Templates enthalten, du kannst also sofort mit dem revolutionรคren Feature loslegen.
Wo findest du die Gutenberg Block Patterns?
Der Weg zu den Block Patterns ist – wie so vieles bei WordPress – enorm einfach gehalten. Du musst nur auf der Beitragsseite zu den UAG Templates gehen und dann auf die Registerkarte Block Patterns – oder auch Block-Muster – klicken.
Dann kannst du beliebige Block Patterns aus einer breiten Palette von verfรผgbaren Mustern wรคhlen. Die Gutenberg Blรถcke wurden mit universellen Farben entworfen und funktionieren mit allen Themes und auรerdem auch auf allen Gerรคten.
Das Menรผ mit den Gutenber Block Templates bietet folgende Funktionen:
Suchen: In der rechten oberen Ecke ist ein Suchfeld angebracht, welches dich zu dem Blockmuster springen lรคsst, das du suchst. Dazu musst du aber natรผrlich auch wissen, wonach du suchst. Die Bezeichnungen sind allerdings recht einfach und logisch gehalten. Wenn du beispielsweise die Startseite entwirfst und einen schรถnen Abschnitt am Anfang benรถtigst, dann wird dieser auch „Hero“ genannt. In die Suche kannst du „Hero“ eingeben und du wirst zu allen Block Patterns gefรผhrt, welche fรผr den entsprechenden Abschnitt verfรผgbar sind.
Bibliothek synchronisieren: Mit dieser Option – welche sich ebenfalls in der oberen rechten Ecke befindet – kannst du die Bibliothek aktualisieren. Wenn du darauf klickst, dann wir sie automatisch upgedatet und es werden alle gerade verfรผgbaren Block Patterns aufgelistet. Es macht Sinn diese Funktion regelmรครig auszulรถsen, da immer wieder neue Block Patterns verfรผgbar sind.
Kategorie: Auf der linken Seite siehst du einen sogenannten Dropdown, in dem du verschiedene Kategorien auswรคhlen kannst. Die Block Patterns sind in verschiedenen Gruppen verfรผgbar. Wenn du eine Kategorie auswรคhlst, dann kannst du entsprechende Muster finden, welche du fรผr bestimmte Abschnitte und Gruppierungen brauchen kannst.
Seiten: Neben der Registerkarte „Muster“ (oder auch „Patterns“ siehst eine Registerkarte „Seiten“. Bei dieser bietet sich fรผr dich die Mรถglichkeit, Vorlagen fรผr einzelne Seiten zu importieren. Diese Einzelseitenvorlagen dienen als komplette Seite fรผr deine Website, z. B. fรผr Home, รber uns, Leistungen, Funktionen, Kontakt usw. In der Bibliothek der Block Patterns kannst du eine beliebige Seite auswรคhlen, die du dann ganz easy รผber den Block-Editor importieren kannst.
Sobald sie ausgewรคhlt sind, รผbernehmen Gutenberg Block Patterns deine Customizer-Einstellungen, was dir Zeit spart und alle wichtigen รnderungen an einem einzigen Ort zusammentrรคgt. Wichtig ist, dass die Astra Starter Templates immer auf dem neuesten Stand sind – denn dann sind sie leistungsfรคhiger als je zuvor.
- Mehr als 1.000.000 Benutzer
Das am schnellsten wachsende WordPress-Theme aller Zeiten! - Hunderte Starter-Templates
Spare Zeit und nutze eine der professionellen Vorlagen fรผr einen schnellen Start. - Page-Builder Blรถcke
Unterstรผtzt Elementor, Beaver Builder, Brizy und den Gutenberg Block Editor. - Extrem schnelles Theme
Beste Page-Speed Werte mit Astra.
Gutenberg Block Patterns schaffen viele Mรถglichkeiten
Die Gutenberg Block Patterns sind deswegen in einer Vielzahl vorhanden, da sie auf verschiedene Bedรผrfnisse ausgelegt sind. Es sind allerdings auch einige Blockmuster vorhanden, welche fรผr fast alle Anforderungen geeignet sind – dazu gehรถren folgende:
- About
- Call to Action
- Clients
- Contact
- FAQ
- Features
- Services
- Teams
- Testimonials
Neben diesen klassischen Block Patterns besteht fรผr dich zu jeder Zeit die Mรถglichkeit, flexible und kreative Designs zu erstellen und einzigartige Seiten zu generieren. Diese kรถnnen immer wieder verwendet werden, um einen typischen Style fรผr deine Website zu finden, welcher auf jeder Unterseite gelebt wird.
Fรผr noch mehr individuelle Maรnahmen kรถnnen die Gutenberg Block Patterns beliebig kombiniert werden, um ein einzigartiges Design sicherzustellen. Jedes Blockmuster kann mit einem Klick hinzugefรผgt, entfernt und ersetzt werden – kinderleicht.
Wegen der extrem hohen Anzahl an verschiedenen Kombinationen hast du alle Mรถglichkeiten eine individuelle Seite mit einfachen Mitteln zu gestalten und deinen eigenen Style zu finden – ohne ewig nach diesem suchen zu mรผssen.
Vorteile der Gutenberg Block Patterns
Die Block Patterns sind von Experten entworfen und auch getestet worden. Das hat unter anderem den Vorteil, dass du dir keine Gedanken รผber die Kompatibilitรคt und die Verwendung machen musst. Es gibt aber noch viel mehr Grรผnde, warum Gutenberg Block Patterns die Zukunft sind und du sie auch nutzen solltest. Zum Abschluss haben wir fรผr dich die wichtigsten Vorteile zusammengefasst:
Mit nativen Gutenberg-Blรถcken entworfen: Alle Block Patterns sind mit nativen Gutenberg-Blรถcken entworfen worden, ohne dass irgendwelche Plugins von Drittanbietern verwendet werden. Das hat zum Vorteil, dass du alle Muster verwenden kannst, ohne dass du zusรคtzliche Plugins installieren musst.
Arbeitet mit allen Themes: Du kannst die Block Patterns mit deinem bevorzugten Theme importieren und sie einfach anpassen. Es ist nicht notwendig, ein bestimmtes Theme installiert zu haben.
รbernahme der Einstellungen: Sobald du ein Muster importierst, รผbernimmt es alle deine Customizer-Einstellungen wie Farbe, Typografie, Layout und andere Einstellungen. Das spart eine Menge Zeit und Mรผhe bei der Verwendung der Muster.
Einfach anzupassen: Du kannst die Block Patterns einfach bearbeiten und mit wenigen Klicks optimieren. Es steckt kein komplexer Prozess dahinter, um sie entwerfen zu mรผssen.
Schwarze und weiรe Blรถcke: In der Bibliothek fรผr alle Block Patterns siehst du, dass eine Hรคlfte der Blรถcke mit schwarzem Farbton und eine Hรคlfte mit weiรem Farbton gehalten ist. Du kannst eine Kombination aus dunklen und hellen Blรถcken verwenden, um einen einzigartigen Look fรผr deine Website zu schaffen.
Responsivitรคt: รber die Responsivitรคt musst du dir keine Sorgen machen, denn die Gutenberg Block Patterns sind auf allen Bildschirmgrรถรen getestet worden und sehen รผberall gut aus.
Kostenlos: Mit dem Plugin „Starter Templates“ sind die Block Patterns kostenlos verfรผgbar. Das Plugin ist wiederum kostenlos auf der Seite von WordPress verfรผgbar. In den meisten Fรคllen ist es aber bereits eingebaut.
Bestes WordPress Hosting
Hosting-Empfehlungen sind normalerweise Mรผll.
Oft werden extrem billige Hosting-Pakete fรผr โฌ 3 empfohlen, andere wiederum werben mit einem โฌ 100 VPS, weil sie als Affiliate dabei am meisten verdienen. Letztlich wollen wir doch alle nur den schnellstmรถglichen Webspace fรผr mรถglichst wenig Geld.
Und zwar fรผr WordPress optimiert und vom TรV Saarland zertifiziert!
Was ist noch wichtig? Der Server sollte in Deutschland liegen und der Support sollte mรถglichst schnell antworten, und das am besten auf Deutsch.
Das alles bekommst du bei HostPress ab โฌ 19,00 / Monat.
Block Pattern selbst erstellen
WordPress und die Astra Plugins bieten noch keine Mรถglichkeit selbst Block Pattern zu erstellen bzw. zu speichern. Dafรผr hat WordPress einfach die wiederverwendbaren Blรถcke (Reusable Blocks) vorgesehen.
Nachfolgend mรถchte ich dir zwei Wege zeigen, wie du deine eigenen Gutenberg Block Pattern erstellen kannst.
Variante 1: Per Code in der functions.php
function j0e_register_block_patterns() {
if ( class_exists( 'WP_Block_Patterns_Registry' ) ) {
register_block_pattern(
'j0e-header-pattern',
array(
'title' => __( 'รberschrift', 'j0e-patterns' ),
'description' => _x( 'Hier steht die Beschreibung des Pattern', 'Block pattern description', 'j0e-patterns' ),
'categories' => array('hero'),
'content' => "<!-- wp:heading -->
<h2>รberschrift 1</h2>
<!-- /wp:heading -->",
)
);
}
}
add_action( 'init', 'j0e_register_block_patterns' );
Fรผgst du den oben stehenden Code in deine functions.php Datei ein, findest du in deinen Block-Vorlagen eine neue Vorlage namens รberschrift.
Es handelt sich dabei um ein einfaches Grundgerรผst, mit dem du eine Block-Vorlage selbst erstellen kannst. Dabei habe ich die Funktion register_block_pattern
genutzt.
Variante 2: Block Pattern Builder Plugin
Hast du mit PHP nicht so viel am Hut, kannst du das Plugin namens Block Pattern Builder von Justin Tadlock installieren.
Das Plugin ist kostenlos im WordPress-Plugin-Verzeichnis erhรคltlich. (Erfahre wie du ein WP Plugin installierst)
Standard WordPress Block Pattern deaktivieren
Ich glaube, die Standard Gutenberg Block Patterns dienen eher als Beispiele, wie man es machen kรถnnte. Diese Vorlagen sind weder schรถn noch brauchbar, deshalb kรถnnte ich mir vorstellen, dass auch du diesen unnรถtigen Ballast entfernen mรถchtest.
Das funktioniert auch ganz einfach. Fรผge die folgende Zeile in deine functions.php ein und speichere sie ab:
function removeCorePatterns() {
remove_theme_support('core-block-patterns');
}
add_action('after_setup_theme', 'removeCorePatterns');
Ja, manchmal genรผgt wirklich eine einzige Zeile Code…
Block Pattern Fragen
Ist Gutenberg schneller als Elementor?
Ja, da Gutenberg als Standard-Content-Composer mit der WordPress-Installation kommt, ist Gutenberg leichter und bietet eine bessere Seitengeschwindigkeit im Vergleich zu anderen Page-Buildern wie Divi, Elementor oder Beaver Builder.
Ist der Block Editor die Zukunft von WordPress?
Definitiv. Auch wenn viele noch gerne den Classic Editor oder einen externen Page-Builder nutzen, ist Gutenberg nicht aufzuhalten. Ein Groรteil der WordPress-Entwicklung dreht sich um den neuen Editor.
Was sind die Vorteile von Block-Pattern?
Block-Pattern nutzen eine Kombination von einzelnen Blรถcken. Sind diese Vorlagen von erfahrenen Designern erstellt, hast du mit einem Klick schรถne, kompatible und durchdachte Abschnitte in deine Seite eingefรผgt.
Block Pattern statt Page-Builder
Du brauchst heute keinen aufgeblรคhten Page-Builder wie Elementor oder Beaver Builder mehr. Auch wenn du ein geschlossenes System wie Thrive Themes nutzt, wรผrde ich fรผr normale Blogposts den Standard-Editor von WordPress empfehlen.
Die Blรถcke sind echt super einfach zu nutzen und mit den vorgefertigten Block-Patterns hast du Zugriff auf eine Fรผlle von durchdachten Vorlagen.
Installiere dir entweder das Starter Templates Plugin oder das UAG Plugin.
Blockvorlagen sind einfach anzupassen, leichtgewichtig und passen sich an jedes Endgerรคt an. Es ist ein neuer Weg, um Website-Design schneller und einfacher zu machen.
Offenlegung Werbelinks: Mit einem Stern (*) gekennzeichnete Links und Buttons sind sogenannte Affiliate-Links. BloggerPilot bekommt bei einem Kauf eine Provision, die sich jedoch nicht auf den Endpreis auswirkt. Es ist uns wichtig zu betonen, dass dies keinen Einfluss auf unsere Bewertung oder Meinung hat.