Anfängerleitfaden: So verwenden Sie WordPress-Blockmuster

Das Erstellen von WordPress-Websites war noch nie einfacher, und Blockmuster sind ein wichtiger Teil davon. Als wir sie zum ersten Mal entdeckten, sahen wir ihr Potenzial, unseren Arbeitsablauf zu beschleunigen.

Wir verwenden jetzt Blockmuster wie wiederverwendbare Blöcke für CTAs und Gutscheinangebotsbuttons – sie sind für uns unerlässlich geworden, um Inhalte zu erstellen.

Blockmuster machen es einfach, professionell aussehende Designs zu erhalten, ohne dass Programmier- oder Webdesignkenntnisse erforderlich sind.

Es handelt sich um vorgefertigte Kombinationen von Blöcken, die Sie schnell einfügen und anpassen können, was Ihnen einen Vorsprung verschafft, anstatt jedes Mal von Grund auf neu zu beginnen.

Egal, ob Sie Ihre erste WordPress-Website erstellen oder schneller arbeiten möchten, dieser Leitfaden für Anfänger zeigt Ihnen, wie Sie Blockmuster finden, verwenden und erstellen, die bei jedem Projekt Zeit sparen.

Hier sind die Themen, die wir in dieser Anleitung behandeln werden:

• Was sind WordPress-Blockmuster?
• So verwenden Sie Blockmuster in WordPress
• So erstellen Sie Muster im Block-Editor
• Muster im Website-Editor erstellen
• Muster in WordPress verwalten
• Weitere Blockmuster für Ihre Website finden
• So erstellen und teilen Sie Ihre Blockmuster
• WordPress Block-Muster manuell erstellen
• So entfernen Sie ein Blockmuster in WordPress
• Was ist mit wiederverwendbaren Blöcken passiert?
• Häufig gestellte Fragen
• Zusätzliche Ressourcen

Was sind WordPress-Blockmuster?

WordPress-Blockmuster sind vordefinierte Sammlungen von Blöcken, die Ihnen helfen, benutzerdefinierte Layouts schnell und effizient zu erstellen. Sie haben für uns die Erstellung von Seiten unter Zeitdruck revolutioniert.

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

Allerdings haben nicht alle Benutzer die Zeit oder die Designfähigkeiten, um jedes Mal Layouts von Grund auf neu zu erstellen. Wir standen selbst vor dieser Herausforderung, weshalb Block-Muster ein so wertvolles Werkzeug in unserem Workflow waren.

Blockmuster bieten eine einfache Lösung. WordPress enthält standardmäßig eine Vielzahl von vorgefertigten Mustern, sodass Sie im Handumdrehen professionell aussehende Layouts hinzufügen können.

Beliebte WordPress-Themes enthalten oft ihre eigenen benutzerdefinierten Muster. Diese Muster sparen noch mehr Zeit, indem sie Ihnen vorgefertigte Designs bieten, die auf Ihr Theme zugeschnitten sind.

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

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

Als Nächstes zeigen wir Ihnen, wie Sie Block-Muster in WordPress verwenden, um beeindruckende Layouts für Ihre Website zu erstellen.

So verwenden Sie Blockmuster in WordPress

Standardmäßig wird WordPress mit mehreren nützlichen Blockmustern geliefert, die Sie auf Ihrer Website verwenden können. Ihr WordPress-Theme und einige Plugins können auch ihre eigenen Muster hinzufügen.

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

Klicken Sie auf dem Beitragsbearbeitungsbildschirm auf die Schaltfläche Block hinzufügen [+] , um den Blockeinfüger zu öffnen. Wechseln Sie von hier aus zur Registerkarte „Muster“, um verfügbare Blockmuster anzuzeigen.

Sie können nach unten scrollen, um verfügbare Blockmuster anzuzeigen.

Sie können Block-Muster auch in verschiedenen Kategorien anzeigen, wie z. B. Hervorgehoben, Schaltflächen, Spalten, Kopfzeilen und mehr.

Alternativ können Sie auch auf die Schaltfläche „Alle Muster erkunden“ klicken, um Block-Muster anzuzeigen.

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

Sobald Sie ein Muster gefunden haben, das Sie ausprobieren möchten, klicken Sie einfach darauf, um es in den Inhaltsbereich Ihres Beitrags oder Ihrer Seite einzufügen.

Das Muster wird im Inhaltseditor mit Platzhalterinhalten angezeigt, die Sie bearbeiten und durch Ihre eigenen ersetzen können.

Zeigen Sie einfach auf einen beliebigen Block innerhalb des Musters und klicken Sie darauf, um dessen Inhalt nach Ihren Anforderungen zu bearbeiten und zu ändern.

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

Sie können so viele Muster hinzufügen, wie Sie für Ihren Blogbeitrag oder Ihre Seite benötigen. Sie können ein Muster auch löschen, um es aus einem Beitrag oder einer Seite zu entfernen, genau wie Sie jeden WordPress-Block löschen würden.

Mit Block-Mustern können Sie schnell schöne Layouts für Ihre Artikel und Ihre WordPress-Website erstellen.

Letztendlich helfen Blockmuster, Ihnen Zeit zu sparen, die Sie sonst damit verbringen würden, Blöcke jedes Mal manuell anzuordnen, wenn Sie eine Kopfzeile, eine Galerie, Schaltflächen und mehr hinzufügen müssen.

So erstellen Sie Muster im Block-Editor

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

Wählen Sie beim Bearbeiten eines Beitrags oder einer Seite 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 gedrückt halten und darauf klicken.

Wenn Ihre Blöcke jedoch so angeordnet sind, dass sie schwerer auszuwählen sind, können Sie die Listenansicht unter der Registerkarte „Dokumentenübersicht“ verwenden.

Das Erstellen eines Musters öffnet ein Popup-Fenster.

Sie müssen Ihrem Muster einen Namen geben und eine Kategorie auswählen.

Darunter sehen Sie einen Schalter, um das Muster synchronisiert oder unsynchronisiert zu halten.

Synchronisierte Muster: Wenn Sie oder andere Benutzer das Muster bearbeiten, werden diese Änderungen beim nächsten Mal, wenn das Muster verwendet wird, gespeichert.

Nicht synchronisierte Muster: Änderungen an diesen Mustern, nachdem sie in einen Beitrag oder eine Seite eingefügt wurden, wirken sich nicht auf das ursprüngliche Muster aus.

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

Wenn Sie dieses Muster das nächste Mal verwenden möchten, müssen Sie nur nach seinem Namen oder seiner Kategorie im Block-Inserter suchen.

Muster im Website-Editor erstellen

Wenn Sie ein Block-Theme mit Unterstützung für den vollständigen Website-Editor verwenden, können Sie auch Muster im Website-Editor erstellen.

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

Sie gelangen nun in die Benutzeroberfläche des Website-Editors.

Klicken Sie auf „Muster“ in der linken Seitenleiste, 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“.

Dies öffnet ein Popup, in dem Sie einen Namen für Ihr Muster eingeben, eine Kategorie auswählen und entscheiden müssen, ob das Muster synchronisiert oder unsynchronisiert sein soll.

Klicken Sie auf 'Erstellen', um fortzufahren.

WordPress erstellt eine leere Leinwand, auf der Sie Ihr Muster erstellen können.

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

Vergessen Sie nicht, nach Abschluss auf die Schaltfläche „Speichern“ zu klicken, um Ihr Muster zu speichern.

Muster in WordPress verwalten

Wenn Sie ein Block-Theme mit Unterstützung für den Full Site Editor verwenden, können Sie Muster im Website-Editor verwalten.

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

Auf dem Musterbildschirm können Sie auf ein Muster klicken, um es zu bearbeiten. Sie können auch auf das Drei-Punkte-Menü neben einem Muster klicken, um es zu duplizieren, zu exportieren oder zu löschen.

Um alle Ihre Muster zu verwalten, klicken Sie im Seitenbereich auf die Registerkarte „Alle meine Muster verwalten“.

Dies zeigt Ihnen eine Liste aller Ihrer Muster. Jetzt können Sie sie bearbeiten, exportieren oder löschen.

Wenn Sie ein klassisches Theme verwenden (WordPress-Themes, die den Full Site Editor nicht unterstützen), können Sie Muster verwalten, indem Sie die Seite Design » Muster aufrufen.

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

Beachten Sie, dass selbst einige klassische Themes wie Hestia Muster jetzt ähnlich wie Full Site Editing Themes verwalten, während andere immer noch die ältere Benutzeroberfläche verwenden, die in der folgenden Abbildung gezeigt wird.

Wie Sie Blockmuster verwalten, hängt wirklich vom verwendeten Theme ab.

Weitere Blockmuster für Ihre Website finden

Standardmäßig wird WordPress mit einigen häufig verwendeten Blockmustern geliefert. WordPress-Themes können Ihrer Website auch eigene Muster hinzufügen.

Sie können jedoch weitaus mehr Blockmuster finden, als die im Block-Inserter auf Ihrer Website verfügbaren.

Besuchen Sie einfach die Website WordPress Patterns Directory, um viele weitere Blockmuster anzuzeigen.

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

Um eines dieser Block-Muster zu verwenden, klicken Sie einfach darauf, um das Muster anzuzeigen, und klicken Sie 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.

Auf dem Bearbeitungsbildschirm klicken Sie einfach mit der rechten Maustaste und wählen Sie 'Einfügen' im Browser-Menü oder drücken Sie STRG+V (Befehl + V auf Mac).

So erstellen und teilen Sie Ihre Blockmuster

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

WordPress macht es super einfach, Blockmuster zu erstellen und sie auf Ihren eigenen Websites zu verwenden oder sie mit allen WordPress-Benutzern weltweit zu teilen.

Besuchen Sie einfach die Website des WordPress Pattern Directory 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.

Nach der Anmeldung gelangen Sie zur Seite des Block-Pattern-Editors. Sie ist identisch mit dem Standard-WordPress-Blockeditor und Sie können damit Ihr Pattern erstellen.

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

Sie können Layoutblöcke wie Gruppe, Cover, Galerie und mehr verwenden, um Ihr Layout zu organisieren.

Es gibt auch lizenzfreie Bilder, die Sie in Ihren Medienblöcken verwenden können. Die WordPress-Medienbibliothek ermöglicht es Ihnen, diese Bilder einfach in Ihren Mustern zu finden und zu verwenden.

Wenn Sie mit Ihrem Blockmuster zufrieden sind, können Sie es als Entwurf speichern oder im Musterverzeichnis einreichen.

Bevor Sie Ihr Blockmuster für das Musterverzeichnis einreichen können, stellen Sie sicher, dass Sie die Richtlinien für das Musterverzeichnis gelesen haben.

Sie können alle Ihre Blockmuster verwalten, indem Sie auf den Link „Meine Muster“ klicken. Dort werden alle von Ihnen geteilten Blockmuster, Entwurfsmuster und von Ihnen favorisierten Muster angezeigt.

Wenn Sie Block-Muster nur für Ihren eigenen Gebrauch erstellen möchten, können Sie sie als Entwürfe speichern. Kopieren und fügen Sie sie anschließend von der Seite „Meine Muster“ auf Ihre WordPress-Website ein.

WordPress Block-Muster manuell erstellen

Sie können Blockmuster auch manuell erstellen und sie zu Ihrem WordPress-Theme oder einem benutzerdefinierten Snippet-Plugin wie WPCode hinzufü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 Block-Sammlung zu erstellen, die Sie als Muster speichern möchten.

Wechseln Sie danach in den Code-Editor-Modus.

Von hier aus müssen Sie den gesamten Inhalt kopieren, den Sie im Code-Editor sehen.

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

Jetzt sind Sie bereit, Ihre Blöcke als Muster zu registrieren.

Um dies zu tun, kopieren Sie einfach den folgenden Code und fügen Sie ihn in die functions.php-Datei Ihres Themes oder ein Code-Snippet-Plugin wie das kostenlose WPCode-Plugin (empfohlen) ein.

Weitere Details finden Sie in unserem vollständigen Leitfaden zum Hinzufügen von benutzerdefiniertem 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 rohen Blockdaten, die Sie zuvor kopiert haben, und fügen Sie sie als Wert für den Parameter „content“ ein. Mit anderen Worten, Sie müssen den Text „Your block content code goes here“ durch Ihren Blockcode ersetzen. Achten Sie darauf, die einfachen Anführungszeichen um den Text beizubehalten.

Zuletzt vergessen Sie nicht, den Titel und die Beschreibung zu Ihren eigenen zu ändern und Ihre Änderungen zu speichern.

Sie können jetzt Ihre Website besuchen und einen Beitrag oder eine Seite bearbeiten. Ihr neu registriertes Blockmuster wird im Block-Inserter angezeigt.

So entfernen Sie ein Blockmuster in WordPress

Sie können Blockmuster in WordPress einfach entfernen oder abmelden. Nehmen wir an, Sie möchten das im obigen Beispiel erstellte Blockmuster entfernen.

Alles, was Sie tun müssen, ist den folgenden Code zu kopieren und in die functions.php-Datei Ihres Themes oder in WPCode einzufügen:

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 des Musters, das wir bei der Registrierung verwendet haben.

Sie können diesen Code verwenden, um jedes Blockmuster, das von Ihrem Theme oder einem Plugin erstellt wurde, zu deregistrieren. Alles, was Sie wissen müssen, ist der Name, der zur Registrierung des Musters verwendet wurde.

Kern-WordPress-Muster entfernen

Die Kern-WordPress-Muster sind für alle WordPress-Benutzer verfügbar. Das bedeutet, dass sie überstrapaziert sein könnten und möglicherweise nicht einmal zum Rest Ihres WordPress-Themes passen.

Wenn Sie kein Muster verwenden möchten, können Sie es einfach vermeiden, es zu Ihren Inhalten hinzuzufügen. Wenn Sie jedoch eine WordPress-Seite mit mehreren Autoren betreiben, möchten Sie möglicherweise verhindern, dass alle Benutzer diese Kernmuster verwenden.

Um alle Kern-WordPress-Muster zu entfernen, müssen Sie den folgenden Code zur functions.php-Datei Ihres Themes oder zu WPCode hinzufügen:

remove_theme_support( 'core-block-patterns' );

Was ist mit wiederverwendbaren Blöcken passiert?

Blockmuster und wiederverwendbare Blöcke zielten beide darauf ab, ein ähnliches Problem zu lösen: Benutzern Optionen zu bieten, um häufig verwendete Blöcke einfach hinzuzufügen.

Um dies zu beheben, hat das Kern-WordPress-Team wiederverwendbare Blöcke in Muster integriert.

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

Häufig gestellte Fragen

Hier sind einige Fragen, die unsere Leser häufig zu Blockmustern stellen.

Wo finde ich zusätzliche Blockmuster?

Neben den Standardmustern in WordPress können Sie das WordPress Patterns Directory online durchsuchen, um noch mehr von der Community erstellte Optionen zu finden.

Können Block-Muster meine Website verlangsamen?

Nein, Block-Muster selbst beeinträchtigen nicht die Geschwindigkeit Ihrer Website. Sie sind eine Möglichkeit, Inhalte zu strukturieren, aber stellen Sie sicher, dass Sie optimierte Bilder und Blöcke für beste Leistung verwenden.

Tipps finden Sie in unserem ultimativen Leitfaden zur WordPress-Geschwindigkeit und -Leistung.

Zusätzliche Ressourcen

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

• So erstellen Sie ganz einfach ein benutzerdefiniertes WordPress-Theme (ohne Code)
• So gestalten Sie eine WordPress-Website neu (Anfängerleitfaden)
• Häufige Probleme mit dem WordPress Block Editor und wie man sie behebt
• So gestalten Sie das WordPress-Kommentarformular (ultimativer Leitfaden)
• So passen Sie die Hintergrundfarbe des WordPress Block Editors an

Wir hoffen, dieser Leitfaden hat Ihnen geholfen zu lernen, wie Sie WordPress Block-Muster auf Ihrer Website verwenden. Möglicherweise möchten Sie auch unseren Leitfaden zum Meistern des WordPress Block-Editors ansehen oder sich diese praktischen WordPress-Shortcuts ansehen, um produktiver zu sein.

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.