Wie man verlassene Warenkörbe mit einem Promo-Popup unter Verwendung der Bedingungsoptionen von Divi neu ausrichtet

Das Retargeting aufgegebener Warenkörbe ist eine effektive Marketingtechnik, die Kunden dazu anregt, die Artikel zu kaufen, die sie aufgegeben haben, nachdem sie sie ihrem Warenkorb auf Ihrer Website hinzugefügt haben. Eine effektive Strategie, um diese Kunden dazu zu bringen, den Kauf abzuschließen, besteht darin, einen Rabatt auf die Artikel anzubieten, die sie kaufen wollten. Der knifflige Teil besteht darin, diese Rabatte nur Benutzern anzubieten, die ihre Warenkörbe verlassen haben.

Die Bedingungsoptionen von Divi umfassen Anzeigebedingungen, mit denen Sie Inhalte basierend auf dem WooCommerce-Einkaufswageninhalt und den Seitenbesuchen eines Benutzers ein- oder ausblenden können. Diese Bedingungskombination ermöglicht es, die Benutzer, die ihren Einkaufswagen verlassen haben, mit einem Rabatt- oder Promo-Popup erneut anzusprechen.

In diesem Tutorial zeigen wir Ihnen, wie Sie aufgegebene Warenkörbe neu ausrichten können, indem Sie ein intelligentes Promo-Popup erstellen, das nur dann auf einer Zielseite angezeigt wird, wenn der Benutzer Artikel in seinem Warenkorb hat und die Checkout-Seite besucht hat.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Promo-Popup, das wir in diesem Tutorial erstellen werden.

Dieses Promo-Popup wird auf der Seite angezeigt, wenn der Benutzer ein Produkt in seinen Warenkorb gelegt und die Checkout-Seite besucht hat.

Laden Sie das Retargeting-Promo-Popup-Layout für verlassene Warenkörbe KOSTENLOS herunter

Um das Layout aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugriff auf den Download zu erhalten, müssen Sie sich mit dem unten stehenden Formular in unsere Divi Daily-E-Mail-Liste eintragen. 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 unten einfach Ihre E-Mail-Adresse ein und klicken Sie auf „Herunterladen“. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich für den Divi-Newsletter an und wir senden Ihnen per E-Mail eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer erstaunlicher und kostenloser Divi-Ressourcen, Tipps und Tricks. Folgen Sie uns und Sie werden in kürzester Zeit ein Divi-Meister sein. Wenn Sie bereits abonniert sind, geben Sie unten einfach Ihre E-Mail-Adresse ein und klicken Sie auf Herunterladen, um auf das Layoutpaket zuzugreifen.

DOWNLOAD

Sie haben sich erfolgreich angemeldet. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugriff auf kostenlose wöchentliche Divi-Layoutpakete zu erhalten!

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte „Importieren“ und wählen Sie die Download-Datei von Ihrem Computer aus.

Klicken Sie dann auf die Importschaltfläche.

Anschließend ist das Abschnittslayout in Divi Builder verfügbar.

Das Konzept verstehen

Bevor Sie mit dem eigentlichen Bauprozess des Tutorials beginnen, kann es hilfreich sein, das Grundkonzept dessen zu verstehen, was wir bauen werden. Die Idee ist, den Divi Builder zu verwenden, um ein Promo-Popup auf einer vorhandenen Zielseite zu erstellen. Sobald der Promo-Popup-Abschnitt erstellt ist, möchten wir die Bedingungsoptionen hinzufügen, die den Abschnitt anzeigen, wenn beide der folgenden Bedingungen erfüllt sind.

1. Der Benutzer hat Inhalte in seinem Warenkorb
2. Der Benutzer hat die Checkout-Seite besucht

Dies kann mit den integrierten Bedingungsoptionen von Divi beim Bearbeiten des Abschnitts (oder eines beliebigen Divi-Elements) erfolgen.

Sobald die Bedingungsoptionen für diesen Abschnitt (oder das Promo-Popup) festgelegt sind, können wir Benutzer, die ihren Einkaufswagen verlassen haben, erneut ansprechen, indem wir das Popup anzeigen, wenn sie die Bedingungen erfüllt haben. Der Prozess würde in etwa so ablaufen …

1. Der Benutzer besucht die Zielseite, ohne dass das Promo-Popup angezeigt wird
2. Der Benutzer fügt Inhalte zu seinem Einkaufswagen hinzu (Erfüllungsbedingung Nr. 1)
3. Der Benutzer besucht die Checkout-Seite (Erfüllungsbedingung Nr. 2), aber aus irgendeinem Grund schließt der Benutzer den Checkout-Vorgang nicht ab und verlässt die Seite.
4. Später besucht der Benutzer erneut die Zielseite, auf der jetzt das Promo-Popup angezeigt wird, das ihn zum Abschluss des Bestellvorgangs mit einem Rabatt weiterleitet.

Ziemlich cooles Zeug! Nun, da Sie das Konzept verstanden haben, kommen wir zum Tutorial, oder?

Was Sie für den Einstieg benötigen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Design.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (Visual Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Retargeting verlassener Warenkörbe mit einem Promo-Popup unter Verwendung von Divi's Bedingungsoptionen

Teil 1: Hochladen der vorgefertigten Zielseite

Für dieses Tutorial fügen wir das Promo-Popup zur Zielseite einer Divi-Website hinzu. Um diesen Prozess in Gang zu bringen, werden wir das Layout der Parfümerie-Landingpage aus Divi Builder importieren.

Öffnen Sie dazu das Einstellungsmenü und klicken Sie auf das Symbol „Aus Bibliothek hinzufügen“. Suchen und finden Sie dann das Parfümerie-Layoutpaket und klicken Sie darauf, um das Parfümerie-Layout-Seitenlayout zu verwenden.

Teil 2: Erstellen eines festen Abschnitts als Promo-Popup-Container

Sobald die Zielseite geladen ist. Scrollen Sie zum Ende der Seite und fügen Sie einen neuen regulären Abschnitt unterhalb des Fußzeilenabschnitts der Seite hinzu.

Abschnittseinstellungen

Breite und Polsterung

Aktualisieren Sie als Nächstes die Abschnittseinstellungen mit einer benutzerdefinierten maximalen Breite und Auffüllung wie folgt:

• Maximale Breite: 500 Pixel
• Polsterung: 10 Pixel oben, 10 Pixel unten

Grenze

Dann geben Sie dem Abschnitt einen Rahmen.

• Randbreite: 15px
• Rahmenfarbe: #f6f4f2

Box Schatten

Sobald der Rand vorhanden ist, fügen Sie dem Abschnitt einen Kastenschatten hinzu, um ein wenig Tiefe zu erhalten:

• Box Shadow: siehe Screenshot
• Feld-Schattenunschärfe-Stärke: 38px
• Schattenfarbe: rgba (203,146,116,0,6)

Animation

Um dem Popup eine verzögerte Animation zu geben, aktualisieren Sie den Animationsstil wie folgt:

• Animationsstil: Flip
• Animationsrichtung: Links
• Animationsdauer: 3000 ms

Dadurch wird der Popup-Bereich 3 Sekunden nach dem Laden der Seite mit einer netten Flip-Animation angezeigt.

Position

Aktualisieren Sie auf der Registerkarte Erweitert die Position, sodass der Abschnitt unten links im Browserfenster fixiert bleibt.

• Position: Fest
• Ort: Unten links

CSS-Klasse

Schließlich werden wir ein anklickbares „X“-Symbol hinzufügen, das das Popup schließt/ausblendet. Wir müssen dem Abschnitt eine benutzerdefinierte CSS-Klasse hinzufügen, um ihn mit jQuery anzusprechen.

Geben Sie die folgende CSS-Klasse ein:

• CSS-Klasse: et-promo-popup

Teil 3: Bedingungsoptionen zum Abschnitt hinzufügen

Sobald der Abschnitt (unser Popup-Container) erstellt ist, können wir die Bedingungsoptionen hinzufügen, die den Abschnitt anzeigen, wenn beide der folgenden Bedingungen erfüllt sind.

1. Der Benutzer hat Inhalte in seinem Warenkorb
2. Der Benutzer hat die Checkout-Seite besucht

Anzeigebedingung 1: Warenkorbinhalt

Zuerst fügen wir eine Anzeigebedingung hinzu, die den Abschnitt/das Popup anzeigt, wenn der Benutzer Inhalte in seinem Einkaufswagen hat.

Gehen Sie dazu auf die Registerkarte Erweitert unter den Abschnittseinstellungen. Klicken Sie dann auf das Plus-Symbol, um eine neue Bedingung hinzuzufügen.

Wählen Sie im Dropdown-Menü die Bedingung Warenkorbinhalt aus.

Stellen Sie sicher, dass im Popup-Menü „Warenkorbinhalt“ die Option „ Nur anzeigen, wenn der Warenkorb des Benutzers angezeigt wird“ auf „Hat Produkte“ eingestellt ist.

Speichern Sie dann die Änderungen.

HINWEIS: Diese Bedingung gilt speziell für Divi-Websites, die WooCommerce verwenden.

Anzeigebedingung 2: Seitenbesuch

Als Nächstes fügen wir eine Anzeigebedingung hinzu, die den Abschnitt/das Popup anzeigt, wenn der Benutzer eine bestimmte Seite besucht hat, in diesem Fall die Checkout-Seite auf einer WooCommerce-Website.

Gehen Sie dazu auf die Registerkarte Erweitert unter den Abschnittseinstellungen. Klicken Sie dann auf das Plus-Symbol, um eine neue Bedingung hinzuzufügen.

Wählen Sie im Dropdown -Menü die Bedingung Seitenbesuch aus.

Stellen Sie sicher, dass im Popup-Fenster „Warenkorbinhalt“ die Option „ Nur anzeigen, wenn der Benutzer angezeigt wird“ auf „Hat eine bestimmte Seite besucht“ eingestellt ist. Wählen Sie dann die Checkout-Seite aus der Liste der Seiten im Popup-Fenster aus.

Speichern Sie dann die Änderungen.

Anzeige, wenn alle Bedingungen wahr sind

Da wir mehrere Bedingungen im Spiel haben, können wir den Abschnitt anzeigen, wenn eine oder alle Bedingungen zutreffen.

In diesem Fall ist es sinnvoll, das Promo-Popup anzuzeigen, wenn alle Bedingungen erfüllt sind (der Benutzer hat Inhalte in seinem Warenkorb und er hat die Check-out-Seite besucht).

Wählen Sie unter Anzeigebedingungen Folgendes aus:

• Zeigt an, ob alle Bedingungen wahr sind

An diesem Punkt ist die von uns gesuchte Bedingungsfunktion bereits vorhanden, um den Abschnitt nur dann anzuzeigen, wenn ein Benutzer den Inhalt des Einkaufswagens hat und die Checkout-Seite besucht hat. Jetzt müssen wir nur noch den Abschnitt mit dem Inhalt füllen, der zum Erstellen der Promo benötigt wird.

Teil 4: Erstellen des Promo-Popup-Inhalts

Um den Inhalt für das Promo-Popup zu erstellen, werden wir vier Module hinzufügen:

1. Ein Klappentext-Modul mit einem anklickbaren X-Symbol, damit Benutzer das Popup schließen können
2. Ein Textbaustein für Titel und Fließtext
3. Ein weiterer Textbaustein für den Aktionscode
4. Und ein Button-Modul, das zur Checkout-Seite weiterleitet, damit Benutzer den Kauf abschließen können.

Erstellen des „X“-Symbols zum Schließen des Popups

Die Zeile für das Symbol

Bevor wir den Klappentext für das „X“-Symbol hinzufügen, fügen Sie dem Abschnitt eine neue einspaltige Zeile hinzu.

Aktualisieren Sie die Zeileneinstellungen wie folgt:

• Rinnenbreite: 1
• Breite: 100 %
• Polsterung: 0 Pixel oben, 0 Pixel unten

Geben Sie der Zeile dann eine absolute Position mit einem höheren Z-Index wie folgt:

• Position: Absolut
• Z-Index: 12

Das Symbol

Um das „X“-Symbol zum Schließen des Popups zu erstellen, fügen Sie ein neues Klappentext-Modul in die Zeile ein.

Entfernen Sie alle standardmäßigen Titel- oder Haupttexte aus dem Klappentext. Klicken Sie dann, um das X-Symbol für den Klappentext zu verwenden.

Aktualisieren Sie auf der Registerkarte Design Folgendes:

• Symbolfarbe: #ddd
• Symbolschriftgröße: 40px

• Breite: 40px
• Modulausrichtung: rechts
• Höhe: 40px

Fügen Sie auf der Registerkarte Erweitert dem Klappentext die folgende benutzerdefinierte CSS-Klasse hinzu:

• CSS-Klasse: et-close-popup-icon

Wir müssen diese Klasse später mit unserer jQuery ansprechen.

Erstellen des Titels und des Haupttexts für das Popup

Die anderen Module, die wir hinzufügen werden, benötigen eine separate Zeile. Fügen Sie eine neue einspaltige Zeile unter der vorherigen Zeile mit dem Klappentext-Symbol hinzu.

Aktualisieren Sie dann die Zeileneinstellungen wie folgt:

• Rinnenbreite: 1
• Breite: 100 %
• Polsterung: 0 Pixel oben, 20 Pixel unten, 40 Pixel links, 40 Pixel rechts

Um den Titel- und Textinhalt hinzuzufügen, fügen Sie ein neues Textmodul in der neuen Zeile hinzu.

Aktualisieren Sie den Inhalt im Textbereich mit dem folgenden HTML:

<h2>Get 20% Off!</h2>
Use the following coupon code during checkout to get 20% off your perfume order when you buy today! This offer is only available for a limited time.

Aktualisieren Sie auf der Registerkarte Design die Textstile wie folgt:

• Schriftstärke des Textes: Semi Bold
• Text Textgröße: 18px
• Textzeilenhöhe: 1,8 m
• Textausrichtung: Zentriert
• Überschrift 2 Schriftart: Cormorant Garamond
• Überschrift 2 Schriftstärke: Mittel
• Überschrift 2 Textfarbe: #000
• Überschrift 2 Textgröße: 54px (Desktop), 38px (Tablet und Telefon)

Erstellen des Promo-Codes für das Popup

Um den Promo-Code zu erstellen, fügen Sie einen neuen Textbaustein unter dem vorherigen hinzu.

Aktualisieren Sie den Körperbereich mit dem Text „Code: Perfumeoff“

Aktualisieren Sie auf der Registerkarte Design Folgendes:

• Schriftstärke des Textes: Semi Bold
• Text Textfarbe: #cb9274
• Text Textgröße: 16px
• Textbuchstabenabstand: 2px
• Textausrichtung: Zentriert

• Rand: 15 Pixel oben, 15 Pixel unten
• Polsterung: 15 Pixel oben, 15 Pixel unten
• Randbreite: 4px
• Rahmenfarbe: #f4e8dc
• Rahmenstil: Gestrichelt

Erstellen der Schaltfläche für das Popup

Um die Schaltfläche zu erstellen, kopieren Sie das Schaltflächenmodul einer der vorhandenen Schaltflächen auf das vorgefertigte Layout.

Dann vorbei am Schaltflächenmodul unter dem Promo-Code-Textmodul.

Aktualisieren Sie den Schaltflächentext und die Ausrichtung wie folgt:

• Schaltflächentext: Gutschein an der Kasse verwenden
• Tastenausrichtung: Mitte

Vergessen Sie nicht, einen Link zur Checkout-Seite hinzuzufügen. Dazu können Sie einen dynamischen Seitenlink als Button-Link-URL zu Ihrer bestehenden Checkout-Seite hinzufügen.

Benutzerdefinierter Code zum Schließen des Popups beim Klicken auf das „X“-Symbol

Für unseren letzten Schritt müssen wir ein kurzes CSS- und jQuery-Snippet hinzufügen, um das Popup zu schließen, wenn Sie auf das „X“-Symbol klicken.

Um den Code hinzuzufügen, fügen Sie ein neues Codemodul unter der Schaltfläche hinzu.

Fügen Sie dann das folgende CSS ein und achten Sie darauf, den Code in die erforderlichen Stil- Tags einzuschließen.

.et-close-popup-icon:hover {
  cursor: pointer;
}

Fügen Sie unter dem letzten Style-Tag, das das CSS-Snippet enthält, die folgende jQuery ein und achten Sie darauf, den Code mit den erforderlichen Skript -Tags zu umschließen.

(function ($) {
  $(document).ready(function () {
    $(".et-close-popup-icon").on("click", function() {
      $(".et-promo-popup").slideUp("slow");
    })
  });
})(jQuery);

Endergebnis

Derzeit bleibt das Promo-Popup ausgeblendet, bis Sie beide Bedingungen erfolgreich erfüllt haben, die mit den Bedingungsoptionen von Divi im Abschnitt festgelegt wurden. Das bedeutet, dass Sie ein Produkt in Ihren Warenkorb legen und dann die Checkout-Seite besuchen müssen. Gehen Sie danach zurück zu der Landing Page, die wir gerade erstellt haben, und Sie sehen das Promo-Popup 3 Sekunden nach dem Laden der Seite.

So sieht das Promo-Popup aus, wenn Sie die Seite besuchen, nachdem Sie die Bedingungen erfüllt haben.

Hier ist das Popup auf dem Handy.

Und hier ist ein Beispiel für den Prozess, den ein Benutzer durchlaufen würde, bevor er die Promo sieht, die ihn erfolgreich neu ausrichtet, um den Bestellvorgang abzuschließen.

Abschließende Gedanken

Die bedingten Optionen von Divi öffnen die Tür für unzählige Möglichkeiten, Inhalte auf strategische Weise anzuzeigen. Das Promo-Popup, das wir in diesem Tutorial erstellt haben, eignet sich hervorragend für das Retargeting verlassener Warenkörbe. Aber es gibt so viele weitere Möglichkeiten, die Bedingungen an Ihre eigenen Bedürfnisse anzupassen oder einen völlig neuen Prozess für das Retargeting verlassener Warenkörbe zu entwickeln. Ich würde gerne Ihre Ideen hören!

Ich freue mich darauf, von dir in den Kommentaren zu hören.

Beifall!