Divi – OptIn Popup mit kostenlosen Plugin realisieren

29. Dezember 2020 | Wordpress, Themes und Plugins | 1 Kommentar

In diesem Beitrag stelle ich die eine Möglichkeit vor, PopUps per Button mit Divi Boardmitteln und einem kostenlosen Plugin zu realisieren.

Divi bringt schon von Hause aus ein leistungsfähiges Opt-In Modul mit. In vielen Fällen möchte man das sich das Opt-In Formular erst nach Klick auf einen Button öffnet. Wie das geht zeige ich dir hier Schritt für Schritt in diesem Beitrag.

Popup Plugin für Divi installieren

Um das Opt-In Formular in einem Popup zu öffnen benötigst du neben Divi auch das kostenlose Plugin Divi-Popup. Dieses Plugin bekommst du über das offizielle Plugin Reposetory von WordPress.

Also einfach herunterladen und aktivieren. Damit haben wir schon alles installiert was wir für unser Opt-In Popup benötigen.

Wo finde ich die Erweiterung Popup in Divi?

Nach dem aktivieren des Popup Plugin für Divi haben wir jetzt in den Einstellungen von jeder Section einen weiteren Tab mit dem Namen Popup.

In diesem Einstellungs Tab kann ich jetzt nur einen Schalter um diese Section zu einem Popup zu erklären und ich kann hier dem Popup eine ID zuweisen, Das war es auch schon.

Fangen wir jetzt mit der Umsetzung unseres Opt-In Popup an.

Schritt 1 Landingpage erstellen

Als erstes erstellen wir unsere Landingpege mit dem Page-Builder von Divi, so wie wir es haben möchten. Hier ist es sinnvoll die Landingpage in verschiedene Sektionen zu unterteilen.

Wie du mit Divi und dem Pagebuilder umgehst setze ich in diesem Tutorial voraus. Ansonsten findest du hier einen kostenlosen Einsteiger Videokurs zu Divi, in dem ich dir die Grundfunktionen zeige. Außerdem kannst du dir einen Rabatt für den Erwerb von Divi sichern.

Du lernst: Wie du das Theme Divi für WordPress richtig nutzt und welche Vorteile Du dadurch hast…

  • Du lernst wie Du mit dem Divi Builder ganz ohne Programmierkenntnisse Deine Webseite zusammen klickst, sodass Du sofort starten kannst.
  • Du lernst was Divi alles kann, sodass Du Blogs, Firmenwebseiten, Online-Shops und vieles mehr mit Divi einfach erstellst.
  • Wie du mit wenigen Klicks fertige Vorlagen in Divi nutzt, sodass Du in wenigen Minuten eine professionelle Webseite erstellst.
  • Bereits über 700000 aktive Nutzer verwenden Divi.
  • Du bekommst in der Video-Serie ein exklusives Angebot, sodass Du dauerhaft 20% sparst.

Schnell zugreifen, solange die Video-Reihe noch verfügbar ist!

Schritt 2 Das Optin Formular einfügen

Als nächstes müssen wir das Opt-In Formular erstellen. Dazu legen wir eine neue Sektion an, in der wir dann das Divi Modul „E-Mail-Opt-In“ dort hinein platzieren.

Divi Optin Modul einfügen

In der eben erstellten Sektion stellen wir in dem Tab „Popup“, im Bereich „General“ den Schalter bei „This is a Popup“ auf Ein oder vielmehr auf Yes. Weiterhin müssen wir im Feld „Popup ID“ eine eindeutige ID vergeben. Für unser Tutorial nehme ich hier die Popup-ID „DiviOptInPopup“. Bitte keine Leerzeichen oder Sonderzeichen verwenden.

Divi Popup Einstellungen

Ob du diese Sektion mit dem Popup-Inhalt mittendrin oder an das Ende deiner Seite einsetzt, ist prinzipiell egal. Diese Sektion wird nachher für den Besucher nur als Popup zu sehen sein. Lediglich zum designen wird diese Sektion für den Admin sichtbar sein.

Das Opt-In Modul in Divi ist sehr leistungsfähig und kann mit den meisten E-Mail Marketing Tools kommunizieren. Du solltest aber auf jeden Fall die Spamschutz Funktionen von diesem Modul verwenden. In der Regel ist das Google reCaptcha V3. Das ist vor allem wichtig, weil die Anbieter von E-Mail Marketing Tools das gar nicht gern sehen von Spam Bots attackiert zu werden und dich eventuell sperren.

Schritt 3 Einen Button einfügen

Jetzt müssen wir noch auf unserer Landingpage einen Button einfügen, mit dem der Besucher das Popup öffnen kann. Diesen Button geben wir jetzt eine eindeutige Bezeichnung um den Besucher zum klicken zu animieren.

Divi Button einfügen

Warum machen wir das überhaupt so? Wir könnten das Opt-In doch auch direkt platzieren. Es geht darum, dem Besucher ein bisschen die Angst vor dem Formular zu nehmen. Psychologisch ist es so: Wenn der Besucher mit dem Klick auf dem Button den Vorgang des Eintragens gestartet hat, ist die Hemmschwelle niedriger, das er sich auch einträgt. Vor dem Klick auf den Button, wusste der Besucher nicht was Ihn erwartet.

Damit der Button auch das Popup öffnet, müssen wir den vorhin vergebenen ID-Namen in den Button als Link URL eintragen. Vor dem ID-Namen musst du ein # Zeichen voranstellen, damit der Name auch als ID erkannt wird. Also so: „#DiviOptInPopup“

Divi Button Link Einstellungen

Divi Popup ausprobieren

Jetzt können wir unser Popup ausprobieren. Dazu müssen wir die Seite in der Vorschau aufrufen oder die Seite direkt veröffentlichen und auf der Live Seite betrachten.

Das Ganze funktioniert auch, wenn wir die PopUp Section im Template Builder vom Divi verwenden. Das mach vor allem dann Sinn, wenn du ein Newsletter Opt-In hast, welches von jeder Seite über einen Button aufgerufen werden kann.

Divi Theme Builder aufrufen

Das Feintuning des Divi Popup

Wie du jetzt sicher beim Test siehst, ist das Popup mit einem eigenartigen Rahmen und einer weißen Fläche versehen. Jetzt müssen wir bei dem Popup noch einige Design Einstellungen treffen, damit das Popup schick aussieht.

Divi Popup testen

Als erstes müssen wir wissen, das das Popup mit einem Schatten versehen ist. Dadurch wird die Sektion, welche aktuell noch einen weißen Hintergrund hat mit einem Schatten versehen. Das lässt sich mit dem Schalter „Add Default Shadow“ im Bereich „Layout“ abschalten.

Viel wichtiger ist es in der Sektion und in der Zeilen die Abstände auf 0px zu setzen, damit das kleine Kreuz zum schließen der Popup auch oben in der rechen Ecke zur Geltung kommt.

Zwischenabstände entfernen

Über die Größeneinstellungen der Sektion kannst du dann die Maximal Breite einstellen, so das das Popup auf einem PC Bildschirm nicht über die volle Breite geht. Bei Maximale Breite trage ich hier 1080px ein. Dadurch wird das Popup auf Smartphone Display trotzdem über die volle Breite dargestellt.

Sektion Maximale Breite einstellen.

Nach allen Optimierungen sollte dann dein Popup korrekt aussehen. Und auch der Schließen Button sitzt korrekt. Damit ist unser Popup fertig eingerichtet. Wenn du im Divi Opt-In Modul den reCaptcha Spamshutz korrekt aktiviert hast, tauch am rechten unteren Bildschirmrand das reCaptcha Icon auf. Dein Popup sollten dann so aussehen.

Fazit

Mit wenigen Handgriffen und einen kostenlosen Plugin kannst du mit Divi ein Ansprechendes Opt-In erstellen, welches auch auf dem Smartphone gut aussieht und funktioniert. Gerade durch diese 2-Schritte Technik animierst du den Besucher dein Popup auf zurufen.

Ich empfehle dir das auf jeden Fall einmal auszuprobieren. Divi bringt zum testen ja auch die Möglichkeit von A/B Test mit. Falls du Divi noch nicht hast und dir erst einmal selber ein Bild von Divi machen möchtest empfehle ich die unseren kostenlosen Videokurs.

Wenn dir dieser Beitrag gefallen hat, bewerte jetzt diesen Beitrag!
[Gesamt Bewertungen: 2 Durchschnittlich bewertet: 5]
Hier schreibt: Thomas

Hier schreibt: Thomas

Ich heiße Thomas und bin Inhaber einer Agentur für eCommerce und Online Marketing. Zusätzlich interessiere ich mich für CMS Systeme, Wordpress, Drupal, Grafik und Multimedia. Ihr findet mich auf Twitter und Facebook. Über einen Kommentar zu diesem Beitrag würde ich mich freuen.

1 Kommentar

  1. Klemmi

    Danke für den Beitrag. Genau das habe ich gesucht.

    Antworten

Antworten auf Klemmi Antworten abbrechen

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