So fügen Sie Ihrem Gutenberg-Blog-Post einen Inline- und animierten Divi-CTA-Layout-Block hinzu

Wenn Sie die Art und Weise, wie Sie Blog-Posts auf Ihrer Website erstellen, optimieren, ist die Wahrscheinlichkeit groß, dass Sie einen attraktiven CTA irgendwo in Ihren Beitrag einfügen möchten. Mit Divis neuer Gutenberg-Layoutblock-Integration können Sie jetzt ganz einfach einen neuen von Divi erstellten Block überall in Ihrem Gutenberg-Blog-Post hinzufügen. Auf diese Weise können Sie den gesamten Blog-Post-Inhalt in der Gutenberg-Umgebung behalten und gleichzeitig einen benutzerdefinierten Divi-CTA mit den integrierten Optionen von Divi erstellen. Beste aus beiden Welten! In diesem Tutorial zeigen wir Ihnen, wie Sie Ihrem Gutenberg-Post einen Inline- und animierten Divi-CTA-Layoutblock hinzufügen. Wir werden auch die JSON-Datei des Divi CTA-Layoutblocks kostenlos teilen!

Lasst uns anfangen.

Vorschau

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

Desktop

Handy, Mobiltelefon

Laden Sie den Inline- und animierten Divi-CTA-Layout-Block KOSTENLOS herunter

Um die kostenlosen Heldenabschnitte 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!

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 den Divi CTA-Layout-Block in Ihren Blog-Beitrag zu importieren. Das ist es!

Beginnen wir mit der Neuerstellung!

Verwenden Sie die Beitragsvorlage für das dritte Theme-Builder-Paket

Laden Sie das dritte Theme-Builder-Paket herunter

Zeit, von Grund auf neu zu erstellen! Zunächst einmal entspricht das Design, das wir neu erstellen, dem dritten Theme-Builder-Paket, das auf dem Divi-Blog veröffentlicht wurde. Gehen Sie zum Beitrag und laden Sie die JSON-Dateien dieses Theme-Builder-Pakets herunter.

Gehe zum Divi Theme Builder

Sobald Sie das dritte Theme-Builder-Paket heruntergeladen haben, können Sie zum Divi Theme Builder gehen.

Beitragsvorlage hochladen

Laden Sie die Beitragsvorlage des Theme-Builder-Pakets hoch, indem Sie auf das Symbol in der oberen rechten Ecke klicken.

Wählen Sie dann die Beitragsvorlage aus und klicken Sie auf „Divi Theme Builder-Vorlagen importieren“. Stellen Sie sicher, dass Sie auch die Änderungen am Theme Builder speichern. An dieser Stelle haben wir allen unseren Beiträgen die Blogpost-Vorlage des Theme-Builder-Pakets zugewiesen.

Vorhandenen Gutenberg-Beitrag öffnen oder einen neuen erstellen

Der nächste Schritt ist das Hinzufügen des Divi CTA-Layoutblocks zu unserem Gutenberg-Post. Öffnen Sie dazu einen bestehenden Beitrag oder erstellen Sie einen neuen.

Neuen Inline-Divi-Block hinzufügen

Sobald Sie sich im Beitrag befinden, können Sie einen neuen Divi-Layoutblock hinzufügen.

Neues Layout innerhalb des Divi-Blocks erstellen

Dann haben Sie zwei Möglichkeiten. Wählen Sie die Option „Neues Layout erstellen“.

Abschnittseinstellungen

Abstand

Sobald Sie sich im Divi-Layoutblock-Editor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und fügen Sie einige benutzerdefinierte Randwerte hinzu, um Platz um den Abschnittscontainer zu schaffen.

• Oberer Rand: 50px
• Unterer Rand: 50px
• Linker Rand: -10%
• Rechte Marge: -10%

Zeile 1 hinzufügen

Spaltenstruktur

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

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und erhöhen Sie die Breite und die maximale Breite.

• Breite: 100%
• Maximale Breite: 100%

Teiler Nr. 1 zur Spalte hinzufügen

Sichtweite

Zeit, Module hinzuzufügen, beginnend mit einem Teilermodul. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Linieneinstellungen wie folgt:

• Linienfarbe: #fc526e
• Linienstil: Solid
• Linienposition: Oben

Größe

Ändern Sie auch die Größeneinstellungen.

• Teilergewicht: 3px
• Breite: 30%
• Modulausrichtung: Rechts
• Höhe: 3px

Animation

Und ändern Sie die Animationseinstellungen entsprechend:

• Animationsstil: Folie
• Animationsrichtung: Links
• Animationsdauer: 2000 ms
• Animationsverzögerung: 500 ms
• Animationsintensität: 100%
• Anfangsdeckkraft der Animation: 100 %

Trenner Nr. 2 zur Spalte hinzufügen

Sichtweite

Weiter zum nächsten Teilermodul. Stellen Sie erneut sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Wechseln Sie dann zum Design-Tab des Moduls und ändern Sie die Linieneinstellungen wie folgt:

• Linienfarbe: #e1e3e8
• Linienstil: Solid
• Linienposition: Oben

Größe

Ändern Sie als nächstes die Größeneinstellungen des Moduls.

• Teilergewicht: 3px
• Höhe: 3px

Abstand

Fügen Sie auch einige benutzerdefinierte Abstandswerte hinzu.

• Linker Rand: 10%
• Rechte Marge: -20%

Animation

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie die Animationseinstellungen wie folgt ändern:

• Animationsstil: Folie
• Animationsrichtung: Links
• Animationsdauer: 2000 ms
• Animationsverzögerung: 500 ms
• Animationsintensität: 100%
• Anfangsdeckkraft der Animation: 100 %

Teiler Nr. 3 zur Spalte hinzufügen

Sichtweite

Weiter zum nächsten und letzten Teilermodul, das wir in dieser Reihe benötigen. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

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

• Linienfarbe: #fc526e
• Linienstil: Solid
• Linienposition: Oben

Größe

Ändern Sie auch die Größe des Moduls.

• Teilergewicht: 3px
• Höhe: 3px

Abstand

Zusammen mit den Abstandseinstellungen.

• Unterer Rand: 100px
• Linker Rand: -20%
• Rechte Marge: 10%

Animation

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie die Animationseinstellungen ändern.

• Animationsstil: Folie
• Animationsrichtung: Rechts
• Animationsdauer: 2000 ms
• Animationsintensität: 100%
• Anfangsdeckkraft der Animation: 100 %

Zeile 2 hinzufügen

Spaltenstruktur

Fügen Sie dem Abschnitt eine weitere Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 70%
• Zeilenausrichtung: Mitte

Textmodul Nr. 1 zur Spalte hinzufügen

H2-Inhalt hinzufügen

Fügen Sie dann der Spalte der Zeile ein erstes Textmodul mit einem H2-Inhalt Ihrer Wahl hinzu.

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die H2-Texteinstellungen entsprechend:

• Überschrift 2 Textfarbe: #fc526e
• Überschrift 2 Textgröße: 28px

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 50px
• Untere Polsterung: 50px
• Linke Polsterung: 50px

Grenze

Wir verwenden auch einen linken Rand.

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

Animation

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie eine benutzerdefinierte Animation hinzufügen.

• Animationsstil: Flip
• Animationsrichtung: Zentrum
• Animationsverzögerung: 1500 ms

Textmodul #2 zur Spalte hinzufügen

Inhalt hinzufügen

Fügen Sie direkt unter dem vorherigen ein weiteres Textmodul mit einem Inhalt Ihrer Wahl hinzu.

Abstand

Wechseln Sie auf die Design-Registerkarte des Moduls und ändern Sie die Padding-Werte entsprechend:

• Obere Polsterung: 50px
• Untere Polsterung: 50px
• Rechte Polsterung: 50px

Grenze

Fügen Sie als nächstes einen oberen und rechten Rand hinzu.

• Oberer und rechter Rand: 2px
• Farbe des oberen und rechten Rands: #fc526e

Animation

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie die Animationseinstellungen wie folgt ändern:

• Animationsstil: Flip
• Animationsrichtung: Zentrum
• Animationsverzögerung: 1700 ms

Schaltflächenmodul zur Spalte hinzufügen

Kopie hinzufügen

Das nächste und letzte Modul, das wir in dieser Reihe benötigen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Tasteneinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Schaltflächeneinstellungen wie folgt:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 13px
• Schaltflächentextfarbe: #ffffff
• Verlaufsfarbe 1: #ff5b84
• Farbverlauf 2: #f94857
• Verlaufstyp: Linear
• Verlaufsrichtung: 165deg
• Breite des Tastenrahmens: 0px

• Schaltflächenrandradius: 0px
• Tastenabstand der Buchstaben: 1px
• Button-Schriftart: Montserrat
• Tastenschriftstärke: Halbfett
• Schaltflächenschriftart: Großbuchstaben

Abstand

Fügen Sie als nächstes eine benutzerdefinierte obere und untere Polsterung hinzu.

• Obere Polsterung: 16px
• Untere Polsterung: 16px

Animation

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie die folgende Animation hinzufügen:

• Animationsstil: Flip
• Animationsverzögerung: 1900ms

Zeile 1 klonen und unten im Abschnitt platzieren

Sobald Sie die erste und zweite Zeile fertiggestellt haben, können Sie die erste Zeile klonen und das Duplikat am unteren Rand des Abschnitts platzieren.

Teilerreihenfolge ändern

Vertauschen Sie die Plätze für das erste und letzte Teilermodul.

Abstand von Trenner Nr. 1 ändern

Öffnen Sie dann das erste Teilermodul in Ihrer Reihe und ändern Sie die Abstandseinstellungen.

• Oberer Rand: 100px
• Linker Rand: 10%
• Rechte Marge: -20%

Abstand von Trenner Nr. 2 ändern

Ändern Sie auch die Abstandseinstellungen des zweiten Teilermoduls.

• Linker Rand: -20%
• Rechte Marge: 10%

Größe des Teilers Nr. 3 ändern

Öffnen Sie dann das dritte Teilermodul und verwenden Sie die linke Modulausrichtung in den Größeneinstellungen.

• Modulausrichtung: Links

Trenner #3 Animationsverzögerung entfernen

Entfernen Sie auch die Animationsverzögerung des dritten Teilermoduls und Sie sind fertig! Nachdem Sie den Divi CTA-Layout-Block fertiggestellt haben, stellen Sie sicher, dass Sie die Änderungen speichern und Ihren Beitrag aktualisieren.

• Animationsverzögerung: 0ms

Vorschau

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

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie die neue Gutenberg-Integration von Divi nutzen und Ihrem Gutenberg-Blogpost einen Inline- und animierten Divi-CTA-Layoutblock hinzufügen können. Dies ist eine großartige Möglichkeit, Ihren CTA Ihrer Wahl hervorzuheben, während Besucher Ihren Blog-Post-Inhalt lesen. Sie konnten auch die JSON-Datei des Divi CTA-Layoutblocks kostenlos herunterladen! Wenn Sie Fragen 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.