So erstellen Sie einen wiederverwendbaren Block im WordPress Block Editor (Gutenberg)

Wiederverwendbare Blöcke, jetzt bekannt als Muster, ermöglichen es Ihnen, jeden Inhaltsblock zu speichern und ihn in anderen Beiträgen und Seiten auf Ihrer Website wiederzuverwenden.

Ob es sich um einen Call-to-Action-Bereich, ein Abonnementformular oder ein schön gestaltetes Banner handelt, Sie können es einmal erstellen, als Muster speichern und mit wenigen Klicks überall dort einfügen, wo Sie es benötigen.

Dies spart nicht nur Zeit und Mühe, sondern sorgt auch für Konsistenz im Design auf Ihrer gesamten Website.

Bei WPBeginner verwenden wir Muster, um denselben Call-to-Action zu jedem Beitrag auf unserer Website hinzuzufügen. Dies optimiert unseren Arbeitsablauf, da unsere Autoren keine Zeit damit verbringen müssen, herauszufinden, wie sie ihre Artikel abschließen sollen. Sie können einfach den wiederverwendbaren CTA-Block einfügen und mit der nächsten Aufgabe fortfahren.

In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie ganz einfach einen wiederverwendbaren Block im WordPress-Blockeditor erstellen.

Was ist ein wiederverwendbarer Block (Muster) in WordPress?

Muster, früher bekannt als wiederverwendbare Blöcke, sind leistungsstarke Funktionen im WordPress Block-Editor, mit denen Sie eine Sammlung von Blöcken zum einfachen Wiederverwenden auf einer gesamten Website speichern können.

Viele Blogger fügen oft die gleichen Inhaltsausschnitte in mehrere Artikel ein, wie z. B. Aufrufe zum Handeln am Ende des Blogbeitrags oder Links, um dem WordPress-Blog in sozialen Medien zu folgen.

Viele Benutzer speichern ihre wiederverwendbaren Inhaltsausschnitte einfach als Textdateien auf ihren Computern und kopieren und fügen sie dann bei Bedarf ein.

Der Gutenberg-Block-Editor löst dieses Problem jedoch mit der Musterfunktion.

Sie können ganz einfach ein Muster mit einem Block erstellen und es im Beitragseditor speichern. Dieser Block kann dann in jeden WordPress-Beitrag oder jede Seite eingefügt werden, ohne den Inhalt von Grund auf neu erstellen zu müssen.

Dies spart Zeit und ermöglicht es Ihnen, ein konsistentes Design oder einen einheitlichen Stil über Seiten oder Beiträge hinweg beizubehalten. Hier sind nur einige Szenarien, in denen ein wiederverwendbarer Block (Muster) Ihnen helfen kann, effizienter zu arbeiten:

• Benutzer auffordern, Ihnen am Ende jedes Artikels in sozialen Medien zu folgen
• Call-to-Action-Buttons in Ihren WordPress-Beiträgen und -Seiten hinzufügen
• Tabellen speichern und wiederverwenden
• Schnell Feedback-Formulare zu Ihren Seiten hinzufügen
• Manuelles Hinzufügen von Inline-Affiliate-Bannern
• Speichern und Wiederverwenden von verschachtelten Blöcken

Lassen Sie uns nun sehen, wie Sie ganz einfach einen wiederverwendbaren Block im WordPress-Blockeditor erstellen können.

So erstellen Sie ein Muster (wiederverwendbarer Block) im WordPress Gutenberg-Editor

Alle Gutenberg-Blöcke sind einzelne Inhaltselemente im WordPress-Editor, die auch als Muster gespeichert werden können. Zuerst müssen Sie einen vorhandenen oder neuen Beitrag öffnen, um mit der Erstellung eines wiederverwendbaren Blocks zu beginnen.

Sobald Sie dies getan haben, klicken Sie auf die Schaltfläche „Block hinzufügen“ (+) in der oberen linken Ecke des Bildschirms.

Dies öffnet das Blockmenü, in dem Sie einen Block hinzufügen können, den Sie auf mehreren Seiten oder Beiträgen wiederverwenden möchten. Fügen Sie dann den Inhalt nach Belieben zum Block hinzu.

Für dieses Tutorial wählen wir den Absatzblock, um ein Muster für einen CTA-Inhaltsausschnitt zu erstellen.

Sie können Ihren Block weiter gestalten, indem Sie verschiedene Optionen aus der Block-Symbolleiste oben oder dem Block-Bedienfeld auf der rechten Seite verwenden.

Außerdem können Sie Links zu Ihren Social-Media-Profilen hinzufügen und verschiedene Typografieelemente einfügen.

Sobald dies erledigt ist, klicken Sie auf die Schaltfläche mit dem Drei-Punkte-Menü in der Block-Symbolleiste.

Dies öffnet ein Dropdown-Menü, in dem Sie die Option „Muster erstellen“ auswählen müssen.

Als Nächstes werden Sie aufgefordert, einen Namen für das Muster einzugeben. Wir empfehlen, einen Namen zu verwenden, der Ihnen hilft, den Block und seine Funktion schnell zu identifizieren.

Danach können Sie eine der Standardkategorien aus dem Dropdown-Menü auswählen. Dies hilft Ihnen, alle wiederverwendbaren Blöcke zu organisieren, wenn Sie viele Muster auf Ihrer Website erstellen und verwenden möchten.

Klicken Sie dann einfach auf die Schaltfläche „Erstellen“, um Ihre Änderungen zu speichern.

Ihr Muster wird nun mit allen Einstellungen in der WordPress-Datenbank gespeichert.

So fügen Sie WordPress-Muster in Beiträge und Seiten ein

Nachdem wir nun gelernt haben, wie man ein Muster in WordPress erstellt, sehen wir uns an, wie man es zu Ihren WordPress-Beiträgen und -Seiten hinzufügt.

Wieder müssen Sie einen neuen oder vorhandenen Beitrag öffnen, zu dem Sie den wiederverwendbaren Block im Gutenberg-Editor hinzufügen möchten. Klicken Sie von hier aus auf die Schaltfläche „Block hinzufügen“ (+) in der oberen linken Ecke des Bildschirms und wechseln Sie oben zum Tab „Muster“.

Hier sehen Sie eine Liste aller Standardkategorien, die von der Musterfunktion angeboten werden. Nun müssen Sie auf die Kategorie klicken, die Sie für Ihren wiederverwendbaren Block ausgewählt haben.

Zum Beispiel haben wir die Kategorie „Call to Action“ gewählt, da wir ein wiederverwendbares Muster für Beiträge CTA erstellten.

Wenn Sie keine Kategorie für Ihren Block ausgewählt haben, wird Ihr Muster im Tab 'Uncategorized' gespeichert.

Sobald Sie auf eine Kategorie klicken, öffnet sich daneben ein neues Fenster mit allen Mustern, die in dieser spezifischen Kategorie gespeichert sind.

Hier klicken Sie einfach auf den wiederverwendbaren Block, den Sie erstellt haben, und er wird automatisch zu Ihrer WordPress-Seite oder Ihrem Beitrag hinzugefügt.

Wenn dies etwas kompliziert erscheint, können Sie einfach / im Block-Editor eingeben und nach dem Muster anhand des Namens suchen, den Sie ihm gegeben haben.

Dies öffnet sofort eine Liste von Blöcken, aus denen Sie das Muster einfach auswählen können.

Sie können den wiederverwendbaren Block auch bearbeiten, indem Sie in der Block-Symbolleiste oben auf die Option „Original bearbeiten“ klicken.

Bitte beachten Sie jedoch, dass Änderungen an den Muster-Einstellungen diese an allen Orten ändern, an denen Sie das Muster verwendet haben.

Dies leitet Sie zu einem neuen Bildschirm im Block-Editor weiter, wo Sie den Musterinhalt bearbeiten und Änderungen vornehmen können. Sie können auch andere Blöcke hinzufügen, um das Muster anzupassen.

Sobald Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Aktualisieren“, um Ihre Änderungen zu speichern.

Jetzt können Sie den Beitrag erneut öffnen, wo Sie das aktualisierte Muster in Aktion sehen werden.

Wenn Sie jedoch nur Änderungen an einem Muster in einem bestimmten Beitrag vornehmen möchten, müssen Sie auf das Drei-Punkte-Symbol in der Block-Symbolleiste klicken.

Dies öffnet ein Eingabefeld, in dem Sie die Option „Trennen“ auswählen müssen. Dadurch wird das Muster in einen regulären Block umgewandelt und alle von Ihnen vorgenommenen Änderungen wirken sich nicht auf das ursprüngliche Muster aus.

Alle Muster im WordPress-Editor verwalten

Nachdem Sie Muster eine Weile verwendet haben, haben Sie möglicherweise einige Blöcke, die Sie nicht mehr verwenden oder umbenennen möchten.

WordPress ermöglicht es Ihnen, alle Ihre Muster einfach von einem Bildschirm aus zu verwalten. Wenn Sie ein älteres Theme verwenden, besuchen Sie die Seite Darstellung » Muster im WordPress-Dashboard.

Dies leitet Sie zu einer neuen Seite weiter, auf der Sie alle wiederverwendbaren Muster auf Ihrer WordPress-Website einfach verwalten können.

Hier können Sie Ihre Blöcke bearbeiten, löschen, importieren oder sogar auf eine andere Website exportieren.

Wenn Sie jedoch ein Block-Theme verwenden, ist diese Option für Sie nicht verfügbar. In diesem Fall können Sie alle Ihre Muster verwalten, indem Sie die Seite Darstellung » Editor in der Admin-Seitenleiste von WordPress aufrufen.

Dies öffnet den vollständigen Website-Editor, wo Sie in der linken Spalte auf die Registerkarte „Muster“ klicken müssen, um sie zu erweitern. Nun können Sie die Option „Alle meine Muster verwalten“ anklicken.

Sie werden nun zur Seite „Muster“ weitergeleitet, wo Sie Muster bearbeiten oder löschen können.

Sie können auch auf die Schaltfläche „Neues Muster hinzufügen“ klicken, um einen neuen wiederverwendbaren Block zu erstellen.

Wiederverwendbare Blöcke (Muster) importieren / exportieren

Muster sind nicht nur auf der Website wiederverwendbar, für die sie erstellt wurden. Sie können sie auch auf jeder anderen WordPress-Website verwenden.

Um wiederverwendbare Blöcke von der Seite Muster zu exportieren, klicken Sie unter dem Block auf den Link „Als JSON exportieren“. WordPress sendet Ihnen den Block nun als JSON-Datei, die auf Ihrem Computer gespeichert werden kann.

Sie können jetzt zum Admin-Bereich einer anderen WordPress-Site wechseln. Besuchen Sie von hier aus den Bildschirm zur Musterverwaltung und klicken Sie oben auf die Schaltfläche 'Aus JSON importieren'.

Hier wird ein Feld zum Hochladen von Dateien angezeigt, in dem Sie auf die Schaltfläche „Datei auswählen“ klicken müssen, um den zuvor heruntergeladenen Block auszuwählen.

Klicken Sie danach auf die Schaltfläche „Importieren“.

WordPress wird nun Ihr Muster importieren und in seiner Datenbank speichern. Sie können nun fortfahren und die neu importierten wiederverwendbaren Blöcke auf Ihrer anderen WordPress-Website verwenden.

Für detaillierte Anweisungen lesen Sie unsere Schritt-für-Schritt-Anleitung unter Importieren/Exportieren Ihrer WordPress-Inhaltsblöcke (mit Screenshots).

Bonustipps zur Beherrschung des WordPress-Block-Editors

Abgesehen davon, dass Sie Muster hinzufügen, um Ihren Redaktions-Workflow zu verbessern, können Sie auch einige andere Tipps im WordPress-Blockeditor verwenden, um Ihren Content-Erstellungsprozess zu optimieren.

Dies kann die Produktivität steigern und Ihnen helfen, sich stärker auf den Inhalt Ihrer Website zu konzentrieren.

Sie können den Block-Editor leicht meistern, indem Sie sich die Blöcke merken, die Sie auf Ihrer Website am häufigsten verwenden, wie z. B. Absatz-, Bild-, Überschriften- oder Schaltflächenblöcke.

Sobald Sie das getan haben, können Sie Ihren Bearbeitungsbildschirm neu anordnen, um die Block-Symbolleiste am oberen Rand der Seite anzuzeigen. Sie können sogar den ablenkungsfreien Modus verwenden, um Ablenkungen wie das Block-Panel, das Block-Menü, die WordPress-Admin-Seitenleiste und mehr zu entfernen.

Detaillierte Anweisungen finden Sie in unserem Tutorial zur Verwendung des ablenkungsfreien Vollbildeditors in WordPress.

Ein weiterer erstaunlicher Tipp ist die Verwendung des Spaltenblocks, um Ihren Inhalten ein zeitschriftenähnliches Aussehen zu verleihen, YouTube-Videos hinzufügen, Titelbilder hinzufügen, Absatzfarben ändern und vieles mehr.

Weitere Informationen finden Sie in unserer Liste der besten Tipps zur Beherrschung des WordPress-Inhaltseditors.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie einen wiederverwendbaren Block im WordPress-Blockeditor erstellen. Möglicherweise möchten Sie auch unsere Anfängeranleitung zum Anpassen Ihres WordPress-Headers oder unsere Expertenauswahl für die besten Gutenberg-freundlichen WordPress-Themes ansehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.