Typ "Pop-Up": Wie erstelle ich ein Opt-In Formular als Pop-Up und aktivere es auf einer Seite?

Du kannst ein Opt-In Formular erstellen, welches als Pop-Up auf einer Seite erscheint, nachdem ein bestimmtes Event ausgeführt wurde. Das kann bspw. ein Klick auf einen dafür vorgesehenen Button sein oder einfach das Erscheinen des Pop-Up Opt-In Formulars nach einer bestimmten Zeit.

Suchmaschinen sehen es allerdings nicht gerne, wenn ein Pop-Up einfach so automatisch erscheint, ohne dass dieses explizit vom Besucher aufgerufen wurde. Daher empfehlen wir die Verwendung “Trigger on Click” = Pop-Up erscheint, nachdem man auf einen Button geklickt hat:

Login Spreadmind Plattform

Bitte dich zunächst im Backend deiner Spreadmind Plattform ein. Wie das geht, erfährst du in dieser Anleitung.  

1. Neues Opt-In Formular vom Typ “Pop Up”

Bitte gehe nun im Backend zu “Opt-In Formulare” und klicke in der Ansicht rechts oben auf den Button “Neues Opt-In Formular”. Wähle ein Opt-In vom Typ “Pop Up” aus:

2. Einstellungen

Im ersten Schritt “Einstellungen” gibst du deinem Opt-In Formular einen eigenen Namen. Bei der Option “Formular Integration” verknüpfst du das Opt-In mit deinem E-Mail-Marketing Anbieter. Wähle dazu aus dem DropDown "E-Mail Anbieter auswählen" deinen Anbieter aus, welchen du bereits als eigenes Konto beim Opt-In Formular Builder verknüpft hast (solltest du das noch nicht gemacht haben, dann folge bitte den Schritten in dieser Anleitung: Wie verknüpfe ich den Opt-In Formular Builder mit einem externen E-Mail Marketing Anbieter?).

Klicke bitte rechts unten auf den grauen Button “Nächster Schritt: Design Opt-In Formular”:

3. Design

Wähle nun eine Design-Vorlage aus, welche du im nächsten Schritt individuell anpassen möchtest. Klicke hierfür auf ein Template und gehe dann bitte ganz ans Ende der Seite und klicke rechts unten auf den grauen Button “Nächster Schritt: Anpassen”:

3.1 Headline und Text, Farben, Formular-Felder, Button

In diesem Schritt kannst du nun eine Headline sowie einen Text für das Opt-In Formular einfügen und dieses gestalterisch anpassen. Hier bestimmst du auch die Button-Farbe sowie den Button-Text.

Eine weiterführende Anleitung findest du hier: Wie passe ich Design und Text meines Opt-In Formulars an?

3.2 Text der Fusszeile & Nachricht bei erfolgreicher Anmeldung

Wenn du möchstest kannst du einen Text unterhalb der Formular-Felder ausgeben, wie bspw. “Kein Spam.” o.ä.

Trage bei der Option “Nachricht bei erfolgreicher Anmeldung” einen Text ein, welcher dem Besucher angezeigt wird, nachdem er das Opt-In Formular ausgefüllt und “gesendet” hat. Du kannst ihn auch nach Absenden des Opt-In Formulars auf eine andere Seite weiterleiten – das erfährst du im letzten Schritt “Bestätigung”.

Sobald du alle Anpassungen vorgenommen hast, klickst du bitte rechts unten auf den grauen Button “Nächster Schritt: Anzeigeneinstellungen”:

4. Anzeigeeinstellung

In diesem Schritt legst du den Trigger fest, also den Zeitpunkt und die Aktion, wann das Pop-Up erscheinen soll. Wir empfehlen “Trigger bei Klick”. Das Pop-Up soll erscheinen, nachdem man auf einen dafür vorgesehenen Button oder Link klickt. Auch ein Bild kann als Trigger genutzt werden.

4.1 Trigger: Button / Link

Damit dieser Button mit unserem Pop-Up Opt-In Formular verknüpft wird, müssen wir bei diesem Schritt einen CSS-Klassennamen angeben. Die Schreibweise muss so aussehen:

a.popup_trigger_button

Dabei kannst du den Text für popup_trigger_button frei wählen. Es dürfen lediglich keine Sonder- oder Leerzeichenzeichen oder Umlaute verwendet werden. Gedanken- und Unterstrich sind erlaubt, genauso wie Ziffern 0-9. 

Wichtig ist, dass a. unmittelbar vorangestellt wird:

Wähle bitte beim Abschnitt “Anzeigen auf/am” die Option “Alles” aus. So kannst du später auf jeder beliebigen Seite das Pop-Up bzw. den Button einbinden. Klicke dann bitte rechts unten auf den grauen Button “Next: Success Action”, um zum letzten Schritt “Bestätigung” weitergeleitet zu werden:

Mache nun weiter mit Punkt 5 dieser Anleitung.

4.2 Trigger: Bild

Möchtest du ein Bild als Trigger verwenden, ist die Umsetzung fast genau gleich wie unter 4.1 beschrieben. Einzig in den Opt-In Anzeigeeinstellungen musst du den Trigger ein bisschen anders aufbauen. 

Die Schreibweise muss so aussehen:

*.popup-trigger

Dabei kannst du den Text für popup_trigger_button frei wählen. Es dürfen lediglich keine Sonder- oder Leerzeichenzeichen oder Umlaute verwendet werden. Gedanken- und Unterstrich sind erlaubt, genauso wie Ziffern 0-9.

Wichtig ist, dass *. unmittelbar vorangestellt wird:

Mache nun weiter mit Punkt 5.

5. Bestätigung

Im letzten Schritt bestimmst du, ob nach Ausfüllen und Absenden des Opt-In Formulars ein Text angezeigt werden soll, oder ob der Besucher zu einer bestimmten Seite weitergeleitet werden soll.

Option A – “Textanzeige”: Den Text legst du unter Schritt 2 Design und dort bei der vorletzten Option “Nachricht bei erfolgreicher Anmeldung” fest.

Option B – “Weiterleitung zu einer Seite/URL”: Trage hier die URL einer Seite ein, auf die du den Besucher weiterleiten möchtest:

6. Speichern

Klicke zum Schluss auf den blauen Button “Beenden & Speichern”:

Du wirst dann wieder zur Übersicht aller Opt-In Formulare zurückgeleitet und erkennst an diesem vorangestellten Icon, dass es sich um ein Opt-In Formular vom Typ "PopUp" handelt:

7. Pop Up Opt-In auf Seite einbinden

Als nächstes benötigst du ein Trigger-Event auf deiner Seite, damit das Pop Up Opt-In Formular dargestellt wird. Je nach dem, ob du einen Link oder ein Bild als Trigger eingestellt hast, kannst du nun ein hierfür ein Divi "Button" Modul oder "Bild" Modul nutzen und die weiter oben erstellte CSS-Klasse popup_trigger_button.

7.1 Trigger: Button / Link

Rufe bitte die Seite, auf welcher du das Opt-In Formular einfügen möchtest, am besten über das Frontend auf und aktiviere den visuellen Builder von Divi ( hier geht's zur Anleitung). Füge ein neues Modul "Button" hinzu:

Unter "Inhalt" > "Text kannst du einen eigenen Button-Text festlegen:

Wechsle nun zu "Erweitert" und füge die unter "CSS Klasse" den Namen popup_trigger_button ein (hier verzichten wir auf das a.) und speicher das Modul ab: 

Nun musst du nur noch die Seite speichern und kannst den visuellen Builder wieder verlassen ( hier geht's zur Anleitung).

Nun kann sich ein Besucher über ein Pop Up Opt-In Formular in deinen Newsletter eintragen:

7.2 Trigger: Bild

Hast du unter 4.2 deinen Trigger mit *.popup_trigger_button eingestellt und möchtest nun ein Bild als Trigger nutzen, kannst du direkt über den visuellen Divi Builder ein neues "Bild" Modul hinzufügen. 

In den Einstellungen des Bild-Moduls trägst du unter dem Reiter "Erweitert" bei der Option "ID & CSS Klassen" bei CSS-Klasse deinen Trigger popup_trigger_button ein:

Nun musst du nur noch die Seite speichern und kannst den visuellen Builder wieder verlassen ( hier geht's zur Anleitung).

Damit der Besucher auch visuell die Rückmeldung bekommt, dass er auf das Bild klicken kann, sollten wir noch den Mauszeiger ändern, wenn man diesen über das Bild bewegt. Dies erreichen wir einem einfachen CSS-Code. Kopiere dazu den folgenden CSS-Code und füge ihn im Backend deiner Spreadmind Plattform unter "Design" > "Theme Optionen" > Reiter "Allgemein" am Ende der Seite bei "Eigenes CSS" ein und speicher die Anpassung:

/* trigger popup image */
.trigger-popup {
	cursor: pointer;
}

Nun sollte sich, sobald der Mauszeiger über das Bild bewegt wird, dieser sich verändern.