So fügen Sie Ihrem Gutenberg-Beitrag von Divi erstellte hervorgehobene Zitate hinzu

Beim Schreiben eines Blog-Beitrags möchten Sie oft jemanden zitieren oder einen Satz hervorheben, der in einem normalen Absatz verwendet wird. Jetzt können Sie im Gutenberg-Editor auf Anhieb einen Zitatblock hinzufügen, der Ihnen jedoch nicht so viel Gestaltungsfreiheit bietet, wie Sie möglicherweise möchten. Mit den Layoutblöcken von Divi ist das kein Problem mehr. Sie können mit Divi ganz einfach einen bestimmten Block bauen, während Sie die Gutenberg-Umgebung an anderer Stelle beibehalten. In diesem Tutorial zeigen wir Ihnen, wie Sie mit Divi Inline-Highlights zu Ihren Blog-Posts hinzufügen. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Beispiel 1

Desktop

Handy, Mobiltelefon

Beispiel #2

Desktop

Handy, Mobiltelefon

Laden Sie die von Divi erstellten Layouts für hervorgehobene Zitate KOSTENLOS herunter

Um die kostenlosen von Divi erstellten Layouts für hervorgehobene Zitate 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!

https://youtu.be/zScpa4-I7-8

Abonnieren Sie unseren Youtube-Kanal

Importieren des Layoutblocks JSON

Layout in die Divi-Bibliothek hochladen

Um die JSON-Datei zu importieren, die Sie oben herunterladen konnten, gehen Sie zu Ihrer Divi-Bibliothek im Backend Ihres WordPress-Dashboards und klicken Sie auf 'Import & Export'.

Wählen Sie dann die JSON-Datei in Ihrem Download-Ordner aus und klicken Sie auf „Divi Builder-Layouts importieren“.

Neuen Divi-Block-Block in Gutenberg Post hinzufügen

Sobald Ihr Layout importiert wurde, können Sie zu Ihrem Gutenberg-Post gehen und einen neuen Divi-Layoutblock hinzufügen.

JSON-Datei aus gespeicherten Layouts importieren

Klicken Sie dann auf „Aus Bibliothek laden“, navigieren Sie zu „Ihre gespeicherten Layouts“ und wählen Sie das Layout aus, um das hervorgehobene Zitat-Layout in Ihren Blog-Beitrag zu importieren. Das ist es!

Allgemeine Schritte

Verwenden Sie eine einfache und UX-freundliche Blog-Post-Vorlage

Vorlage herunterladen

Um den Stil dieses Tutorials zu definieren, verwenden wir eine Beitragsvorlage eines vorherigen Beitrags. Gehen Sie zu diesem Beitrag und laden Sie die Vorlage herunter.

Gehe zum Divi Theme Builder

Gehen Sie dann zum Divi Theme Builder.

Beitragsvorlage hochladen

Klicken Sie auf das Symbol in der oberen rechten Ecke, gehen Sie zum Import-Tab und importieren Sie die Beitragsvorlage, die Sie im ersten Schritt dieses Tutorials heruntergeladen haben.

Vorhandenen Gutenberg-Beitrag öffnen oder einen neuen erstellen

Nachdem Sie eine Beitragsvorlage festgelegt haben, können Sie einen neuen Gutenberg-Beitrag erstellen oder einen vorhandenen öffnen.

Neuen Inline-Divi-Block hinzufügen

Fügen Sie irgendwo in Ihrem Beitrag einen neuen Divi-Block hinzu.

Neues Layout innerhalb des Divi-Blocks erstellen

Nachdem Sie den Block hinzugefügt haben, erhalten Sie zwei Optionen. Wählen Sie dasjenige aus, auf dem "Neues Layout erstellen" steht.

Beispiel 1 neu erstellen

Abschnittseinstellungen

Abstand

Sobald Sie sich im Divi-Layoutblock-Editor befinden, sehen Sie einen Abschnitt. Um das erste Beispieldesign neu zu erstellen, öffnen Sie die Schnitteinstellungen und ändern Sie die Randwerte entsprechend:

• Oberer Rand: 50px
• Unterer Rand: 50px
• Linker Rand: -5%
• Rechter Rand: -5%

Grenze

Fügen Sie dem nächsten Abschnitt einen linken Rahmen hinzu.

• Breite des linken Rands: 2px
• Farbe des linken Rands: #000000

Animation

Und verwenden Sie die folgenden Animationseinstellungen:

• Animationsstil: Folie
• Animationsrichtung: Unten
• Animationsdauer: 1500 ms
• Animationsintensität: 200%
• Anfangsdeckkraft der Animation: 100 %
• Animationsgeschwindigkeitskurve: Ease-In-Out

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen entsprechend:

• Breite: 90%
• Maximale Breite: 100%

Animation

Vervollständigen Sie die Zeileneinstellungen, indem Sie die Animationseinstellungen wie folgt ändern:

• Animationsstil: Ausblenden
• Animationsverzögerung: 1500 ms
• Animationsgeschwindigkeitskurve: Ease-In-Out

Textmodul zur Spalte hinzufügen

H3-Inhalt einfügen

Das einzige Modul, das wir brauchen, ist ein Textmodul. Fügen Sie den H3-markierten Zitatinhalt ein.

H3-Texteinstellungen

Vervollständigen Sie die Moduleinstellungen, indem Sie die H3-Texteinstellungen wie folgt ändern:

• H3-Schriftstil: Kursiv
• H3-Textgröße: 2.1rem (Desktop), 1.5rem (Tablet), 1.3rem (Telefon)
• H3-Linienhöhe: 1.5em

Beispiel 2 neu erstellen

Abschnittseinstellungen

Abstand

Möchten Sie stattdessen das zweite Designbeispiel neu erstellen? Öffnen Sie die Schnitteinstellungen und ändern Sie die Abstandswerte wie folgt:

• Oberer Rand: 50px
• Unterer Rand: 50px
• Linker Rand: -5%
• Rechter Rand: -5%
• Obere Polsterung: 0px
• Untere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

Fügen Sie dann eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile die gesamte Breite des Abschnittscontainers einnehmen.

• Breite: 100%
• Maximale Breite: 100%

Textmodul Nr. 1 zur Spalte hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen, beginnend mit einem ersten Textmodul. Fügen Sie dem Inhaltsfeld ein Zitat hinzu.

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen wie folgt:

• Textschrift: Playfair Display
• Textfarbe: #eaeaea
• Textgröße: 500px
• Textzeilenhöhe: 0em

Abstand

Wir fügen auch etwas obere Marge hinzu.

• Oberer Rand: 150px

Animation

Dann ändern wir die Animationseinstellungen.

• Animationsstil: Flip
• Animationsrichtung: Zentrum
• Animationsverzögerung: 500 ms
• Animationsintensität: 200%
• Animationsgeschwindigkeitskurve: Ease-In-Out

Position

Wir stellen sicher, dass das Zitat in der oberen linken Ecke des Zeilencontainers platziert wird, indem wir auch die Positionseinstellungen ändern.

• Position: Absolut
• Ort: Oben links

Textmodul #2 zur Spalte hinzufügen

H3-Inhalt hinzufügen

Weiter zum nächsten Textbaustein. Fügen Sie den in H3 hervorgehobenen Zitatinhalt zum Inhaltsfeld hinzu.

H3-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H3-Texteinstellungen wie folgt:

• Überschrift 3 Schriftstil: Kursiv
• Überschrift 3 Textgröße: 2.6rem (Desktop), 1.7rem (Tablet), 1.3rem (Telefon)
• Überschrift 3 Zeilenhöhe: 1,4 em

Abstand

Fügen Sie auch einige benutzerdefinierte Randwerte für verschiedene Bildschirmgrößen hinzu.

• Oberer Rand: 150px
• Unterer Rand: 150px
• Linker Rand: 150 Pixel (Desktop), 70 Pixel (Tablet), 30 Pixel (Telefon)
• Rechter Rand: 150px (Desktop), 70px (Tablet), 30px (Telefon)

Animation

Und vervollständigen Sie die Moduleinstellungen, indem Sie die Animationseinstellungen wie folgt ändern:

• Animationsstil: Ausblenden
• Animationsverzögerung: 2000 ms
• Animationsgeschwindigkeitskurve: Ease-In-Out

Textmodul Nr. 3 zur Spalte hinzufügen

Inhalt hinzufügen

Weiter zum nächsten und letzten Modul, das ein weiteres Textmodul ist. Fügen Sie dem Inhaltsfeld ein Zitatsymbol hinzu.

Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Texteinstellungen.

• Textschrift: Playfair Display
• Textfarbe: #eaeaea
• Textgröße: 500px
• Textzeilenhöhe: 0em
• Textausrichtung: Rechts

Animation

Verwenden Sie als nächstes die folgenden Animationseinstellungen:

• Animationsstil: Flip
• Animationsrichtung: Zentrum
• Animationsverzögerung: 1000ms
• Animationsintensität: 200%
• Animationsgeschwindigkeitskurve: Ease-In-Out

Position

Und stellen Sie sicher, dass das Zitat in der unteren rechten Ecke des Zeilencontainers platziert wird.

• Position: Absolut
• Ort: Unten rechts

Angebotslayouts zur Wiederverwendung in der Divi-Bibliothek speichern

Nachdem Sie das Zitat-Layout Ihrer Wahl fertiggestellt haben, stellen Sie sicher, dass Sie es in Ihrer Divi-Bibliothek speichern, damit Sie es auch für zukünftige Beiträge verwenden können!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Beispiel 1

Desktop

Handy, Mobiltelefon

Beispiel #2

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit den Layoutblöcken von Divi kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie Ihrem Gutenberg-Blogpost animierte hervorgehobene Zitate hinzufügen können. Die Gestaltungsmöglichkeiten sind endlos, aber wir haben Ihnen zwei Beispiele zur Verfügung gestellt, mit denen Sie beginnen können. Sie konnten die JSON-Dateien auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.