So erstellen Sie wiederverwendbare Bildlayoutblöcke zum Hinzufügen von Bildern im Divi-Stil zu Gutenberg-Posts

Der Layout-Block von Divi kann als wiederverwendbarer Bild-Layout-Block zum Hinzufügen von Bildern im Divi-Stil zu Gutenberg-Blog-Posts verwendet werden. Dies kombiniert die leistungsstarken Designoptionen und Funktionen von Divi (zum Erstellen schöner Bilder) mit der Bequemlichkeit des Schreibens von Beiträgen (und Hinzufügen von Blöcken) mit Gutenberg.

In diesem Tutorial zeigen wir, wie Sie den Divi-Layout-Block verwenden, um einige beeindruckende Bildlayouts zu entwerfen. Dann werden wir diese Layouts als wiederverwendbare Blöcke in Gutenberg hinzufügen. Mit dieser Technik können wir unseren Bildern fast jedes Divi-Design-Feature hinzufügen (Hintergründe, Lightbox, Filter, Animationen, Scroll-Effekte und vieles mehr). Dann können wir dieses fabelhafte Design als praktische Bildvorlage zum Hinzufügen von Bildern zu zukünftigen Posts verwenden, die mit Gutenberg erstellt wurden.

Lass uns anfangen!

Vorgeschmack

Laden Sie die wiederverwendbaren Bildlayoutblöcke KOSTENLOS herunter

Um die Layoutblöcke aus diesem Tutorial in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

So verwenden Sie den Download, um diese Layout-Blöcke auf Ihrer Site zu importieren

Um diese wiederverwendbaren Divi-Bild-Layout-Blöcke auf Ihre Site zu importieren, müssen Sie zuerst die Download-Datei entpacken. Dort finden Sie die drei JSON-Dateien, die Sie auf Ihre Site importieren müssen.

Gehen Sie, um einen Beitrag mit dem Standardeditor (Gutenberg) zu bearbeiten. Öffnen Sie das Menü „Weitere Tools & Optionen“ oben rechts auf der Seite und wählen Sie „Alle wiederverwendbaren Blöcke verwalten“.

Klicken Sie dann auf die Schaltfläche Aus JSON importieren. Wählen Sie eine der JSON-Dateien aus dem Download-Ordner aus und klicken Sie auf die Schaltfläche Importieren.

Wiederholen Sie diesen Vorgang, um alle drei JSON-Dateien zu importieren.

Wenn Sie fertig sind, fügen Sie einen neuen Block in Gutenberg hinzu. Wir finden die importierten wiederverwendbaren Layoutblöcke unter dem Schalter der Option Wiederverwendbar. Klicken Sie einfach auf diejenige, die Sie zu Ihrem Beitrag hinzufügen möchten.

Das ist es!

Kommen wir zum Tutorial, ja?

Was wir brauchen, um loszulegen

Um zu beginnen, müssen wir Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie einen neuen Beitrag in WordPress und verwenden Sie den Standardeditor (Gutenberg), um einige simulierte Inhalte (Titel, Überschriften, Absätze, vorgestelltes Bild usw.) hinzuzufügen. Grundsätzlich benötigen wir einen Testbeitrag, um die Bildlayoutblöcke im Divi-Stil zu erstellen.

Danach sind wir startklar.

Teil 1: Erstellen des Bildes in voller Breite mit dem wiederverwendbaren Divi-Layoutblock für Beschriftungen

Divi-Layout-Block hinzufügen

Fügen Sie zunächst einen Divi-Layout-Block zu Ihrem Beitrag hinzu.

Klicken Sie dann auf „Neues Layout erstellen“.

Entwerfen des Divi-Bild-Layouts

Beginnen Sie im Layoutblock-Editor mit der Gestaltung des Layouts, indem Sie eine einspaltige Zeile hinzufügen.

Das Bildmodul

Fügen Sie der Zeile ein Bildmodul hinzu.

Aktualisieren Sie dann die Einstellungen wie folgt:

• In Lightbox öffnen: JA

Dadurch kann unser Bild beim Klicken in einer Lightbox angezeigt werden.

• Bildüberlagerung: EIN
• Farbe des Überlagerungssymbols: #ffffff
• Hover-Overlay-Farbe: rgba(120,47,130,0,57)

Um etwas Platz um unser Bild herum zu schaffen, aktualisieren Sie die Zeileneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: JA
• Dachrinnenbreite: 1
• Breite: 90%
• Maximale Breite: 90%
• Polsterung: 5 % oben, 5 % unten

Dadurch erhalten wir 5% des Abstands um das Bild herum. Dies ist auch der Bereich, in dem der Hintergrundverlauf angezeigt wird, den wir dem Abschnitt hinzufügen.

Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie das Design mit einem Hintergrundverlauf wie folgt:

• Verlaufshintergrund links Farbe: #782f82
• Farbverlauf Hintergrund Rechte Farbe: #fe756b
• Verlaufsrichtung: 90deg

Damit das Bild etwas über den Inhaltscontainer des Blog-Posts hinausgeht, können wir dem Abschnitt wie folgt eine benutzerdefinierte Breite zuweisen:

• Breite: 110%
• Maximale Breite: 100%
• Marge: -5% übrig
• Padding: 0px oben, 0px unten

Geben Sie dem Abschnitt schließlich eine kreative Note, indem Sie wie folgt einen inneren Kastenschatten hinzufügen:

• Box Shadow: siehe Screenshot
• Horizontale Position des Kastenschattens: 5vw
• Vertikale Position des Kastenschattens: 5vw
• Schattenfarbe: rgba(255,255,255,0.7)

Wenn wir ein Bildlayout ohne Bildunterschrift haben möchten, können wir hier aufhören, aber um dem Bildlayout eine Bildunterschrift hinzuzufügen, fügen Sie ein Textmodul unter dem Bild hinzu.

Fügen Sie dann Füllinhalt hinzu, der als Beschriftungstext dient.

Aktualisieren Sie dann die folgenden Texteinstellungen:

• Textschriftart: Montserrat
• Schriftstärke des Textes: Halbfett
• Text Textfarbe: #ffffff
• Breite: 80%
• Modulausrichtung: rechts
• Marge: 5% oben

Wenn Sie fertig sind, speichern Sie das Layout unbedingt mit Strg + S oder öffnen Sie die Einstellungsleiste unten und klicken Sie auf „Speichern & Beenden“.

Hinzufügen des Bildlayouts zu wiederverwendbaren Blöcken

Um das Layout zu wiederverwendbaren Blöcken hinzuzufügen, klicken Sie auf das Menü "Weitere Optionen" über dem Block und wählen Sie "Zu wiederverwendbaren Blöcken hinzufügen".

Geben Sie dem wiederverwendbaren Block einen Namen und klicken Sie auf „Speichern“.

Jetzt wurde das Bild in voller Breite mit Beschriftungslayout zu wiederverwendbaren Blöcken hinzugefügt und ist beim Erstellen eines Beitrags in der Blockliste verfügbar.

Vergessen Sie nicht, den Beitrag zu aktualisieren/speichern, um die Änderungen zu speichern.

Teil 2: Erstellen des linken Bildes mit dem wiederverwendbaren Divi-Layoutblock für Beschriftungen

Jetzt wurde das Bild in voller Breite mit Beschriftungslayout zu wiederverwendbaren Blöcken hinzugefügt. Wir können diesen Block verwenden, um unser linkes Bild mit Beschriftungslayout zu erstellen.

Konvertieren Sie einen wiederverwendbaren Block in einen regulären Block

Öffnen Sie zunächst das Menü "Weitere Optionen" oben im wiederverwendbaren Block, der das Bildlayout in voller Breite enthält. Wählen Sie dann „In regulären Block konvertieren“.

Keine Sorge, dadurch wird der gerade erstellte Layoutblock nicht aus wiederverwendbaren Blöcken entfernt (es gibt jedoch eine Option dafür). Dadurch wird der wiederverwendbare Block einfach zu einem regulären Block, sodass wir den Block für eine einzelne Instanz bearbeiten und verwenden können.

Layout aktualisieren

Sobald der Block normal ist, klicken Sie über dem Block auf die Schaltfläche Layout bearbeiten.

Öffnen Sie im Layout-Editor die Abschnittseinstellungen und aktualisieren Sie die Breite wie folgt:

• Breite: auto
• Maximale Breite: 500px

Das ist alles, was wir im Layout-Editor tun müssen. Stellen Sie sicher, dass Sie das Layout speichern und verlassen.

Öffnen Sie bei ausgewähltem Block die Seitenleiste der Haupteinstellungen und wählen Sie die Registerkarte Block, um die Blockeinstellungen anzuzeigen. Fügen Sie unter dem erweiterten Umschalter die folgende Klasse hinzu:

• CSS-Klasse zusätzlich: alignleft

Diese Klasse ist nativ in WordPress und verschiebt den Block nach links, wodurch auch unser Bild links vom Inhalt in unserem Beitrag schweben wird.

Nachdem die Klasse hinzugefügt wurde, öffnen Sie das Menü „Weitere Optionen“ des Blocks und klicken Sie auf „Zu wiederverwendbaren Blöcken hinzufügen“.

Geben Sie dem wiederverwendbaren Block einen Namen (z. B. „Linkes Bild mit Bildunterschrift“) und klicken Sie auf Speichern.

Jetzt wurde der Layoutblock Linkes Bild mit Bildunterschrift zur Liste der wiederverwendbaren Blöcke hinzugefügt, um den Zugriff zu erleichtern.

Teil 3: Erstellen des wiederverwendbaren Divi-Layout-Blocks „Richtiges Bild mit Bildunterschrift“

Bisher haben wir ein Bild in voller Breite mit einem Bildunterschriften-Layoutblock und ein linkes Bild mit einem Bildunterschrift-Layoutblock. Jetzt können wir das richtige Bild mit dem Beschriftungslayoutblock hinzufügen.

Konvertieren Sie einen wiederverwendbaren Block in einen regulären Block

Öffnen Sie dazu das Menü "Weitere Optionen" auf dem linken Bild mit der Beschriftung wiederverwendbarer Block. Wählen Sie dann „In regulären Block konvertieren“.

Layout aktualisieren

Sobald der Block ein regulärer Layoutblock ist, klicken Sie auf , um das Layout zu bearbeiten.

Öffnen Sie dann die Abschnittseinstellungen und nehmen Sie den linken Rand heraus.

Speichern und beenden Sie den Layout-Editor.

Aktualisieren Sie dann die zusätzliche CSS-Klasse des Blocks wie folgt:

• Zusätzliche CSS-Klasse: alignright

Nachdem die Klasse hinzugefügt wurde, fügen Sie den Layoutblock zu Wiederverwendbare Blöcke hinzu.

Geben Sie dem wiederverwendbaren Block einen Namen (z. B. „Rechtes Bild mit Bildunterschrift“) und speichern Sie ihn.

Klicken Sie nun auf eines der blauen Plus-Symbole unter einem Block im Beitrag, um einen neuen Block hinzuzufügen. Öffnen Sie dann im Blocklisten-Popup den Umschalter Wiederverwendbar. Wir haben jetzt unsere drei wiederverwendbaren Bildlayoutblöcke einsatzbereit.

Teil 4: Verwenden der wiederverwendbaren Bildlayoutblöcke in einem Beitrag.

Obwohl wir unsere Bild-Layout-Blöcke erstellt haben, existieren sie (für unsere Zwecke) nur als Vorlage, um den Prozess des Hinzufügens eines Bildes zu einem Beitrag zu starten. Daher müssen wir jedes Mal, wenn wir mithilfe dieser Layoutblöcke ein tatsächliches Bild zu einem Beitrag hinzufügen möchten, es zuerst in einen regulären Block konvertieren, bevor wir das Bild und die Beschriftung zum Layout hinzufügen.

So geht's.

Schritt 1: Fügen Sie den wiederverwendbaren Layoutblock hinzu

Fügen Sie dem Beitrag einen der wiederverwendbaren Divi-Bild-Layout-Blöcke hinzu.

Schritt 2: Konvertieren Sie es in einen regulären Block

Öffnen Sie das Menü "Weitere Optionen" und wählen Sie "In regulären Block konvertieren".

Schritt 3: Bearbeiten Sie den Layoutblock mit einem neuen Bild und einer neuen Beschriftung

Sobald der Block regelmäßig ist, klicken Sie auf , um das Layout zu bearbeiten.

Aktualisieren Sie das Layout mit einem Bild Ihrer Wahl.

Aktualisieren Sie dann den Beschriftungstext innerhalb des Textmoduls.

Schritt 4: Speichern Sie den Layoutblock

Wenn Sie fertig sind, speichern und beenden Sie den Layout-Editor.

Fahren Sie mit diesem Vorgang fort, um dem Beitrag die anderen beiden Bildlayouts hinzuzufügen.

Endergebnis

Abschließende Gedanken

Sobald wir uns mit der Verwendung des Divi-Layoutblocks vertraut gemacht haben, wird klar, wie wertvoll er für das Leben unseres Blogs sein kann. In diesem Beitrag haben wir behandelt, wie man den Layoutblock verwendet, um einem Gutenberg-Blogpost einige ziemlich coole Bilder im Divi-Stil hinzuzufügen. Der Trick besteht darin, die Layouts zuerst als wiederverwendbaren Block zu speichern. Wenn wir dann bereit sind, Bilder zu einem Blog-Post hinzuzufügen, können wir den wiederverwendbaren Block einfach in einen regulären Block umwandeln, damit wir unser Bild und die Bildunterschrift hinzufügen können.

Hoffentlich wird dies einige Inspirationen liefern, um Ihre Blog-Bilder auf eine ganz neue Ebene zu heben.

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

Danke schön!