So erstellen Sie WooCommerce Lucky Wheel Optin-Formulare mit Divi

Veröffentlicht: 2019-03-13

Jede Woche stellen wir Ihnen neue und kostenlose Divi-Layoutpakete zur Verfügung, die Sie für Ihr nächstes Projekt verwenden können. Für eines der Layout-Pakete teilen wir auch einen Anwendungsfall, der Ihnen hilft, Ihre Website auf die nächste Stufe zu heben.

Diese Woche zeigen wir Ihnen im Rahmen unserer laufenden Divi-Designinitiative, wie Sie WooCommerce-Glücksrad-Optin-Formulare mit Divi und dem WP Optin Wheel-Plugin erstellen. Dieses Tutorial wird Ihnen hoffentlich dabei helfen, die Conversion-Raten von Optin-Formularen zu steigern. Die Gamification-Funktion des Glücksrad-Optin-Formulars ermöglicht es Ihnen, mit Besuchern zu interagieren und sie mit einem Rabattcode zu belohnen, den sie für ihre Online-Einkäufe verwenden können.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Glücksrad optin

WooCommerce installieren

Nach Plugin suchen & installieren

Das erste, was Sie tun müssen, wenn Sie es noch nicht getan haben, ist die Installation von WooCommerce auf Ihrer WordPress-Website. Wir gehen auch davon aus, dass Sie das Hardware Store Layout Pack auf der Divi-Website eingerichtet haben, an der Sie gerade arbeiten.

Gehen Sie zu Ihren Plugins und suchen Sie nach WooCommerce. Wenn Sie es gefunden haben, klicken Sie auf die Schaltfläche "Jetzt installieren".

Glücksrad optin

aktivieren Sie

Stellen Sie sicher, dass Sie das WooCommerce-Plugin sofort aktivieren.

Glücksrad optin

WooCommerce einrichten

Dann leitet WooCommerce Sie automatisch zu seinem Einrichtungsformular weiter. Hier müssen Sie alle Details ausfüllen, um Ihren Shop für die Veröffentlichung vorzubereiten. Sobald Sie diesen Vorgang durchlaufen haben, werden alle benötigten WooCommerce-Seiten automatisch zu Ihrer Website hinzugefügt.

Glücksrad optin

Installieren Sie das WP Optin Wheel-Plugin

Nach Plugin suchen & installieren

Um das Glücksrad-Optin-Formular zu erstellen, verwenden wir ein kostenloses Gamification-Plugin namens WP Optin Wheel. Gehen Sie zurück zu Ihren Plugins und suchen Sie nach dem WP Optin Wheel-Plugin. Klicken Sie dann auf die Schaltfläche „Jetzt installieren“.

Glücksrad optin

aktivieren Sie

Fahren Sie fort, indem Sie das Plugin aktivieren.

Glücksrad optin

Produkte zu WooCommerce hinzufügen

Neues Produkt hinzufügen

Wenn Sie bereits eine eCommerce-Website betreiben, können Sie diesen Teil überspringen. Wenn Sie jedoch nur Dinge ausprobieren, empfehlen wir Ihnen, Ihrem WooCommerce-Plugin einige Produkte hinzuzufügen. Dies wird Ihnen helfen, das Glücksrad-Optin-Formular anschließend zu testen. Um ein neues Produkt hinzuzufügen, gehen Sie zu Produkte > Neu hinzufügen .

Glücksrad optin

Produktdetails hinzufügen

Füllen Sie alle Produktdetails aus. Dazu gehören unter anderem Produktname, Beschreibung, vorgestelltes Bild, Preis und Kategorie. Veröffentlichen Sie die Produktseite, sobald Sie diese Details hinzugefügt haben.

Glücksrad optin

Wiederholen Sie dies für jedes Produkt

Wiederholen Sie den gleichen Schritt für jedes der Produkte, die Sie zu Ihrer Website hinzufügen möchten.

Glücksrad optin

Gutscheine zu WooCommerce hinzufügen

Gehe zu Gutscheine

Jetzt ist es Zeit, Coupons hinzuzufügen. Später in diesem Beitrag verwenden wir die Coupons, die wir im Glücksrad-Optin-Formular erstellen. Gehen Sie zu Ihrem WordPress-Dashboard > WooCommerce > Coupons . Sobald Sie dort sind, können Sie Ihren ersten Coupon erstellen.

Glücksrad optin

Gutschein hinzufügen #1: 5% RABATT

Allgemein

Im Glücksrad mit 12 Scheiben können Sie entscheiden, wie viele Scheiben einen Preis beinhalten. Sie können beispielsweise 4 Preise anbieten und für jeden einen anderen Coupon erstellen. Sie können auch einen Coupon für mehrere Plätze auf dem Rad verwenden. Nachdem Sie Ihren ersten Gutschein erstellt haben, geben Sie den Gutscheincode oben auf der Seite ein. Ändern Sie dann die allgemeinen Einstellungen:

  • Rabattart: Prozentualer Rabatt
  • Gutscheinbetrag: 5
  • Gutschein-Ablaufdatum: Geben Sie das gewünschte Datum ein

Glücksrad optin

Nutzungsbeschränkungen

Fahren Sie fort, indem Sie zu den Registerkarten für die Nutzungsbeschränkung wechseln. Hier können Sie entscheiden, ob es einen Mindest- und Höchstbetrag gibt, der mit dem Gutschein verknüpft ist. Sie können auch folgende Kästchen ankreuzen:

  • Aktivieren Sie dieses Kontrollkästchen, wenn der Coupon nicht in Verbindung mit anderen Coupons verwendet werden kann.
  • Aktivieren Sie dieses Kontrollkästchen, wenn der Coupon nicht für im Angebot befindliche Artikel gelten soll. Gutscheine pro Artikel funktionieren nur, wenn der Artikel nicht im Angebot ist. Gutscheine pro Warenkorb funktionieren nur, wenn sich Artikel im Warenkorb befinden, die nicht im Angebot sind.

Glücksrad optin

Wiederholen Sie die Schritte für 3 andere Coupons

Erstellen Sie so viele Coupons, wie Sie möchten, indem Sie die oben genannten Schritte ausführen. Sie sind nicht darauf beschränkt, einen prozentualen Rabatt anzubieten. Sie können auch einen Coupon erstellen, der einen festen Warenkorb- oder Produktrabatt bietet, und diesen in das Glücksrad einschließen.

Glücksrad optin

Erstellen Sie ein Glücksrad-Optin-Formular

Gehe zu Plugin-Einstellungen

Nachdem wir nun alle notwendigen Schritte durchlaufen haben, damit das Glücksrad-Optin-Formular funktioniert, können wir damit beginnen, eines zu erstellen! Gehen Sie zu Ihrem WordPress- Dashboard > WP Optin Wheel .

Glücksrad optin

MailChimp-API-Schlüssel hinzufügen

Bevor Sie ein Glücksrad erstellen können, müssen Sie Ihren MailChimp-API-Schlüssel hinzufügen. Die kostenlose Version des WP Wheel Optin-Plugins bietet nur die Integration mit MailChimp. Wenn Sie das Glücksrad mit einem anderen Anbieter verknüpfen möchten, müssen Sie auf die Premium-Version umsteigen.

Glücksrad optin

Neues Rad erstellen

Wähle das Thema

Beginnen wir mit der Erstellung des Rades! Wählen Sie eine Farbpalette Ihrer Wahl. Für dieses Tutorial wählen wir das orangefarbene aus, da es gut zur Farbpalette des Hardware Store Layout Packs passt.

Glücksrad optin

Setup-Chancen

Der nächste Schritt bei der Erstellung Ihres Glücksrad-Optin-Formulars besteht darin, einen Gewinnänderungsprozentsatz auszuwählen. Dieser Prozentsatz gibt an, wie oft Leute etwas gewinnen, wenn sie das Rad drehen. In diesem Fall hat jeder Besucher, der das Rad dreht, eine 70%ige Chance, einen Gutscheincode zu gewinnen.

Glücksrad optin

Slices einrichten

Fahren Sie mit dem Einrichten der 12 verschiedenen Scheiben fort. Sie können jedes der Slices einer von drei Optionen zuweisen:

  • Kein Preis: Besucher gewinnt nichts
  • Gutscheincode: Besucher gewinnt einen Gutscheincode
  • Link: Besucher gewinnen zum Beispiel ein E-Book

In diesem Beispiel verwenden wir 4 der 12 Slices, um einen Gutscheincode hinzuzufügen. Wir richten auch die Chancen für jeden dieser Slices einzeln ein.

Glücksrad optin

Formular-Generator einrichten

Der nächste Schritt hilft Ihnen, das Optin-Formular selbst zu erstellen. Sie werden feststellen, dass dort bereits ein E-Mail-Feld vorhanden ist. Der einzige andere Feldtyp, den Sie dem Anmeldeformular hinzufügen können, ist ein Kontrollkästchen. Sie haben diesen Feldtyp speziell hinzugefügt, um das Formular DSGVO-konform zu machen.

Glücksrad optin

Glücksrad optin

Inhaltseinstellungen

Anschließend können Sie den schriftlichen Inhalt des Formulars für das Glücksrad-Optin-Formular einrichten. Gehen Sie voran und ändern Sie alle Inhalte, damit sie mit Ihrer Website übereinstimmen.

Glücksrad optin

Designeinstellungen

Öffnen Sie als nächstes die Designeinstellungen und wählen Sie 'Kein Muster' für die Option Hintergrundmuster.

Glücksrad optin

Verhaltenseinstellungen

Sie können auch auswählen, wann das Glücksrad-Optin-Formular in den Verhaltenseinstellungen angezeigt wird.

Glücksrad optin

DSGVO

Zu guter Letzt können Sie sicherstellen, dass die von Besuchern geteilten Daten nicht gespeichert werden, es sei denn, sie haben die verschiedenen Kästchen in Ihrem Opt-In-Formular angekreuzt und Sie sind fertig! Speichern Sie das Glücksrad-Opt-In-Formular und gehen Sie zu Ihrer Website, um es auszuprobieren.

Glücksrad optin

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Glücksrad optin

Abschließende Gedanken

Dieses Tutorial ist Teil unserer laufenden Divi-Designinitiative, bei der wir versuchen, jede Woche etwas mehr in Ihre Toolbox zu bringen. Wir hoffen, dass dieses Tutorial Ihnen hilft, Ihre E-Mail-Listen schneller und interaktiv zu erstellen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!