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

Endergebnis divi

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".

Divi Import

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

Importieren Sie json divi 1

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.

Divi Design

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 !

Injizieren Sie ein Formular auf gutenberg
E-Mail-Abonnement für Divi-Layout

Und das ist alles!

Injizieren Sie ein Divi-Form-Modul

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.

Artikeldesign

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.

Divi-Designblock hinzufügen

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".

Entwerfen Sie neues Divi-Design

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.

Wählen Sie das Divi-Layout

Dann werden wir das Email Optin-Modul zu einer der Spalten hinzufügen. Ich überlasse Ihnen die Auswahl der Spalte.

Optin Divi E-Mail-Modul

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.
Divi Modul Trennzeichen
  • 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.

Divi Textmodul

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
Divi Titel Personalisierung

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!