Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man einen wiederverwendbaren Block im WordPress Block Editor (Gutenberg) erstellt

Möchten Sie einen wiederverwendbaren Block im WordPress-Blockeditor erstellen?

Wiederverwendbare Blöcke, jetzt als Vorlagen bekannt, ermöglichen es Ihnen, jeden Inhaltsblock zu speichern und in anderen Beiträgen und Seiten auf Ihrer Website wiederzuverwenden. Das spart Zeit und Mühe und verbessert Ihren redaktionellen Workflow.

In diesem Artikel zeigen wir Ihnen, wie Sie Schritt für Schritt einen wiederverwendbaren Block im WordPress Block-Editor erstellen können.

Create a Reusable Block in WordPress Block Editor

Was ist ein wiederverwendbarer Block (Vorlage) in WordPress?

Vorlagen, früher auch als wiederverwendbare Blöcke bekannt, sind leistungsstarke Funktionen im WordPress Block-Editor, die es Ihnen ermöglichen, eine Sammlung von Blöcken zur einfachen Wiederverwendung in einer gesamten Website zu speichern.

Viele Blogger fügen oft dieselben Inhaltsschnipsel in mehrere Artikel ein, z. B. Aufrufe zum Handeln am Ende des Beitrags oder Links, um dem WordPress-Blog in den sozialen Medien zu folgen.

Viele Benutzer speichern ihre wiederverwendbaren Inhaltsschnipsel einfach als Textdateien auf ihrem Computer und fügen sie bei Bedarf per Copy & Paste ein.

Der Block-Editor von Gutenberg löst dieses Problem jedoch mit der Funktion der Vorlagen.

Sie können mit einem Block ganz einfach eine Vorlage erstellen und im Editor für Beiträge speichern. Dieser Block kann dann in jeden WordPress-Beitrag oder jede Seite eingefügt werden, ohne dass Sie den Inhalt von Grund auf neu erstellen müssen.

Das spart Zeit und aktiviert außerdem ein einheitliches Design oder einen einheitlichen Stil für alle Seiten oder Beiträge. Hier sind nur einige der Szenarien, in denen ein wiederverwendbarer Block (Vorlage) Ihnen helfen kann, effizienter zu arbeiten:

  • Aufforderung an die Nutzer, Ihnen am Ende eines Artikels in den sozialen Medien zu folgen
  • Hinzufügen von Call-to-Action-Schaltflächen in WordPress-Beiträgen und -Seiten
  • Speichern und Wiederverwenden von Tabellen
  • Schnelles Hinzufügen von Feedback-Formularen zu Ihren Seiten
  • Manuelles Hinzufügen von Inline-Affiliate-Bannern
  • Speichern und Wiederverwenden von verschachtelten Blöcken

Schauen wir uns also an, wie man im WordPress Block-Editor ganz einfach einen wiederverwendbaren Block erstellt.

So erstellen Sie eine Vorlage (wiederverwendbarer Block) im WordPress Gutenberg Editor

Alle Gutenberg-Blöcke sind einzelne Inhaltselemente im WordPress Editor, die auch als Vorlagen gespeichert werden können. Zunächst müssen Sie einen bestehenden oder neuen Beitrag öffnen, um einen wiederverwendbaren Block zu erstellen.

Klicken Sie anschließend auf den Button „Block hinzufügen“ (+) in der oberen linken Ecke der Ansicht.

Daraufhin öffnet sich 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 dem Block dann den Inhalt hinzu, der Ihnen gefällt.

In diesem Tutorial wählen wir den Absatz-Block, um eine Vorlage für ein CTA-Inhalts-Snippet zu erstellen.

Add content for WordPress reusable block

Sie können Ihren Block mit verschiedenen Optionen aus der Werkzeugleiste oben oder dem Blockbedienfeld rechts weiter gestalten.

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

Customize block content according to your liking

Klicken Sie anschließend in der Werkzeugleiste des Blocks auf den Button mit dem Dreipunktmenü.

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

Select Create Pattern option

Als nächstes werden Sie aufgefordert, einen Namen für die Vorlage einzugeben. Wir empfehlen, einen Namen zu verwenden, mit dem Sie den Block und seine Funktion schnell identifizieren können.

Danach können Sie eine der Standard Kategorien aus dem Dropdown-Menü auswählen. Dies wird Ihnen helfen, alle wiederverwendbaren Blöcke zu organisieren, wenn Sie planen, viele Vorlagen auf Ihrer Website zu erstellen und zu verwenden.

Klicken Sie dann einfach auf den Button „Erstellen“, um Ihre Änderungen zu speichern.

Add a pattern name and click Create

Ihre Vorlage wird nun mit allen Einstellungen in der WordPress-Datenbank gespeichert.

Hinzufügen von WordPress Vorlagen in Beiträgen und Seiten

Nachdem wir nun gelernt haben, wie man eine Vorlage in WordPress erstellt, wollen wir nun sehen, wie man sie zu den Beiträgen und Seiten in WordPress hinzufügt.

Auch hier müssen Sie einen neuen oder bestehenden Beitrag öffnen, in dem Sie den wiederverwendbaren Block im Gutenberg Editor hinzufügen möchten. Klicken Sie auf den Button „Block hinzufügen“ (+) in der linken oberen Ecke der Ansicht und wechseln Sie zum Tab „Vorlagen“ (oben).

Hier sehen Sie eine Liste aller Standard Kategorien, die von der Funktion „Vorlagen“ angeboten werden. Nun müssen Sie auf die Kategorie klicken, die Sie für Ihren wiederverwendbaren Block ausgewählt haben.

Wir haben uns zum Beispiel für die Kategorie ‚Call to Action‘ entschieden, weil wir eine wiederverwendbare Vorlage für veröffentlichte Beiträge erstellen wollten.

Wenn Sie keine Kategorie für Ihren Block ausgewählt haben, wird Ihre Vorlage auf dem Tab ‚Uncategorized‘ gespeichert.

Select a pattern category from the list

Wenn Sie auf eine Kategorie klicken, öffnet sich neben dem Blockmenü eine neue Eingabeaufforderung, in der alle Vorlagen aufgelistet sind, die in dieser Kategorie gespeichert sind.

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

Add pattern to the post

Wenn Ihnen das etwas kompliziert vorkommt, können Sie im Block-Editor einfach ein / einfügen und die Vorlage unter dem Namen suchen, den Sie ihr gegeben haben.

Daraufhin öffnet sich sofort eine Liste mit Blöcken, aus der Sie die Vorlage einfach auswählen können.

Add pattern using a keyboard shortcut

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

Beachten Sie jedoch, dass eine Änderung der Vorlageneinstellungen diese an allen Positionen ändert, an denen Sie die Vorlage verwendet haben.

Click Edit Original option in the block toolbar

Dies führt Sie zu einer neuen Ansicht im Block-Editor, in der Sie den Inhalt der Vorlage bearbeiten und ändern können. Sie können auch andere Blöcke hinzufügen, um die Vorlage individuell anzupassen.

Wenn Sie fertig sind, klicken Sie einfach auf den Button „Aktualisieren“, um Ihre Änderungen zu speichern.

Edit pattern in the block editor

Jetzt können Sie den Beitrag erneut öffnen, um die aktualisierte Vorlage in Aktion zu sehen.

Wenn Sie jedoch nur eine Vorlage in einem bestimmten Beitrag ändern möchten, müssen Sie auf das Symbol mit den drei Punkten in der Werkzeugleiste des Blocks klicken.

Daraufhin öffnet sich eine Eingabeaufforderung, in der Sie die Option „Ablösen“ wählen müssen. Dadurch wird die Vorlage in einen regulären Block umgewandelt und alle Änderungen, die Sie vornehmen, haben keine Auswirkungen auf die ursprüngliche Vorlage.

Convert pattern into regular block

Verwaltung aller Vorlagen im WordPress Editor

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

Mit WordPress können Sie alle Ihre Vorlagen ganz einfach von einer Ansicht aus verwalten. Wenn Sie ein älteres Theme verwenden, besuchen Sie die Seite „Design “ Vorlagen “ im WordPress-Dashboard.

Dadurch werden Sie auf eine neue Seite weitergeleitet, auf der Sie alle wiederverwendbaren Vorlagen 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.

Manage pattern in old WordPress themes

Wenn Sie jedoch ein Block-Theme verwenden, steht Ihnen diese Option nicht zur Verfügung. In diesem Fall können Sie alle Vorlagen über die Seite „Design “ Editor “ in der Seitenleiste der WordPress-Verwaltung verwalten.

Dadurch wird der komplette Website-Editor geöffnet, in dem Sie in der linken Spalte auf den Tab „Vorlagen“ klicken müssen, um ihn zu erweitern. Nun können Sie auf die Option „Alle meine Vorlagen verwalten“ klicken.

Click manage all my patterns button

Sie werden nun auf die Seite ‚Vorlagen‘ weitergeleitet, wo Sie Vorlagen bearbeiten oder löschen können.

Sie können auch auf den Button ‚Neue Vorlage hinzufügen‘ klicken, um einen neuen wiederverwendbaren Block zu erstellen.

Manage patterns in block themes

Importieren / Exportieren von wiederverwendbaren Blöcken (Vorlagen)

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

Um die wiederverwendbaren Blöcke von der Seite “ Vorlagen“ zu exportieren, klicken Sie auf den Link „Als JSON exportieren“ unter dem jeweiligen Block. WordPress sendet Ihnen nun den Block als JSON-Datei, die Sie auf Ihrem Computer speichern können.

Click Import as JSON button

Sie können nun zum Verwaltungsbereich einer anderen WordPress Website wechseln. Rufen Sie von hier aus die Ansicht zur Verwaltung der Vorlagen auf und klicken Sie oben auf den Button „Import aus JSON“.

Daraufhin 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 anschließend auf die Schaltfläche „Importieren“.

Import JSON file

WordPress importiert nun Ihre Vorlage und speichert sie in seiner Datenbank. Sie können nun die neu importierten wiederverwendbaren Blöcke auf Ihrer anderen WordPress Website verwenden.

Eine ausführliche Anleitung finden Sie in unserer Schritt-für-Schritt-Anleitung zum Import/Export Ihrer WordPress-Inhaltsblöcke (mit Screenshots).

Bonustipps zur Beherrschung des WordPress Block-Editors

Neben dem Hinzufügen von Vorlagen zur Verbesserung Ihres redaktionellen Workflows können Sie auch einige andere Tipps im WordPress Block-Editor nutzen, um Ihren Prozess der Inhaltserstellung zu optimieren.

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

Sie können den Block-Editor leicht beherrschen, indem Sie sich die Blöcke merken, die Sie auf Ihrer Website am häufigsten verwenden werden, wie Absatz-, Bild-, Überschriften- oder Button-Blöcke.

Sobald Sie das getan haben, können Sie Ihre Ansicht so anordnen, dass die Werkzeugleiste oben auf der Seite angezeigt wird. Sie können sogar den ablenkungsfreien Modus verwenden, um Ablenkungen wie das Blockpanel, das Blockmenü, die WordPress-Admin-Seitenleiste und mehr zu entfernen.

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

Deactivate the distraction free mode

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

Weitere Informationen finden Sie in unserer Liste mit den besten Tipps für den Umgang mit dem WordPress-Inhaltseditor.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man einen wiederverwendbaren Block im WordPress Block-Editor erstellt. Vielleicht interessiert Sie auch unsere Anleitung für Anfänger, wie man eine WordPress Homepage bearbeitet, oder unsere Expertenauswahl für die besten Gutenberg-freundlichen WordPress Themes.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

29 KommentareEine Antwort hinterlassen

  1. Jiří Vaněk

    Thank you for this article. In this way, I created several blocks in Gutenberg, which I add under articles by category. But I searched for a while in the settings, because I couldn’t find „reusable block“ according to the instructions, but then I understood that this function was only renamed.

  2. David

    In the drop down menu as describe when hitting the three dots. I did not see create reuasble block. I would have love to take a screenshot to show you what my drop down menu shows, but it is not allow here. What are my alternatives.

    • WPBeginner Support

      There was a recent naming change, you would want to use create pattern from the dropdown and we will look to update this article soon :)

      Admin

  3. Johnny Rodriguez

    How can I add a featured image to a reusable block?

    • WPBeginner Support

      Featured images are for post types and not individual blocks at the moment. You can certainly add an image block if you wanted to add an image in the content.

      Admin

  4. Angie

    I’m trying to create a reusable block with several lines of text, however, when I add a new line of text, it creates a new block. I need all of the text in one block. How do I do this?

    • WPBeginner Support

      If you use shift enter to go to your next line instead of only using enter you should stay within the block.

      Admin

  5. Julius Gashumba

    Convert to Regular Block has been changed. It no longer appears where it used to be. Any ideas?

    • WPBeginner Support

      When hovering over the block, you should see the convert option :)

      Admin

  6. Chika

    All is well here. However, what I need is just the color background on my my reusable block so that I can type whatever I want whenever I use it.

    If I change the reusable block back to normal block before making changes, the background color disappears. This is not what I want.

    Is there a way to do that?

  7. Charles Burns

    Is there a way to save just the formatting of a block I can use again?
    Say, for instance, I spend time changing the colour and styling options of a particular block and want to reuse those options with different content each time. Is this possible?
    Saving it as a reusable block saves all the content as well.

  8. Cartrell

    Ha! I never even noticed that Add To Reuseable blocks feature was there. Thanks, guys.
    – C. out.

    • WPBeginner Support

      Glad we could show you something new :)

      Admin

  9. Sandra

    Thanks for the great information. How would I add a signature block? Not just a typed name, but an actual signature?

    • WPBeginner Support

      For most sites, an image is used for that type of signature block :)

      Admin

  10. Don

    Thanks for the suggestions and pointing me to your guides.

    After some troubleshooting my problem seems to be related to website hosting. Reusable Blocks now do work as expected with new identical fresh WP installs on different host servers. The only discernible difference between servers is the PHP version.

    • WPBeginner Support

      Thanks for sharing what appears to be the cause of the problem :)

      Admin

  11. Don

    I suddenly lost Reusable Blocks. Other Blocks continue to work but Reusable is no longer a category when creating a new Block. Either is the 3-dot menu option of „Add to Reusable Blocks“ from an existing Block.

    Any suggestions to restore would be appreciated outside of a complete new install.

    • WPBeginner Support

      Glad you liked it :)

      Admin

  12. Rintesh Roy

    This is a great feature!

    • WPBeginner Support

      Glad we could bring it to your attention :)

      Admin

  13. Lee

    Reusable blocks are one of the only good features of the new editor, unfortunately the fact that they can be converted to a regular block negates any positive they have.

    Say you have a call to action, that includes a link. You use that reusable block many times but several times convert it to a regular block. A year later you need to change the link that is in that call to action. You edit the reusable block and the link changes across your site EXCEPT where it was converted to a regular block. Not a big deal if it is only a few times. A much BIGGER deal if it is dozens of authors, and hundreds of posts that converted that reusable block to a regular block.

    Reusable blocks could have helped solve this data management problem but by allowing them to be converted to regular blocks they just make the problem worse. The better solution, surprise surprise, is a shortcode that is easy to edit in the backend and not have to mess with post content.

    • WPBeginner Support

      Hi Lee,

      Reusable blocks are particularly useful in saving block settings, formatting, and content. Now, if a user changes them to a regular block just so they can edit those things, then they should be aware that it is a ‚regular block‘ not a reusable block anymore.

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.