Springe zum Hauptinhalt

So fügen Sie mit Divi Anmeldeformulare auf Gutenberg ein

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Der Divi Layout Block öffnet die Tür zu vielen praktischen Möglichkeiten, die leistungsstarken Designfunktionen von Divi Builder in den Standard-WordPress-Blockeditor (Gutenberg) zu integrieren. Auf diese Weise können Sie den größten Teil Ihres Blogpost-Inhalts über die bekannte Gutenberg-Blockoberfläche schreiben und dann Divi-Layouts dort einfügen, wo benutzerdefiniertes Design oder Funktionen erforderlich sind. Ein Divi-Layoutblock kann alles enthalten, was Sie in Divi Builder erstellen können, eignet sich aber auch hervorragend, um etwas so Einfaches und Wesentliches wie ein Abonnementformular aufzunehmen.

In diesem Tutorial erfahren Sie, wie Sie einem Gutenberg-Blogbeitrag mithilfe des Divi-Layoutblocks ein Anmeldeformular hinzufügen.

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

Und das ist alles!

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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 Blog-Beitrag erstellen oder einen vorhandenen bearbeiten. In diesem Beispiel fügen wir dem Titel und dem Text des Beitrags mithilfe einiger Kopf- und Absatzblöcke Dummy-Inhalte hinzu. Fügen Sie dann ein ausgewähltes Bild hinzu und wählen Sie unter den Divi-Seiteneinstellungen die Option „Keine Seitenleiste“ für das Layout.

Fügen Sie online einen Divi-Layoutblock hinzu

Nachdem Sie den größten Teil des Beitrags erstellt haben, müssen wir nur noch einen neuen Divi-Layoutblock hinzufügen, den wir im Inhaltsbereich des Beitrags haben möchten. Wir könnten es irgendwo näher am Ende des Beitrags hinzufügen, um einen qualifizierten Interessenten zu gewinnen, der offensichtlich am Inhalt des Beitrags 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.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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 die gegenüberliegende Spalte des Textes hinzufügen. Hier verwenden Sie den Aufforderungstext, um den Besucher zum Abonnieren zu bewegen.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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!

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
2 Aktien
Aktie2
tweet
Registrieren