So fügen Sie Ihren Blog-Posts in Divi . ein durch Scrollen ausgelöstes Popup hinzu

Das Hinzufügen eines durch Scrollen ausgelösten Popups zu Ihren Blog-Posts scheint eine wirklich kluge Sache zu sein. Sie haben sie vielleicht schon beim Lesen anderer Blogs gesehen. Wenn der Benutzer zu einem bestimmten Punkt des Beitrags (normalerweise dem Ende) scrollt, erscheint plötzlich eine Box mit einem Call-to-Action. Der ganze Zweck eines durch Scrollen ausgelösten Popups besteht darin, Besuchern genau in dem Moment einen gezielten Aufruf zum Handeln zu präsentieren, in dem sie es auf der Seite sehen sollen. Kurz gesagt, es ist ein großartiges Tool, um Conversions zu steigern oder qualifizierte Leads zu gewinnen. Aus diesem Grund ermöglichen Ihnen viele Conversion-Boosting-Plugins (wie unser eigenes Bloom oder wie Optin Monster) genau das Gleiche.

In diesem Tutorial zeigen wir Ihnen, wie Sie Ihren Blog-Posts in Divi ein durch Scrollen ausgelöstes Popup von Grund auf ohne Plugin hinzufügen. Dazu verwenden wir den Divi Theme Builder, um ein Popup zu entwerfen, das einen verwandten Beitrag nach Kategorie sowie ein Popup mit einem E-Mail-Optin enthält. Das Auslösen des Scrollens wird mit einem kleinen Ausschnitt von jQuery erreicht.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf die durch Scrollen ausgelösten Popups, die wir erstellen werden.

Wir erstellen ein Popup, um einen verwandten Beitrag (nach Kategorie) anzuzeigen, wie unten gezeigt.

Und wir zeigen Ihnen auch, wie Sie dem Popup ein E-Mail-Opt-In hinzufügen, wie hier gezeigt.

Laden Sie die Divi-Post-Vorlage mit Scroll-Triggering-Popup KOSTENLOS herunter

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

Um das Layout in Ihre Seite zu importieren, extrahieren Sie einfach die ZIP-Datei und fügen Sie eine der JSON-Dateien mit der Option „Theme Builder Portability“ zum Divi Theme Builder hinzu.

Kommen wir zum Tutorial, sollen wir?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie das Divi-Theme installieren und aktivieren. Stellen Sie sicher, dass Sie die neueste Version von Divi haben.

Sie müssen das vierte Theme-Builder-Paket herunterladen, da wir für dieses Tutorial die vorgefertigte Beitragsvorlage aus diesem Paket verwenden werden.

Sie benötigen außerdem mindestens einige zu Testzwecken erstellte Blogbeiträge, damit die Beitragsvorlage die Ergebnisse zeigt.

Danach sind Sie bereit zu gehen.

Erstellen eines durch Scrollen ausgelösten Pop-ups am Ende Ihrer Divi-Blog-Posts

Importieren der Blog-Post-Vorlage aus dem vierten Theme-Builder-Paket

Navigieren Sie im WordPress-Dashboard zu Divi > Theme Builder. Wählen Sie im Theme Builder das Portabilitätssymbol oben rechts auf der Seite aus. Wählen Sie im Portabilitäts-Popup die Registerkarte Importieren, wählen Sie die Datei theme-builder-pack-4-post-template.json und klicken Sie auf die Schaltfläche Importieren. (Diese Importdatei befindet sich im Ordner Fourth Theme Builder Pack)

Sie können auch die Option auswählen, die globale Kopf- und Fußzeile als statische Layouts zu importieren.

Nachdem die Vorlage importiert wurde, klicken Sie auf das Symbol, um den benutzerdefinierten Körperbereich zu bearbeiten.

Dadurch gelangen Sie zum Layout-Editor für Körpervorlagen, in dem wir die durch Scrollen ausgelösten Popups hinzufügen.

Entwerfen des durch Scrollen ausgelösten Popups mit einem verwandten Beitrag nach Kategorie

Das Popup wird in einer Divi-Zeile enthalten. Sobald wir die Popup-Funktion eingerichtet haben, können Sie diese Zeile daher mit einem beliebigen Modul füllen, um jeden gewünschten Inhalt zu erstellen. Für dieses erste Beispiel erstellen wir ein Popup mit einem verwandten Beitrag nach Kategorie. Wenn ein Besucher auf diese Weise zum Ende des Beitrags scrollt, wird ihm ein verwandter Beitrag in einem Popup vorgeschlagen.

So geht's.

Zeile mit einer Spalte hinzufügen

Fügen Sie zuerst eine einspaltige Zeile direkt unter der Zeile hinzu, die das Post-Inhaltsmodul im Post-Vorlagen-Layout enthält.

Zeileneinstellungen

Aktualisieren Sie vor dem Hinzufügen eines Moduls die Zeileneinstellungen wie folgt:

• Hintergrundfarbe: #ffffff
• Dachrinnenbreite: 1
• Breite: 300px (Desktop), 200px (Telefon)
• Polsterung: 20px oben, 0px unten
• Box Shadow: siehe Screenshot

Textmodul hinzufügen

Nachdem die Zeileneinstellungen angepasst wurden, fügen Sie der Zeile ein Textmodul hinzu. Dies wird der Titelbereich unseres zugehörigen Post-Popups sein.

Inhalt

Aktualisieren Sie den Textkörperinhalt mit dem Text „Verwandter Beitrag“.

Entwurf

Aktualisieren Sie dann die Designeinstellungen wie folgt:

• Textschriftart: Heebo
• Textschriftart: TT
• Text Textfarbe: #f94857
• Textausrichtung: Mitte

Blog-Modul hinzufügen

Fügen Sie unter dem Textmodul ein Blog-Modul hinzu.

Inhalt

Da wir nur einen verwandten Beitrag präsentieren möchten, werden wir die Beitragsanzahl auf eins begrenzen und die „aktuelle Kategorie“ einschließen, damit der im Popup angezeigte Beitrag dieselbe Kategorie des tatsächlichen Beitrags hat, der in der Vorlage angezeigt wird.

Aktualisieren Sie Folgendes:

• Beitragsanzahl: 1
• Enthaltene Kategorien: Aktuelle Kategorie

Elemente

Stellen Sie in der Optionsgruppe Elemente sicher, dass Sie auswählen, dass nur das vorgestellte Bild angezeigt wird. Alles andere ausblenden.

Entwurf

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Titelschriftart: Heebo
• Schriftstärke des Titels: Ultra Bold
• Titeltextgröße: 16px
• Höhe der Titelzeile: 1,4 em
• Polsterung: 5 % oben, 5 % links, 5 % rechts

Erweiterte Zeileneinstellungen

CSS-Klasse, benutzerdefiniertes CSS und Z-Index

Auf der Registerkarte "Erweitert" müssen wir unserer Zeile eine CSS-Klasse, ein kleines benutzerdefiniertes CSS zuweisen und den Z-Index aktualisieren, damit das Popup über dem anderen Inhalt auf der Seite bleibt.

Dieser Schritt blendet die Zeile aus, wenn Sie den Visual Builder am Frontend verwenden. Daher ist es möglicherweise besser, die Drahtmodellansicht bereitzustellen, bevor Sie diese Optionen aktualisieren.

Öffnen Sie im Drahtmodellansichtsmodus die Zeileneinstellungen wieder und fügen Sie die folgende CSS-Klasse hinzu:

• CSS-Klasse: post-row

Fügen Sie dann das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

position: fixed;
bottom: 0%;
right: -300px;

Und aktualisieren Sie den Z-Index:

• Z-Index: 999

Teiler als Scroll-Triggerpunkte hinzufügen

An diesem Punkt ist unser Popup einsatzbereit. Jetzt müssen wir entscheiden, wo wir unsere Scroll-Triggerpunkte auf der Beitragsvorlage hinzufügen, damit das Popup angezeigt oder ausgeblendet wird, sobald der Benutzer zu diesen Punkten scrollt. Die Scroll-Triggerpunkte werden durch ein Element mit einer CSS-Klasse bestimmt. Da wir möchten, dass sich der Scroll-Triggerpunkt am Ende des Beitrags befindet, können wir einen Teiler mit einer CSS-Klasse als unser Scroll-Triggerpunktelement verwenden.

Scroll-Triggerpunkt Nr. 1 hinzufügen

Um unseren ersten Scroll-Triggerpunkt hinzuzufügen, fügen wir ein Trennmodul direkt unter dem Post-Inhaltsmodul hinzu.

Fügen Sie dann die folgende CSS-Klasse hinzu:

• CSS-Klasse: post-waypoint

Das war einfach.

Scroll-Triggerpunkt 2 hinzufügen

Um nun den zweiten Triggerpunkt hinzuzufügen (der das Popup weiter unten auf der Seite ausblendet), kopieren Sie das gerade erstellte Trennmodul.

Fügen Sie es dann an einer weiter unten in der Beitragsvorlage befindlichen Stelle ein, an der das Popup geschlossen (oder ausgeblendet) werden soll. In diesem Beispiel füge ich es direkt unter dem Blogmodul für verwandte Beiträge und direkt über dem Kommentarbereich der Beitragsvorlage hinzu.

Benutzerdefinierten Code mit Codemodul hinzufügen

Alles, was Sie noch tun müssen, damit dieses durch Scrollen ausgelöste Popup funktioniert, ist ein kleiner Code.

Fahren Sie fort und fügen Sie der Beitragsvorlage ein Codemodul hinzu.

Fügen Sie dann den folgenden Code in das Codefeld ein:

<style>
  .post-row {
    transition: all .4s;
  }
  .post-row.show-post {
    right: 0px;
  }
</style>
<script>
  jQuery(document).ready(function($) {
    $('.post-waypoint').waypoint(function() {
        $('.post-row').toggleClass('show-post');
    }, {offset: '97%'});
  });
</script>

Ergebnis

Um das Ergebnis zu sehen, besuchen Sie einen Ihrer Blog-Posts und scrollen Sie auf der Seite nach unten. Sie sollten das zugehörige Beitrags-Popup sehen, wenn Sie das Ende des Beitragsinhalts erreichen. Scrollen Sie weiter, um es direkt nach dem Abschnitt mit den zugehörigen Beiträgen des Beitrags auszublenden.

Hinzufügen einer E-Mail-Option zum durch Scrollen ausgelösten Popup

Das zugehörige Post-Popup ist cool, aber vielleicht möchten Sie stattdessen eine E-Mail-Option zum Popup. Dies ist ganz einfach. Tatsächlich können wir sogar das E-Mail-Optin verwenden, das bereits im vorgefertigten Footer-Layout dieser Vorlage erstellt wurde.

Speichern Sie die E-Mail-Option für die Fußzeile in der Divi-Bibliothek

Speichern Sie Ihr Layout und verlassen Sie den Theme-Builder. Klicken Sie dann auf , um das benutzerdefinierte Layout der Fußzeilenvorlage zu bearbeiten.

Suchen Sie das E-Mail-Optin-Modul und speichern Sie es in der divi-Bibliothek.

Gespeicherte E-Mail-Option zur Popup-Zeile hinzufügen

Kehren Sie nun zum benutzerdefinierten Body-Vorlagen-Layout zurück und fügen Sie die gespeicherte E-Mail-Option in derselben Zeile hinzu, die Sie als Popup verwenden. Denken Sie daran, dass alles in dieser Zeile als Popup-Inhalt angezeigt wird.

Da Sie das Text- und Blog-Modul nicht verwenden, können Sie die Anzeige im Frontend deaktivieren.

E-Mail-Optionseinstellungen

Sobald das E-Mail-Optin eingerichtet ist und die anderen Module deaktiviert sind, aktualisieren Sie die E-Mail-Optin-Einstellungen wie folgt:

• Titel: "Gefällt mir dieser Artikel?"
• Hauptteil: „Abonnieren Sie unseren Newsletter!“

Fügen Sie dann die folgende Polsterung hinzu:

• Polsterung: 5% unten, 20px rechts

Ergebnis

Sehen Sie sich jetzt das Ergebnis in einem Live-Beitrag an.

Abschließende Gedanken

Durch Scrollen ausgelöste Popups könnten definitiv eine wertvolle Bereicherung für Ihren Blog sein. Sie bieten eine unauffällige Möglichkeit, von qualifizierten Leads zu profitieren. Verwenden Sie ein Popup für verwandte Beiträge, um sie auf Ihrer Website zu engagieren, oder verwenden Sie eine E-Mail-Option, um Ihre Liste zu erweitern. Und mit Divi können Sie fast jeden anderen Inhalt hinzufügen, der Ihnen auch einfällt. Und Sie können genau entscheiden, wann der Besucher diese Popups sehen soll, was ziemlich mächtig ist. Ich hoffe, Sie finden es nützlich für Ihren eigenen Blog oder Ihr nächstes Projekt.

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

Danke schön!