Springe zum Hauptinhalt

So erstellen und verwenden Sie wiederverwendbare Gutenberg-Blöcke

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 701.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Eine der nützlichsten (und am wenigsten genutzten) Funktionen des WordPress-Blockeditors (auch als Gutenburg bekannt) ist der wiederverwendbare Block. Wenn Sie wissen Divi Bei anderen Seitenerstellern haben wiederverwendbare Blöcke dieselbe Funktion wie globale Module. Dies sind Blöcke (oder Gruppen von Blöcken), die Sie einmal konfigurieren, dann aber wiederverwenden können. 

Sie können sie über mehrere Seiten und Beiträge hinweg einfügen, ohne sie erneut bearbeiten zu müssen. Wenn Sie sie erneut ändern möchten, können die Änderungen standortweit erfolgen, wodurch Sie über die gesamte Lebensdauer einer Website Stunden sparen. Lassen Sie uns also alle Möglichkeiten untersuchen, wie Sie Ihre wiederverwendbaren WordPress-Blöcke verwalten können.

So erstellen Sie einen wiederverwendbaren Block in WordPress

Das Erstellen eines wiederverwendbaren Blocks in WordPress ist relativ einfach. In jedem Beitrag, den Sie mit dem Block-Editor bearbeiten (dies ist die Standardeinstellung in WP 5.x, sofern Sie nicht das Plugin verwenden Klassischer Editor ) können Sie jeden gewünschten Block wiederverwendbar machen. Klick auf das Dropdown-Liste à drei Punkte in den Block-Hover-Einstellungen und wählen Sie Zu wiederverwendbaren Blöcken hinzufügen .

zu wiederverwendbaren Blöcken hinzufügen

Der Editor fordert Sie auf, den neuen Block für den späteren Abruf zu benennen. Stellen Sie sicher, dass Sie ihm einen unvergesslichen Namen für die Funktion geben, die er auf Ihrer Website erfüllt. Sowie verwandte Artikel oder Titelbild für Blog-Beiträge oder etwas genauso Beschreibendes.

Benennen Sie Ihren neuen Block

Wenn Sie beim Erstellen des wiederverwendbaren Blocks einen Fehler machen (oder beim Erstellen nur einen Fehler gemacht haben), können Sie erneut auf die Parameter in der Dropdown-Liste klicken und auf klicken Wiederverwendbare Blöcke löschen . Mit dieser Option wird der gesamte Block aus der Datenbank gelöscht, und Sie können den obigen Vorgang wiederholen, um ihn bei Bedarf erneut zur Sammlung hinzuzufügen.

Wiederverwendbare WordPress-Blöcke

Außerdem können Sie nach dem Speichern einfach auf den Block selbst klicken, um die Schaltfläche zu finden. Veränderung .

Ändern Sie einen wiederverwendbaren Absatz

Für den Absatzblock in diesem Beispiel haben Sie die Möglichkeit, ihn umzubenennen. Die Einstellungen für jeden Block sind jedoch unterschiedlich. Für eine Bildbox erhalten Sie zusätzliche Optionen wie das Einfügen einer anderen Datei aus Ihrer Medienbibliothek oder das Hochladen einer neuen Datei sowie die Ausrichtung oder verknüpfte URL.

wiederverwendbare Bildoptionen

Dieser Prozess funktioniert mit allen wiederverwendbaren Blöcken, die Sie erstellen. Aber denken Sie daran Alle Änderungen, die Sie auf diese Weise an einem wiederverwendbaren Block vornehmen, gelten für alle anderen Instanzen dieses Blocks auf Ihrer Site . Wenn Sie also das Bild in einem Block ändern, wird das neue Bild überall angezeigt.

So fügen Sie wiederverwendbare Blöcke ein

Die Verwendung von wiederverwendbaren Blöcken in WordPress ist eigentlich sehr einfach und unkompliziert. Im Blockeditor können Sie auf ein beliebiges Vorkommen des + innerhalb eines Kreises klicken, um die Registerkarte zu finden Verfügbar . Die Schaltfläche + wird rechts neben einem Block, unterhalb eines Blocks und oben links auf dem Bildschirm angezeigt.

Suchen Sie die wiederverwendbare Registerkarte im Editor

Wenn Sie die wiederverwendbaren Blöcke, die Sie erstellen, in verschiedene Beiträge und Seiten einfügen, werden sie möglicherweise auch auf der Registerkarte angezeigt Am häufigsten verwendet , die bei jedem Drücken der Taste + oben in der Liste angezeigt wird.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Wiederverwendbare WordPress-Blöcke

Diese ändern sich, wenn Sie verschiedene Blöcke verwenden. Wenn Sie jedoch denselben wiederverwendbaren Block verwenden, z. B. als Fußzeile für jeden Blog-Beitrag, werden sie hier häufig angezeigt.

So verwalten Sie alle wiederverwendbaren Blöcke in WordPress

Am unteren Rand der Registerkarte Verfügbar Sie finden einen Link Verwalten Sie alle wiederverwendbaren Blöcke . Wenn Sie auf diesen Link klicken, gelangen Sie zu einer vertrauten Seite, auf der jeder von Ihnen erstellte wiederverwendbare Block aufgelistet ist. Die Liste sieht ziemlich genau wie die Standard-WordPress-Liste der Beiträge und Seiten aus.

Wiederverwendbare WordPress-Blöcke

Beim Anzeigen der Liste sehen Sie einige wichtige Optionen. Import aus JSON , Export im JSON-Format et Veränderung .

Verwendung Bearbeiten ist genau das gleiche wie oben für die Bearbeitung eines Blocks. Nur anstatt sich in einem bestimmten Artikel zu befinden, wird der Block in einem eigenen Artikeltyp-Editor angezeigt, in dem Sie ihn und nur ihn aktualisieren können. Auch hier werden alle an diesem Block vorgenommenen Änderungen standortweit auf jede Instanz angewendet.

Wiederverwendbare WordPress-Blöcke

Für einen Export im JSON-Format , klicken Sie auf den Knopf (3) In einem Dialogfeld (abhängig von Ihren Browsereinstellungen) können Sie einen Speicherort für das Herunterladen der generierten JSON-Datei auswählen. Die Datei selbst ist einfaches JSON. Es zeigt den Dateityp (einen Block), den Titel, den Sie beim Bearbeiten oder Erstellen angegeben haben, und den tatsächlichen HTML-Code, der von WordPress eingefügt wird, um den Block und seinen Inhalt im Frontend zu rendern Der Seite.

Wiederverwendbare WordPress-Blöcke

Import aus JSON ist genauso einfach: Sie finden die JSON-Datei auf Ihrem Computer und laden sie wie jeden anderen Anhang oder jede andere Datei herunter.

Wiederverwendbare WordPress-Blöcke

Sobald Sie drücken Import wird es in Ihrer Liste der wiederverwendbaren Blöcke angezeigt. Beachten Sie jedoch, dass, wenn Sie bereits einen Block mit demselben Namen haben (in diesem Fall die wiederverwendbarer Block 1 ), das neue Block importiert wird nicht umbenannt. Sie müssen es manuell tun, um sie auseinander zu halten.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Wiederverwendbare WordPress-Blöcke

Warum wiederverwendbare Blöcke importieren und exportieren?

Es gibt eine Reihe von Gründen für den Import und Export, die wichtigsten sind jedoch Sicherungs- und Portabilitätszwecke. Möglicherweise möchten Sie eine Sicherungskopie aller Blöcke und Inhalte erstellen, die Sie für die Bereitstellung auf Ihrer Website als nützlich erachten. Portabilität, gemeinsame Nutzung und Verkauf sind ebenfalls wichtig.

Wenn Sie einen Block auf einer anderen Site verwenden müssen. Mit einem Teamkollegen teilen. Oder allein als wiederverwendbarer Block für Ihre Kunden zu verkaufen. Genau wie bei uns Layout-Packs wöchentlich für Divi Durch das Importieren und Exportieren von Blöcken haben Sie die Möglichkeit, den Generator auf verschiedene Arten zu erweitern. Darüber hinaus, wenn Sie die Option verwenden Gruppenblöcke (siehe unten) können Sie ganze Modelle und Layouts als wiederverwendbare Blöcke im JSON-Format importieren und exportieren.

So erstellen Sie wiederverwendbare Blockgruppen in WordPress

Durch die Erstellung einer Gruppe wiederverwendbarer Blöcke können alle Funktionen wiederverwendbarer Blöcke hervorgehoben werden. Anstatt ein einzelnes Bild oder einen einzelnen Absatz oder eine Überschrift zu haben, die Sie global einfügen können, können Sie Gutenberg-Blöcke auch gruppieren und als einzelnen wiederverwendbaren Block speichern. Dies bedeutet, dass Sie beispielsweise Titelblock, Absatzblock, Bildblock und benutzerdefinierten HTML-Block bündeln können, um ein globales E-Mail-Mitgliedschaftsformular für alle Ihre Publisher-Beiträge zu erhalten. Block.

Um eine Gruppe wiederverwendbarer WordPress-Blöcke zu erstellen, klicken Sie einfach bei gedrückter Umschalttaste auf die Blöcke, um sie der Gruppe hinzuzufügen. Alle ausgewählten Blöcke werden mit einem blauen Rand hervorgehoben.

Wiederverwendbare WordPress-Blöcke

Dann drückst du die Taste Transformator (2) und wählen Sie Gruppe in der Dropdown-Liste (3) . An diesem Punkt sehen Sie, wie die Blöcke zu einem Block zusammengeführt werden. Anschließend verwandeln Sie den Gruppenblock in einen wiederverwendbaren Block, wie Sie es oben mit jedem anderen einzelnen Block getan haben.

Wiederverwendbare WordPress-Blöcke

Diese neue Gruppe wird dann in der Liste aller wiederverwendbaren Blöcke und unter der Registerkarte angezeigt. Verfügbar Wenn Sie einer Publikation oder Seite einen neuen Block hinzufügen.

So erstellen Sie eine wiederverwendbare Vorlage

Wir haben bereits erwähnt, dass ein wiederverwendbarer Block in WordPress ein globales Element ist. Dies bedeutet, dass jede an einer Instanz des Blocks vorgenommene Änderung alle anderen Instanzen betrifft. Wenn Sie den Text oder das Bild eines wiederverwendbaren Blocks ändern, gilt diese Änderung für die gesamte Site. Aber du pouvez Verwenden Sie wiederverwendbare Blöcke als Vorlagen, die individuell bearbeitet werden können. Genau wie bei unseren Divi-Layouts können Sie mit dem Blockeditor den allgemeinen Block (oder die Gruppe von Blöcken) Ihrer Bibliothek einfügen und dann den Inhalt einer Veröffentlichung oder einer einzelnen Seite (oder sogar eines Blocks) ändern pro Block) Basis.

Fügen Sie dazu einen wiederverwendbaren Block in den Editor ein, wie oben gezeigt. Drücken Sie die + im Kreis , geh zu Verfügbar Wählen Sie dann den Block aus, den Sie einfügen möchten.

Einfügen eines wiederverwendbaren Blocks für das Modell

Wenn der Block erscheint, Klicken Sie auf die drei Punkte, um das Dropdown-Menü zu öffnen . Wählen In normalen Block konvertieren . Hinweis: nicht auswählen Wiederverwendbare Blöcke löschen .

Wiederverwendbare WordPress-Blöcke

In normalen Block konvertieren gilt nur für dieser einzigartige Block . Wenn Sie verwenden In Standardblock konvertieren Sie teilen WordPress mit, dass dieser einzelne Block (und nur dieser) unabhängig von allgemeinen Änderungen auf der gesamten Website sein soll. Alle Änderungen, die Sie an anderen wiederverwendbaren Blöcken vornehmen, gelten nicht für einen konvertierten Block, und diese Änderungen gelten nicht global.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Die Auswahl von Wiederverwendbare Blöcke löschen Entfernt alles aus dem globalen Verzeichnis. Blöcke, die Sie bereits eingefügt haben, bleiben dort, wo sie sich befinden, teilen jedoch keine globalen Merkmale. Sie können sie auch nicht erneut über die Registerkarte einfügen Verfügbar (was offensichtlich sein kann). Dies würde den Zweck, den wiederverwendbaren Block als Vorlage zu haben, zunichte machen. Wir empfehlen daher nicht, dies zu tun.

Jedoch mit In regulären Block konvertieren Sie können die Basisvorlage für den Block (oder eine Gruppe von Blöcken) einfügen und nur diese bestimmte Instanz aus den globalen Standards entfernen, sodass die ursprüngliche Blockfunktion als Vorlage für andere Veröffentlichungen und wiederverwendbar ist Seiten. Sie können diese Funktion in unserem Tutorial am sehenHinzufügen wiederverwendbarer Divi-Layoutblöcke zu Blog-Posts .

Fazit

Wiederverwendbare Blöcke sind eine der Hauptfunktionen von Gutenberg Block Editor. Durch die Möglichkeit, Blöcke und Inhalte zwischen Websites und Freunden zu teilen und sie als Vorlagen für allgemeine Elemente auf Ihrer Website zu verwenden, kann die Verwendung der Funktion für wiederverwendbare Blöcke Ihre Post-Erstellung und -Design auf die nächste Ebene bringen Ihrer Seite auf ein neues Niveau von Nutzen, Kreativität und Benutzererfahrung.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
0 Aktien
Aktie
tweet
Registrieren