So fügen Sie Ihrem Gutenberg-Blog-Post eine Divi-E-Mail-Option hinzu

Der Divi-Layout-Block öffnet die Tür für viele bequeme Möglichkeiten, die leistungsstarken Designfunktionen des Divi Builder in den standardmäßigen Blockeditor von WordPress (Gutenberg) zu integrieren. Auf diese Weise können Sie den Großteil Ihres Blog-Post-Inhalts mit der vertrauten Gutenberg-Blockschnittstelle schreiben und dann Divi-Layouts einfügen, wo benutzerdefiniertes Design oder benutzerdefinierte Funktionen benötigt werden. Ein Divi-Layout-Block kann alles enthalten, was Sie im Divi Builder erstellen können, aber es ist auch großartig, um etwas so Einfaches und Wesentliches wie ein E-Mail-Optn aufzunehmen.

In diesem Tutorial erfahren Sie, wie Sie einem Gutenberg-Blog-Post mithilfe des Divi-Layout-Blocks eine schöne Divi-E-Mail-Option hinzufügen.

Lass uns anfangen!

Vorgeschmack

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es 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!

Und das ist es!

Kommen wir zum Tutorial, ja?

Hinzufügen einer Divi-E-Mail-Option zu Ihrem 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 Sie 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. Wir könnten es näher am Ende des Beitrags hinzufügen, um einen qualifizierten Lead zu erfassen, der offensichtlich am Inhalt des Beitrags interessiert ist.

Um es hinzuzufügen, bewegen Sie den Mauszeiger über den Bereich, in dem Sie das E-Mail-Optin hinzufügen möchten, und klicken Sie dann auf das blaue Plussymbol, 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 das E-Mail-Optin von Grund auf neu erstellen müssen, wählen Sie die Option „Neues Layout erstellen“.

Sektionsdesign

Im Layoutblock-Editor können wir mit der Gestaltung des E-Mail-Optins beginnen, das in unseren Beitrag aufgenommen werden soll. Alles, was wir in diesem Editor entwerfen, wird im Bereich Divi Layout Block des Beitrags angezeigt.

Öffnen Sie zunächst die Abschnittseinstellungen des bereits vorhandenen Standardabschnitts.

Hintergrundverlauf

Fügen Sie dann einen Hintergrundverlauf wie folgt hinzu:

• Hintergrundfarbe links: #ff9945
• Hintergrundfarbe rechts: #f86a4c

Teiler

Gehen Sie als Nächstes zur Registerkarte Design und zu einer oberen und unteren Abschnittstrennwand wie folgt:

• Top Divider Style: siehe Screenshot
• Farbe des oberen Teilers: #f86a4c
• Horizontale Wiederholung des oberen Teilers: 0,8x

• Unterteiler-Stil: siehe Screenshot
• Farbe des unteren Teilers: #ff9945
• Horizontale Wiederholung des unteren Teilers: 0,8x
• Bottom Divider Flip: horizontal und vertikal

Rand und Rand

Nachdem die Trennwände angebracht sind, geben Sie dem Abschnitt oben und unten einen kleinen Rand und schließen Sie ihn dann mit einer Umrandung und einer Animation wie folgt ab:

• Rand: 20 Pixel oben, 20 Pixel unten
• Abgerundete Ecken: 30px
• Rahmenbreite: 2px
• Rahmenfarbe: #ff9945
• Animationsstil: Flip

Spalte hinzufügen und Zeilenbreite einstellen

Nachdem der Abschnitt abgeschlossen ist, fügen Sie der Zeile eine einspaltige Struktur hinzu.

Aktualisieren Sie dann die Zeileneinstellungen wie folgt:

• Breite: 100%
• Maximale Breite: 100%

Erstellen Sie die E-Mail-Option

E-Mail-Optionsmodul hinzufügen

Fügen Sie als Nächstes der Zeile ein E-Mail-Optin-Modul hinzu.

Inhalt der E-Mail-Option

Aktualisieren Sie für die Inhaltseinstellungen für die E-Mail-Option Folgendes:

• Titel: „Erhalte jede Woche KOSTENLOSE Tipps!“
• Text: [Standard-Mock-Inhalt beibehalten]
• Mailchimp-Liste: [Liste hinzufügen]
• Einzelnamenfeld verwenden: JA
• Hintergrundfarbe verwenden: NEIN

E-Mail-Opt-Design

Felder

Wechseln Sie zur Registerkarte Design und gestalten Sie die E-Mail-Opt-In-Felder, indem Sie Folgendes aktualisieren:

• Layout: Körper rechts, Form links
• Feldhintergrundfarbe: #f86a4c
• Textfarbe der Felder: #ffffff
• Fields-Schriftart: IBM Plex Sans
• Feldtextgröße: 18px
• Felder Buchstabenabstand: 2px
• Feldlinienhöhe: 2em

Titel

Aktualisieren Sie die Titeltexteinstellungen wie folgt:

• Titelschriftart: IBM Plex Sans Condensed
• Schriftstärke des Titels: Semi Bold
• Titeltextfarbe: #ffffff
• Titeltextgröße: 60px (Desktop), 30px (Telefon)
• Höhe der Titelzeile: 1,2 m (Desktop), 1,6 (Telefon)

Taste

Aktualisieren Sie für die Schaltfläche Folgendes:

• Benutzerdefinierte Stile für Schaltfläche verwenden: JA
• Schaltflächentextfarbe: #ff9945
• Schaltfläche Hintergrund Farbverlauf links: #ff9945
• Schaltfläche Hintergrund Farbverlauf rechts: #ffffff
• Verlaufsrichtung: 90deg
• Endposition: 34%
• Breite des Tastenrahmens: 0px
• Tastenabstand der Buchstaben: 2px
• Schaltflächenschriftart: IBM Plex Sans
• Schriftstärke der Schaltfläche: Fett
• Schaltflächenschriftart: TT
• Tastenpolsterung: 15px oben, 15px unten

Polsterung

Und für eine letzte Berührung fügen Sie die folgende Auffüllung hinzu:

• Polsterung: 5% links, 5% rechts

Endergebnis

Sobald wir mit dem Design des Layouts im Divi Layout Editor fertig sind, stellen Sie sicher und speichern Sie das Layout. Speichern Sie dann den Beitrag, damit Sie eine Vorschau des E-Mail-Optins auf einer Live-Seite sehen können. So sieht es aus.

Hier ist die leichte Animation des E-Mail-Optins, wenn Sie im Beitrag nach unten scrollen.

Abschließende Gedanken

Das Hinzufügen einer E-Mail-Option zu Ihrem Gutenberg-Beitrag ist mit dem Divi-Layout-Block erstaunlich einfach geworden. Sie können nicht nur in Sekundenschnelle ein voll funktionsfähiges (und benutzerfreundliches) E-Mail-Optin hinzufügen, sondern auch den Divi Builder verwenden, um benutzerdefiniertes Design, Hover-Effekte und Animationen hinzuzufügen. All dies ohne ein Plugin verwenden zu müssen!

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

Danke schön!