Anleitung für Anfänger: Verwendung von WordPress-Blockmustern

Die Erstellung von WordPress Websites war noch nie so einfach wie heute, und Blockvorlagen haben daran einen großen Anteil. Als wir sie zum ersten Mal entdeckten, sahen wir ihr Potenzial, unseren Arbeitsablauf zu beschleunigen.

Wir verwenden jetzt Vorlagen wie wiederverwendbare Blöcke für CTAs und Buttons für Gutscheinangebote – sie sind für die Erstellung von Inhalten unerlässlich geworden.

Blockvorlagen machen es einfach, professionell aussehende Designs zu erstellen, ohne dass man Programmier- oder Webdesign-Kenntnisse braucht.

Es handelt sich um vorgefertigte Kombinationen von Blöcken, die Sie schnell einfügen und individuell anpassen können, so dass Sie nicht jedes Mal bei Null anfangen müssen.

Ganz gleich, ob Sie Ihre erste WordPress Website erstellen oder schneller arbeiten wollen, dieser Leitfaden für Einsteiger zeigt Ihnen, wie Sie Blockvorlagen finden, verwenden und erstellen können, die bei jedem Projekt Zeit sparen.

Die folgenden Themen werden in diesem Leitfaden behandelt:

Was sind WordPress Block Patterns?

WordPress-Blockmuster sind vorgefertigte Sammlungen von Blöcken, mit denen Sie schnell und effizient individuelle Layouts erstellen können. Sie waren für uns eine große Hilfe bei der Erstellung von Seiten mit knappen Fristen.

Der Block-Editor in WordPress ist intuitiv und ermöglicht es Benutzern, schöne Layouts mit Inhaltsblöcken zu gestalten. Diese umfassen Text, Bilder, Schaltflächen und andere Elemente, die Sie nach Ihren Wünschen anordnen können.

Nicht alle Benutzer haben jedoch die Zeit oder die gestalterischen Fähigkeiten, um Layouts jedes Mal von Grund auf neu zu erstellen. Wir sind selbst mit dieser Herausforderung konfrontiert, und deshalb sind Blockmuster ein so wertvolles Werkzeug in unserem Arbeitsablauf geworden.

Blockmuster bieten eine einfache Lösung. WordPress enthält standardmäßig eine Vielzahl von vorgefertigten Mustern, mit denen sich in Sekundenschnelle professionell aussehende Layouts hinzufügen lassen.

Beliebte WordPress-Themes enthalten oft ihre eigenen benutzerdefinierten Muster. Mit diesen Mustern sparen Sie noch mehr Zeit, da Sie vorgefertigte Designs erhalten, die auf Ihr Theme zugeschnitten sind.

Die Muster können Layouts wie mehrspaltige Designs, Medien- und Textkombinationen, Call-to-Action-Abschnitte, Kopfzeilen und benutzerdefinierte Schaltflächen enthalten. Diese Flexibilität macht sie für eine Vielzahl von Inhaltstypen geeignet.

Weitere Blockmuster finden Sie auch auf der WordPress.org-Website. Wenn Sie gerne entwerfen, können Sie sogar Ihre eigenen Muster erstellen und mit der WordPress-Community teilen.

Als Nächstes zeigen wir Ihnen, wie Sie mit Blockmustern in WordPress beeindruckende Layouts für Ihre Website erstellen können.

Verwendung von Blockmustern in WordPress

Standardmäßig verfügt WordPress über mehrere nützliche Vorlagen für Blöcke, die Sie auf Ihrer Website verwenden können. Ihr WordPress Theme und einige Plugins können ebenfalls Vorlagen hinzufügen.

Um Blockmuster zu verwenden, müssen Sie den WordPress-Beitrag oder die Seite bearbeiten, auf der Sie das Blockmuster verwenden möchten.

Klicken Sie im Bearbeitungsbildschirm für Beiträge auf die Schaltfläche Block hinzufügen [+], um die Blockeinfügemaschine zu öffnen. Wechseln Sie von hier aus zur Registerkarte “Muster”, um die verfügbaren Blockmuster anzuzeigen.

Sie können nach unten scrollen, um die verfügbaren Blockmuster zu sehen.

Sie können auch Vorlagen in verschiedenen Kategorien anzeigen, z. B. Hervorgehobene, Buttons, Spalten, Header und mehr.

Alternativ können Sie auch auf die Schaltfläche “Alle Muster erkunden” klicken, um sich die Blockmuster anzusehen.

Hier können Sie größere Vorschauen in einem Popup sehen.

Wenn Sie eine Vorlage gefunden haben, die Sie ausprobieren möchten, klicken Sie einfach darauf, um sie in den Inhaltsbereich Ihres Beitrags oder Ihrer Seite einzufügen.

Die Vorlage erscheint im Editor mit Platzhalterinhalten, die Sie bearbeiten und durch Ihre eigenen ersetzen können.

Zeigen und klicken Sie einfach auf einen beliebigen Block innerhalb der Vorlage, um den Inhalt nach Ihren Erfordernissen zu bearbeiten und zu ändern.

Sie haben weiterhin alle Optionen, die Sie normalerweise für jeden Block haben. Wenn es sich zum Beispiel um einen Cover-Block handelt, können Sie die Cover-Farbe oder das Hintergrundbild ändern.

Sie können so viele Vorlagen hinzufügen, wie Sie für Ihren Blog-Beitrag oder Ihre Seite benötigen. Sie können eine Vorlage auch löschen, um sie aus einem Beitrag oder einer Seite zu entfernen, so wie Sie jeden WordPress-Block löschen würden.

Mit Hilfe von Blockvorlagen können Sie schnell schöne Layouts für Ihre Artikel und WordPress Websites erstellen.

Letztlich helfen Ihnen Vorlagen, Zeit zu sparen, die Sie sonst jedes Mal, wenn Sie einen Header, eine Galerie, Buttons usw. hinzufügen müssen, mit der manuellen Anordnung der Blöcke verbringen würden.

Erstellen von Vorlagen im Block-Editor

WordPress macht es super einfach, Vorlagen im Block-Editor zu erstellen, die Sie später wieder verwenden können.

Wenn Sie einen Beitrag oder eine Seite bearbeiten, wählen Sie einfach die Blöcke aus, die Sie in Ihr Muster aufnehmen möchten, und klicken Sie auf “Muster erstellen”.

Sie können mehrere Blöcke auswählen, indem Sie die Umschalttaste auf Ihrer Tastatur drücken und sie anklicken.

Wenn Ihre Blöcke jedoch so angeordnet sind, dass ihre Auswahl erschwert wird, können Sie die Listenanzeige unter dem Tab Dokumentenübersicht verwenden.

Wenn Sie eine Vorlage erstellen, wird ein Popup-Fenster angezeigt.

Sie müssen einen Namen für Ihre Vorlage angeben und eine Kategorie wählen.

Darunter sehen Sie einen Schalter, mit dem Sie die Vorlage synchronisiert oder unsynchronisiert lassen können.

Synchrone Vorlagen: Wenn Sie oder andere Benutzer die Vorlage bearbeiten, werden diese Änderungen bei der nächsten Verwendung der Vorlage gespeichert.

Unsynchronisierte Patterns: Änderungen an diesen Mustern, die nach dem Einfügen in einen Beitrag oder eine Seite vorgenommen werden, haben keine Auswirkungen auf das ursprüngliche Muster.

Klicken Sie auf die Schaltfläche “Erstellen”, um Ihr Muster zu speichern.

Wenn Sie diese Vorlage das nächste Mal verwenden möchten, brauchen Sie nur nach dem Namen oder der Kategorie im Inserter zu suchen.

Erstellen von Vorlagen im Website-Editor

Wenn Sie ein Block-Theme mit vollständiger Unterstützung des Website-Editors verwenden, können Sie Vorlagen auch im Website-Editor erstellen.

Öffnen Sie den Website-Editor, indem Sie die Seite Design ” Editor aufrufen.

Sie befinden sich nun in der Oberfläche des Website-Editors.

Klicken Sie in der linken Seitenleiste auf “Muster”, um fortzufahren.

Sie sehen alle verfügbaren Muster und Kategorien.

Um ein neues Muster zu erstellen, klicken Sie auf die Schaltfläche Hinzufügen [+] und wählen Sie dann “Muster erstellen”.

Daraufhin wird ein Popup-Fenster angezeigt, in dem Sie einen Namen für Ihre Vorlage eingeben, eine Kategorie auswählen und entscheiden müssen, ob die Vorlage synchronisiert oder nicht synchronisiert werden soll.

Klicken Sie auf “Erstellen”, um fortzufahren.

WordPress erstellt für Sie eine leere Leinwand, auf der Sie Ihre Vorlagen erstellen können.

Von hier aus können Sie Blöcke hinzufügen, um Ihre Vorlage zu gestalten.

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche “Speichern” zu klicken, um Ihr Muster zu speichern.

Vorlagen in WordPress verwalten

Wenn Sie ein Block-Theme mit vollständiger Unterstützung des Website-Editors verwenden, können Sie Vorlagen im Editor der Website verwalten.

Öffnen Sie den Website-Editor, indem Sie die Seite Design ” Editor aufrufen.

In der Ansicht “Vorlagen” können Sie auf eine Vorlage klicken, um sie zu bearbeiten. Sie können auch auf das Drei-Punkte-Menü neben einer Vorlage klicken, um sie zu duplizieren, zu exportieren oder zu löschen.

Um alle Ihre Muster zu verwalten, klicken Sie auf die Registerkarte “Alle meine Muster verwalten” in der Seitenleiste.

Daraufhin wird eine Liste mit allen Ihren Vorlagen angezeigt. Jetzt können Sie sie bearbeiten, exportieren oder löschen.

Wenn Sie ein klassisches Theme verwenden (WordPress-Themes, die den vollständigen Site-Editor nicht unterstützen), können Sie die Muster auf der Seite Erscheinungsbild ” Muster verwalten.

Von hier aus können Sie Ihre Vorlagen hinzufügen, löschen und exportieren.

Denken Sie daran, dass sogar einige klassische Themes wie Hestia jetzt Vorlagen ähnlich wie bei Themes mit vollständiger Website-Bearbeitung verwalten, während andere noch die ältere Schnittstelle verwenden, die im Screenshot unten gezeigt wird.

Wie Sie die Vorlagen für Blöcke verwalten, hängt also wirklich von dem Theme ab, das Sie verwenden.

Weitere Blockmuster zur Verwendung auf Ihrer Website finden

WordPress verfügt standardmäßig über einige häufig verwendete Blockmuster. WordPress-Themes können auch ihre eigenen Muster zu Ihrer Website hinzufügen.

Auf Ihrer Website finden Sie jedoch weitaus mehr Vorlagen als die, die im Inserter verfügbar sind.

Gehen Sie einfach auf die Website WordPress Patterns Directory, um viele weitere Blockmuster zu sehen.

Hier finden Sie Blockmuster, die von der WordPress-Community eingereicht wurden.

Um eines dieser Blockmuster zu verwenden, klicken Sie einfach auf das Muster und dann auf die Schaltfläche “Muster kopieren”.

Als Nächstes müssen Sie zu Ihrem WordPress-Blog zurückkehren und den Beitrag oder die Seite bearbeiten, in die Sie dieses Blockmuster einfügen möchten.

Klicken Sie im Bearbeitungsbildschirm einfach mit der rechten Maustaste und wählen Sie im Browsermenü “Einfügen” oder drücken Sie STRG+V (Befehl + V auf dem Mac).

Erstellen und Weitergeben Ihrer Vorlagen für Blöcke

Möchten Sie Ihre eigenen WordPress-Blockvorlagen erstellen und sie mit der Welt teilen?

Mit WordPress ist es ganz einfach, Blockmuster zu erstellen und sie auf Ihren eigenen Websites zu verwenden oder sie mit allen WordPress-Nutzern auf der ganzen Welt zu teilen.

Besuchen Sie einfach die Website des WordPress-Musterverzeichnisses und klicken Sie auf den Link “Neues Muster”.

Hinweis: Sie müssen sich anmelden oder ein kostenloses WordPress.org-Konto erstellen, um Ihre Muster zu speichern.

Sobald Sie angemeldet sind, gelangen Sie zur Seite für den Blockmuster-Editor. Er ist identisch mit dem Standard-WordPress-Block-Editor und Sie können ihn verwenden, um Ihr Muster zu erstellen.

Fügen Sie einfach Blöcke hinzu, um Ihr Musterlayout zu erstellen.

Sie können Layout-Blöcke wie Gruppe, Cover, Galerie und andere verwenden, um Ihr Layout zu organisieren.

Es gibt auch lizenzfreie Bilder, die Sie in Ihren Medienblöcken verwenden können. Mit der WordPress-Mediathek können Sie diese Bilder leicht finden und in Ihren Mustern verwenden.

Wenn Sie mit Ihrem Blockmuster zufrieden sind, können Sie es als Entwurf speichern oder an das Musterverzeichnis senden.

Bevor Sie Ihre Vorlage für das Verzeichnis der Vorlagen einreichen, vergewissern Sie sich, dass Sie die Richtlinien für das Verzeichnis der Vorlagen gelesen haben.

Sie können alle Ihre Blockmuster verwalten, indem Sie auf den Link “Meine Muster” klicken. Dort werden alle Blockmuster angezeigt, die Sie freigegeben haben, Musterentwürfe und Muster, die Sie favorisiert haben.

Wenn Sie nur Blockvorlagen für Ihren eigenen Gebrauch erstellen möchten, können Sie sie als Entwürfe speichern. Kopieren Sie sie dann von der Seite “Meine Vorlagen” und fügen Sie sie auf Ihrer WordPress-Website ein.

Manuelles Erstellen von WordPress-Blockmustern

Sie können auch manuell Vorlagen erstellen und diese in Ihr WordPress Theme oder ein individuelles Snippets Plugin wie WPCode einfügen.

Erstellen Sie einfach einen neuen Beitrag oder eine neue Seite in WordPress. Verwenden Sie im Inhaltsbereich Blöcke, um ein benutzerdefiniertes Layout oder eine Blocksammlung zu erstellen, die Sie als Muster speichern möchten.

Wechseln Sie danach in den Code Editor Modus.

Von hier aus müssen Sie alle Inhalte kopieren, die Sie im Code Editor sehen.

Öffnen Sie dann einen einfachen Texteditor wie Notepad und fügen Sie den Code ein. Sie werden ihn im nächsten Schritt benötigen.

Jetzt können Sie Ihre Blöcke als Vorlage registrieren.

Kopieren Sie dazu einfach den folgenden Code und fügen Sie ihn in die Datei functions.php Ihres Themes oder in ein Code-Snippets-Plugin wie das kostenlose WPCode-Plugin (empfohlen) ein.

Weitere Einzelheiten finden Sie in der vollständigen Anleitung zum Hinzufügen von individuellem Code in WordPress.

function wpb_my_block_patterns() {
    register_block_pattern(
        'my-plugin/my-awesome-pattern',
        array(
            'title'       => __( 'Two column magazine layout', 'my-theme'),
            'description' => _x( 'A simple magazine style two-column layout with large image and stylized text', 'my-theme' ),
            'categories'  => array( 'columns' ),
            'content'     => ' Your block content code goes here'
            )
    );
}
add_action( 'init', 'wpb_my_block_patterns' );

Kopieren Sie nun die Rohdaten des Blocks, die Sie zuvor kopiert haben, und fügen Sie sie als Wert für den Inhaltsparameter ein. Mit anderen Worten, Sie müssen den Text “Ihr Blockinhaltscode kommt hier hin” durch Ihren Blockcode ersetzen. Achten Sie darauf, dass die einfachen Anführungszeichen, die den Text umgeben, erhalten bleiben.

Vergessen Sie schließlich nicht, den Titel und die Beschreibung zu ändern und die Änderungen zu speichern.

Sie können nun Ihre Website besuchen und einen Beitrag oder eine Seite bearbeiten. Ihre neu registrierte Vorlage erscheint im Inserter für Blöcke.

So entfernen Sie eine Blockvorlage in WordPress

Sie können jedes Blockmuster in WordPress leicht entfernen oder deregistrieren. Nehmen wir an, Sie möchten das Blockmuster, das Sie im obigen Beispiel erstellt haben, entfernen.

Kopieren Sie einfach den folgenden Code und fügen Sie ihn in die Datei functions.php Ihres Themes oder in WPCode ein:

function wpb_unregister_my_patterns() {
  unregister_block_pattern( 'my-plugin/my-awesome-pattern' );
}
add_action( 'init', 'wpb_unregister_my_patterns' );

In diesem Beispiel ist "my-plugin/my-awesome-pattern" der Name der Vorlage, die wir bei der Registrierung verwendet haben.

Sie können diesen Code verwenden, um die Registrierung eines beliebigen Blockmusters aufzuheben, das von Ihrem Thema oder einem Plugin erstellt wurde. Alles, was Sie wissen müssen, ist der Name, mit dem Sie das Muster registriert haben.

Grundlegende WordPress-Muster entfernen

Die grundlegenden WordPress Vorlagen sind für alle Benutzer von WordPress verfügbar. Das bedeutet, dass sie möglicherweise überbeansprucht werden und nicht einmal zum Rest Ihres WordPress Themes passen.

Wenn Sie ein Muster nicht verwenden möchten, können Sie es einfach vermeiden, es zu Ihrem Inhalt hinzuzufügen. Wenn Sie jedoch eine WordPress-Website mit mehreren Autoren betreiben, möchten Sie vielleicht verhindern, dass alle Benutzer diese Kernmuster verwenden.

Um alle WordPress-Kernmuster zu entfernen, müssen Sie den folgenden Code in die Funktionsdatei Ihres Themes oder in den WPCode einfügen:

remove_theme_support( 'core-block-patterns' );

Was ist aus den wiederverwendbaren Blöcken geworden?

Vorlagen für Blöcke und wiederverwendbare Blöcke zielten beide darauf ab, ein ähnliches Problem zu lösen: den Benutzern Optionen zum einfachen Hinzufügen häufig verwendeter Blöcke zu bieten.

Um dies zu beheben, hat das Core WordPress-Team wiederverwendbare Blöcke in Vorlagen zusammengefasst.

Um die gleiche Funktionalität wie bei wiederverwendbaren Blöcken zu haben, können Sie jetzt synchronisierte Vorlagen verwenden. Wenn Sie oder andere Benutzer die Vorlage bearbeiten, werden diese Änderungen gespeichert, wenn die Vorlage das nächste Mal verwendet wird.

Häufig beantwortete Fragen

Hier finden Sie einige Fragen, die unsere Besucher häufig zu Vorlagen für Blöcke stellen.

Wo kann ich weitere Vorlagen für Blöcke finden?

Neben der Kurzmitteilung der Standardvorlagen in WordPress können Sie das Verzeichnis der WordPress-Vorlagen online erkunden, um noch mehr Optionen zu finden, die von der Community erstellt wurden.

Können Blockvorlagen meine Website verlangsamen?

Nein, Vorlagen für Blöcke selbst haben keinen Einfluss auf die Geschwindigkeit Ihrer Website. Sie sind eine Möglichkeit, Inhalte zu strukturieren, aber stellen Sie sicher, dass Sie für die beste Leistung optimierte Bilder und Blöcke verwenden.

Weitere Tipps finden Sie in unserem ultimativen Leitfaden zu Geschwindigkeit und Leistung von WordPress.

Zusätzliche Ressourcen

Wenn Sie das Design Ihrer WordPress-Website anpassen möchten, werden Sie die folgenden Ressourcen nützlich finden:

• Wie Sie ganz einfach ein benutzerdefiniertes WordPress-Theme erstellen (ohne Code)
• Wie man eine WordPress-Website neu gestaltet (Anleitung für Anfänger)
• Häufige Probleme mit dem WordPress-Block-Editor und wie man sie behebt
• Wie man das WordPress-Kommentarformular gestaltet (ultimative Anleitung)
• Wie man die Hintergrundfarbe des WordPress-Block-Editors anpasst

Wir hoffen, dass dieser Leitfaden Ihnen geholfen hat, WordPress-Vorlagen für Ihre Website zu verwenden. Vielleicht interessieren Sie sich auch für unseren Leitfaden zur Beherrschung des WordPress Block-Editors oder werfen Sie einen Blick auf diese praktischen WordPress Shortcuts, um produktiver zu sein.

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.