Der Divi-Layout-Block öffnet die Tür zu vielen praktischen Möglichkeiten, die leistungsstarken Designfunktionen von Divi Builder in den Standard-Blockeditor von WordPress (Gutenberg) zu integrieren. Auf diese Weise können Sie die meisten davon schreiben Inhalt Erstellen Sie Ihren Blog-Beitrag mithilfe der bekannten Gutenberg-Blockschnittstelle und fügen Sie dann Divi-Layouts dort ein, wo individuelles Design oder Funktionalität erforderlich ist. Ein Divi-Layoutblock kann alles enthalten, was Sie in Divi Builder erstellen können, eignet sich aber auch hervorragend zum Einbinden von etwas so Einfachem und Wesentlichem wie einem Formular des Abonnements.
In diesem Tutorial werden wir sehen, wie man eine hinzufügt Formular Abonnement eines Gutenberg-Blogbeitrags mit dem Divi-Layoutblock.
Mögliches Ergebnis
Importieren des JSON-Layoutblocks
Laden Sie das Layout in die Divi-Bibliothek herunter
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 "Importieren und Exportieren".
Wählen Sie dann die JSON-Datei in Ihrem Download-Ordner aus und klicken Sie auf "Divi Builder-Layouts importieren".
Fügen Sie einen neuen Divi-Block in den Gutenberg-Beitrag ein
Sobald Ihr Layout importiert wurde, können Sie auf Ihre Gutenberg-Nachricht zugreifen und einen neuen Divi-Layoutblock hinzufügen.
Importieren Sie eine JSON-Datei aus gespeicherten Präsentationen
Klicken Sie dann auf "Aus Bibliothek laden", gehen Sie zu "Ihre gespeicherten Layouts" und wählen Sie das Layout aus, um den Divi CTA-Layoutblock in Ihren Blog-Beitrag zu importieren. Das ist es !
Und das ist alles!
Fahren wir mit dem Tutorial fort, okay?
Fügen Sie Ihrem Gutenberg-Blogbeitrag ein Optin-E-Mail-Modul hinzu
Erstellen oder bearbeiten Sie einen Blog-Beitrag
Um zu beginnen, müssen wir einen neuen Blogbeitrag erstellen oder einen vorhandenen bearbeiten. Für dieses Beispiel fügen wir hinzu Inhalt Pseudonym für den Titel und den Text des Artikels mithilfe einiger Kopf- und Absatzblöcke. Fügen Sie als Nächstes ein hervorgehobenes Bild hinzu und wählen Sie in den Divi-Seiteneinstellungen „Keine Seitenleiste“ als Layout.
Fügen Sie online einen Divi-Layoutblock hinzu
Sobald Sie den größten Teil des Beitrags erstellt haben, müssen wir nur noch einen neuen Divi-Layoutblock an der gewünschten Stelle im Beitragsbereich hinzufügen. Inhalt der Veröffentlichung. Wir könnten es irgendwo näher am Ende der Nachricht hinzufügen, um einen qualifizierten Lead zu erfassen, der offensichtlich am Inhalt der Nachricht interessiert ist.
Bewegen Sie zum Hinzufügen die Maus über den Bereich, in dem Sie die Option E-Mail hinzufügen möchten, und klicken Sie dann auf das blaue Plus-Symbol, um einen neuen Block hinzuzufügen. Wählen Sie in der Liste der Kontextblöcke den Block Divi Layout aus.
Erstellen Sie ein neues Layout im Divi-Layoutblock
Sobald der Divi-Layoutblock ausgewählt wurde, haben wir die Möglichkeit, ein neues Layout zu erstellen oder aus der Bibliothek zu laden. Da wir die E-Mail-Option von Grund auf neu erstellen müssen, wählen Sie die Option "Neues Layout erstellen".
Abschnittsgestaltung
Im Layout-Editor können wir damit beginnen, das E-Mail-Optin so zu gestalten, dass es in unseren Beitrag aufgenommen wird. Alles, was wir in diesem Editor entwerfen, wird im Bereich Divi Layout Block des Beitrags angezeigt.
Öffnen Sie zunächst die bereits vorhandenen Abschnittseinstellungen des Standardabschnitts.
Für das Layout wählen wir ein zweispaltiges Layout.
Dann werden wir das Email Optin-Modul zu einer der Spalten hinzufügen. Ich überlasse Ihnen die Auswahl der Spalte.
Als nächstes passen wir den Hintergrund des Abschnitts an. Sie können die Werte jederzeit ändern, um Ihr Design einzigartig zu machen. Wir haben jedoch die folgenden Werte verwendet:
- Hintergrund: # ff6100
- Top & Bottom Separator: Der 13. zählt von oben.
- Breite des Teilerelements: 40px (oben und unten).
Wir werden nun Text zur gegenüberliegenden Spalte hinzufügen. Hier verwenden Sie Anreiztexte, um das zu erreichen Besucher zu abonnieren.
Sie müssen dann die verschiedenen Änderungen vornehmen:
- Schrifttext: Montserrat
- Schriftfarbe: #FFF
- Untertitel H2: Montserrat
- Text Untertitel H2 Größe: 2.5em
- Text Untertitel H2 Farbe: #FFF
Denken Sie daran, das von Ihnen verwendete E-Mail-System zu konfigurieren. Sie sollten wissen, dass Gutenberg mit kompatibel ist MailChimp.
Abschließende Gedanken
Das Hinzufügen einer Optin-E-Mail zu Ihrer Gutenberg-Nachricht ist mit dem Divi-Layoutblock unglaublich einfach geworden. Sie können nicht nur innerhalb von Sekunden eine voll funktionsfähige (und benutzerfreundliche) E-Mail-Option hinzufügen, sondern auch Divi Builder verwenden, um benutzerdefiniertes Design, Hover-Effekte und Animationen hinzuzufügen. All dies ohne ein Plugin verwenden zu müssen!