So erstellen Sie einen wiederverwendbaren Divi-Layout-Block für Gutenberg-Blog-Posts

Der Divi-Layout-Block ist weiterhin ein nützliches Upgrade des Divi-Themes, der es uns ermöglicht, ein beliebiges Divi-Layout zu einem Blog-Post innerhalb des Gutenberg-Editors hinzuzufügen. Wir können in Gutenberg sogar einen Divi-Layout-Block in einen wiederverwendbaren Block umwandeln, genau wie jeden anderen WordPress-Block. Dies öffnet die Tür, um einige hilfreiche Divi-Layout-Designs in den normalen Ablauf des Schreibens eines Beitrags in Gutenberg zu integrieren.

In diesem Tutorial zeigen wir, wie Sie einen wiederverwendbaren Divi-Layout-Block für Gutenberg-Blog-Posts erstellen. Um dies zu veranschaulichen, werden wir für diesen Beitrag einen Abschnittsteiler für unser Beispiel eines wiederverwendbaren Divi-Layoutblocks erstellen. Aber wir können dieselbe Technik leicht anwenden, um einen wiederverwendbaren Divi-Layoutblock für fast alles aus dem Divi-Builder zu erstellen.

Lass uns anfangen.

Erstellen eines Divi-Layout-Blocks für einen Gutenberg-Blog-Post

Erstelle oder bearbeite einen Blogbeitrag

Um zu beginnen, müssen wir einen neuen Blogbeitrag erstellen oder einen bestehenden bearbeiten. In diesem Beispiel fügen wir dem Beitragstitel und -text mithilfe einiger Überschriften- und Absatzblöcke simulierten Inhalt hinzu. Fügen Sie dann ein vorgestelltes Bild hinzu und wählen Sie „Keine Seitenleiste“ für das Seitenlayout unter den Divi-Seiteneinstellungen.

Inline-Divi-Layout-Block hinzufügen

Sobald wir den Großteil des Beitrags erstellt haben, müssen wir nur noch einen neuen Divi-Layout-Block an einer beliebigen Stelle im Inhaltsbereich des Beitrags hinzufügen.

Um es hinzuzufügen, bewegen Sie den Mauszeiger über den Bereich, in dem wir das E-Mail-Optin hinzufügen möchten. Klicken Sie dann auf das blaue Plus-Symbol, um einen neuen Block hinzuzufügen. Wählen Sie in der Popup-Blockliste den Divi-Layout-Block aus.

Neues Layout innerhalb des Divi-Layout-Blocks erstellen

Sobald der Divi-Layout-Block ausgewählt wurde, haben wir die Möglichkeit, entweder „Neues Layout erstellen“ oder „Aus Bibliothek laden“ zu wählen. Da wir für unser Beispiel einen neuen Teiler erstellen müssen, wählen Sie die Option „Neues Layout erstellen“.

Entwerfen Sie ein Layout mit dem Divi Layout Block Editor

Sobald wir die Schaltfläche Neues Layout erstellen ausgewählt haben, können wir unser Divi-Layout im Layoutblock-Editor entwerfen.

In diesem Beispiel erstellen wir einen benutzerdefinierten Separator oder Teiler mit den Abschnittsformteilern von Divi und einem Hintergrund mit Farbverlauf. Dies ist ein Designelement, das wir in einen wiederverwendbaren Layoutblock verwandeln können, um Abschnittsteiler innerhalb eines Gutenberg-Posts bequem hinzuzufügen.

Um das Abschnittstrenner-Design zu erstellen, öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

• Farbverlauf Hintergrund links: #ddd6f3
• Farbverlauf Hintergrund rechts: #faaca8
• Verlaufsrichtung: 90deg
• Startposition: 30%

• Top Divider Style: siehe Screenshot
• Farbe des oberen Teilers: #ffffff
• Höhe des oberen Teilers: 50px

• Unterteiler-Stil: siehe Screenshot
• Farbe des unteren Teilers: #ffffff
• Höhe des unteren Teilers: 50px
• Unterteiler Flip: Horizontal

• Höhe: 100px
• Padding: 0px oben, 0px unten

Wenn das Design fertig ist, stellen Sie sicher, dass Sie den Divi-Layoutblock speichern.

Jetzt wird der Divi-Layout-Block-Abschnittsteiler im WordPress-Post-Editor angezeigt.

Beachten Sie, dass die Abstände oberhalb und unterhalb des Divi-Layouts des Layoutblocks im Backend größer erscheinen können als im Frontend.

Jetzt können wir diesen Divi-Layoutblock in einen wiederverwendbaren Layoutblock umwandeln, um das Hinzufügen desselben Abschnittstrenners in zukünftigen Beiträgen zu vereinfachen.

Aber bevor wir das tun, kann es hilfreich sein zu wissen, was ein wiederverwendbarer Block in WordPress ist.

Was ist ein wiederverwendbarer Layoutblock?

Ein wiederverwendbarer Layoutblock im standardmäßigen Blockeditor von WordPress (Gutenberg) ist einem globalen Element in Divi sehr ähnlich. Der Block kann mehrfach verwendet werden, aber Inhalt und Aussehen bleiben für alle Instanzen genau gleich. Und wenn wir den wiederverwendbaren Layoutblock bearbeiten, wird die Änderung auf alle Instanzen des Layoutblocks auf der gesamten Site angewendet. Sobald ein Layoutblock in WordPress wiederverwendbar gemacht wurde, steht der Block beim Schreiben des Beitrags in der Liste der Blöcke zur Verfügung. Dies macht es wirklich praktisch, denselben Layoutblock mehrmals in mehreren Blog-Posts hinzuzufügen.

Verwandeln des Divi-Layoutblocks in einen wiederverwendbaren Layoutblock

Um unseren Divi-Layout-Block zu einem wiederverwendbaren Block zu machen, bewegen Sie den Mauszeiger über den Layout-Block und öffnen Sie das Einstellungsmenü, indem Sie auf das Drei-Punkte-Symbol klicken. Wählen Sie dann aus der Liste die Option „Zu wiederverwendbaren Blöcken hinzufügen“.

Geben Sie dann dem wiederverwendbaren Block einen Namen und klicken Sie auf die Schaltfläche Speichern, um den Block als wiederverwendbaren Block zu speichern.

Wenn wir nun einen neuen Block im Blog-Post hinzufügen, finden wir unseren neuen wiederverwendbaren Layoutblock in der Liste (unter dem Umschalter der Kategorie Wiederverwendbar). Klicken Sie einfach auf den wiederverwendbaren Layoutblock und er wird dem Beitrag hinzugefügt.

Wenn wir uns nun den Live-Beitrag ansehen, können wir zwei Instanzen desselben exakten Abschnittsteilers sehen.

Sobald wir den wiederverwendbaren Block mehrmals im Beitrag oder auf der Site verwenden, können wir eine der Instanzen des wiederverwendbaren Layoutblocks bearbeiten und diese Änderungen werden auf alle Instanzen des Blocks auf der gesamten Site angewendet.

Um den wiederverwendbaren Layoutblock zu bearbeiten, bewegen Sie den Mauszeiger über den Block und klicken Sie auf die Schaltfläche Bearbeiten oben rechts im Block.

Wählen Sie dann das Layout innerhalb des wiederverwendbaren Blocks aus (klicken Sie darauf) und klicken Sie im angezeigten oberen Menü auf das Bearbeitungssymbol. Wir können auch auf den Link Layout bearbeiten unter der Registerkarte Block in der rechten Seitenleiste klicken.

Dann ändern Sie das Design des Layouts nach Belieben. In diesem Beispiel können wir die Farben für den Verlaufshintergrund ändern.

Achten Sie nach dem Speichern des Layouts darauf, dass Sie oben rechts im wiederverwendbaren Layoutblock auf die Schaltfläche Speichern klicken. Aktualisieren Sie dann den Beitrag und sehen Sie sich die Änderungen auf der Live-Site an.

Sie werden feststellen, dass die Designänderungen für alle Instanzen des wiederverwendbaren Layouts aktualisiert werden.

Tipp: Verwenden eines wiederverwendbaren Layoutblocks als Vorlage

Manchmal möchten wir eine modifizierte Version des wiederverwendbaren Layoutblocks in unserem Beitrag verwenden. Auf diese Weise können wir dem Beitrag einen wiederverwendbaren Layoutblock als Startvorlage hinzufügen, sodass wir den Layoutblock für eine bestimmte Instanz anpassen können, ohne dass der wiederverwendbare Block auf der gesamten Site beeinträchtigt wird.

Um einen wiederverwendbaren Layoutblock als Vorlage zu verwenden, fügen Sie zuerst den wiederverwendbaren Block zum Beitrag hinzu.

Öffnen Sie dann das Blockmenü und wählen Sie die Option „in regulären Block konvertieren“.

Jetzt können wir das Layout für ein bestimmtes Design für diese Instanz bearbeiten, ohne die anderen wiederverwendbaren Blöcke zu beeinflussen.

Abschließende Gedanken

Das Erstellen von wiederverwendbaren Divi-Layoutblöcken kann hilfreich sein, insbesondere für Divi-Designelemente wie einen Abschnittsteiler. Dies ermöglicht es uns, den Teiler in unseren Beiträgen wiederholt zu verwenden. Es rationalisiert nicht nur den Prozess des Schreibens eines Beitrags, sondern gibt uns auch die Möglichkeit, das Design des Blocks auf der gesamten Website viel einfacher zu aktualisieren. In diesem Beitrag haben wir gezeigt, wie Sie einen Abschnittsteiler als wiederverwendbaren Block hinzufügen, aber dieselbe Technik kann aus unzähligen anderen Gründen verwendet werden, um endlose wiederverwendbare Divi-Layoutblöcke zu erstellen.

Können Sie nützliche Möglichkeiten finden, wiederverwendbare Divi-Layout-Blöcke in Ihre eigenen Blog-Posts zu integrieren?

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!