So erstellen Sie ein Sticky-E-Mail-Optin in Divi, das Aufmerksamkeit erregt

Mit den Sticky-Positionsoptionen von Divi können Sie jedes Element auf Ihrer Seite kleben. Auf diese Weise können Sie Elemente auf der Seite in bestimmten Abständen fixieren, wenn der Benutzer die Seite nach unten scrollt, damit sie länger sichtbar bleiben. Und für Sie Blogger da draußen ist es sehr sinnvoll, Ihrer Beitragsvorlage ein klebriges E-Mail-Opt-In hinzuzufügen, um dieses wichtige Formular auf subtile, aber effektive Weise im Vordergrund zu halten.

In diesem Tutorial zeigen wir Ihnen, wie Sie Ihrer Divi-Blogpost-Vorlage ein Sticky-E-Mail-Opt-In hinzufügen, das mehr Aufmerksamkeit auf sich zieht und hoffentlich mehr Leads anzieht. Wir zeigen Ihnen sogar, wie Sie dem Sticky-E-Mail-Opt-In einen Popup-Hover-Effekt hinzufügen!

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Laden Sie die Sticky Email Optin Post Vorlage 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!

So laden Sie die Beitragsvorlage mit der Sticky-E-Mail-Option auf Ihre Site hoch

Um die Vorlage hochzuladen, navigieren Sie zum Divi Theme Builder im Backend Ihrer WordPress-Website.

Dann sehen Sie in der oberen rechten Ecke ein Symbol mit zwei Pfeilen. Klicken Sie auf das Symbol.

Navigieren Sie zum Import-Tab, laden Sie die JSON-Datei hoch, die Sie in diesem Beitrag herunterladen konnten, und klicken Sie auf 'Divi Theme Builder-Vorlagen importieren'.

Nachdem Sie die Datei hochgeladen haben, sehen Sie eine neue Vorlage mit einem neuen Textbereich, der All Posts zugewiesen wurde. Speichern Sie die Änderungen im Divi Theme Builder, sobald die Vorlage aktiviert werden soll.

Kommen wir zum Tutorial, ja?

Teil 1: Importieren Sie die vorgefertigte Blog-Post-Vorlage

Für dieses Tutorial verwenden wir die Blog-Post-Vorlage für Divi's Business Consultant Layout Pack, die Sie von diesem Blog-Post herunterladen können.

Nachdem Sie die ZIP-Datei heruntergeladen haben, müssen Sie sie entpacken und in den Divi Theme Builder importieren.

So geht's…

1. Navigieren Sie zu Divi > Theme Builder.
2. Klicken Sie oben rechts auf das Portabilitätssymbol.
3. Wählen Sie die Registerkarte Importieren im Portabilitäts-Popup.
4. Wählen Sie die JSON-Datei aus der heruntergeladenen Datei aus.
5. Klicken Sie auf die Schaltfläche Importieren.

Teil 2: Hinzufügen der Sticky-E-Mail-Option zur Vorlage

Nachdem die JSON-Datei importiert wurde, klicken Sie auf das Bearbeitungssymbol, um das benutzerdefinierte Körpervorlagenlayout zu bearbeiten.

Unten im Layout der Beitragsvorlage finden Sie den Abschnitt mit dem E-Mail-Opt-In-Formular, das wir für unser Sticky-E-Mail-Opt-In verwenden.

In diesem Beispiel möchten wir, dass die E-Mail-Anmeldung für einen Abschnitt kleben bleibt, damit der Benutzer die E-Mail-Anmeldung erst sieht, wenn er zu dem Abschnitt mit der E-Mail-Anmeldung scrollt. Da sich das E-Mail-Opt-In jedoch in einem eigenen Abschnitt befindet, hat das E-Mail-Opt-In nicht genügend Platz zum Verschieben. Daher müssen wir es in den obigen Abschnitt einfügen, der den Kommentarabschnitt enthält, damit das E-Mail-Opt-In über diesem Abschnitt schwebt, bevor es an seinem ursprünglichen Ort zur Ruhe kommt.

Neue Zeile im obigen Abschnitt hinzufügen

Erstellen Sie dazu direkt unter der Zeile mit dem Kommentarmodul eine neue einspaltige Zeile.

Zeilenstyling hinzufügen

Öffnen Sie dann die Einstellungen der neuen Zeile und fügen Sie wie folgt eine Hintergrundfarbe hinzu:

• Hintergrundfarbe: #282828

Aktualisieren Sie auf der Registerkarte "Design" die folgende Größe und den folgenden Abstand der Zeile:

• Breite: 100%
• Maximale Breite: 100%
• Rand: 15vw oben
• Padding: 0px oben, 0px unten

E-Mail-Anmeldung in neue Zeile verschieben

Sobald das Zeilenstyling eingerichtet ist, verschieben Sie das E-Mail-Opt-In im unteren Bereich in die neue Zeile, die Sie gerade erstellt haben.

Löschen Sie den unteren Abschnitt (wir brauchen ihn nicht mehr).

E-Mail-Anmeldung mit Sticky Position aktualisieren

Öffnen Sie dann die Einstellungen für das E-Mail-Opt-In jetzt in der neuen Zeile und aktualisieren Sie die Stickpositionsoptionen wie folgt:

• Klebrige Position: Nach unten kleben
• Oberes Sticky-Limit: Abschnitt

Dadurch bleibt das E-Mail-Opt-In beim Scrollen durch den Abschnitt am unteren Rand des Browserfensters hängen, bevor es in der übergeordneten Zeile zur Ruhe kommt.

E-Mail-Opt-in-Styling aktualisieren

Aktualisieren Sie auf der Registerkarte "Design" das Layout der E-Mail-Anmeldung wie folgt:

• Layout: Körper oben, Form unten

Aktualisieren Sie dann das folgende Styling:

• Titeltextgröße: 32px
• Maximale Breite: 600px
• Modulausrichtung: Mitte

Stellen Sie dann den Animationsstil auf Keine.

Ergebnis

An dieser Stelle können wir das Ergebnis überprüfen, indem wir einen Beitrag in einem anderen Browserfenster anzeigen.

Styling für klebrige Positionen hinzufügen

Wenn sich das E-Mail-Opt-In in der Sticky-Position befindet, können wir dem Modul ein spezielles Styling hinzufügen, das nur für den Sticky-Status gilt. Dies ermöglicht es uns, verschiedene Farbschemata hinzuzufügen, um den weißen Hintergrund zu versetzen, um ihn etwas mehr hervorzuheben.

Um eine andere Hintergrundfarbe für den Sticky-Status hinzuzufügen, öffnen Sie die E-Mail-Opt-In-Einstellungen und wählen Sie das Miniaturbildsymbol (Sticky-Symbol) neben der Hintergrundoption. Klicken Sie dann auf den Sticky-Tab und fügen Sie die folgende Hintergrundfarbe hinzu:

• Hintergrundfarbe (klebrig): #282828

Fahren Sie mit diesem Vorgang fort, um den folgenden Optionen auf der Registerkarte „Design“ ein klebriges Styling hinzuzufügen:

• Titeltextfarbe (klebrig): #ffffff
• Textkörperfarbe (klebrig): #ffffff
• Max. Breite (klebrig): 500px
• Polsterung (klebrig): 18 Pixel oben, 30 Pixel unten, 30 Pixel links, 30 Pixel rechts

Ergebnis

Schauen wir uns nun das Ergebnis in einem Live-Beitrag an.

Hover-Popup-Effekt zu Sticky Email Opt-in hinzufügen

Um dem Sticky-E-Mail-Opt-In einen Hover-Popup-Effekt hinzuzufügen, öffnen Sie die E-Mail-Opt-In-Einstellungen und aktualisieren Sie die Stick-Transformationsübersetzung wie folgt:

• Transformieren Y-Achse übersetzen (klebrig): 85%

Dadurch wird das E-Mail-Opt-In nach unten (außerhalb des Darstellungsbereichs) um 85 % seiner eigenen Höhe gebracht, sodass gerade so viel des E-Mail-Optins sichtbar wird, dass der Benutzer mit der Maus über den Titel fahren kann.

Fügen Sie dann der Transformationsoption einen Schwebezustand hinzu, damit die Transformationsübersetzungsposition beim Schweben wieder an ihrer ursprünglichen Position ist:

• Transformieren Y-Achse verschieben (Hover): 0%

Ergebnis

Hier ist das Endergebnis.

Endgültige Ergebnisse

Hier sind die drei Versionen unseres Sticky-Headers, die wir erstellt haben.

Abschließende Gedanken

Glücklicherweise macht Divi das Hinzufügen von Sticky-E-Mail-Opt-Ins zu Ihrer Website einfach. Dadurch bleibt mehr Zeit für die Optimierung des Designs Ihres Sticky-Elements, um Ihr Formular auf einzigartige Weise anzuzeigen. Hoffentlich hilft Ihnen diese Technik bei anstehenden Blogprojekten.

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

Danke schön!