Automatisches Popup Fenster erstellen: 8 Schritte zur erfolgreichen Pop-Up Strategie auf deiner Website

11 Min.
Aktualisiert:

Von vielen gehasst, aber von genau so vielen unterschätzt: Das sind Pop-Ups, die auf deiner Website auftauchen. Obwohl aufploppende Popup Fenster oft als nervige Werbung angesehen werden, können sie – clever gemacht – eine große Hilfe bei der Lead Generation und beim Marketing sein.

In diesem Guide führe ich dich durch den Prozess der Pop-Up Erstellung für attraktive, effektive Pop-Ups. Um dir den Vorgang zu veranschaulichen, arbeite ich mit dem GetResponse Pop-Up Maker.

Hier auch unsere Anleitung per Video:

Fangen wir also an:

In deinem GetResponse Account findest du Pop-Ups unter der Tool-Übersicht. Klicke dort auf die Formulare und Pop-Ups Funktion.

Wenn du jetzt auf “Erste Schritte” klickst, dann startest du den Prozess der Popup Erstellung. Jetzt kann es richtig losgehen!

Anmerkung: Wenn du dich jetzt fragst, was Popups eigentlich sind, dann lies dir unseren ultimativen Wissens-Guide durch! Außerdem kannst du auch mehr darüber erfahren, wie und ob Popups gefährlich werden können.

1. Verschiedene Arten von Popups erstellen: Wähle dein Format!

Die erste Entscheidung, die du treffen musst, ist, welches Format du am besten geeignet für deine Website erachtest.

GetResponse Auswahl für Formulare & Popups

Als erste Auswahl hast du damit die Optionen: “In einem Pop-Up” für Formulare in der Form von Pop-Ups, die mit Auslöser oder einem von dir bestimmten Zeitpunkt erscheinen oder “Eingebettet in deine Seite” für Formulare auf Landing Pages oder jeden beliebigen Ort deiner Webseite, die nicht als Pop-Up erscheinen, sondern dauerhaft auf der Seite zu sehen sind.

Denke nach, was für die Erstellung deines Online Formulars wirklich Sinn macht.

2. Wähle eine Vorlage.

In der Software, die du benutzt, wird es sicher Templates für Formulare und Pop-Ups geben. Im Popup Creator von GetResponse findest du die Optionen Vordefinierte Vorlage oder Leere Vorlage.

Mit einer leeren Vorlage hast du ein Grundgerüst für das Pop-Up im weißen Design. Du musst also den Text, die Schrift, die Farben und das Design komplett selbst bestimmen. Wenn es schnell gehen muss, dann solltest du dich für die 100%-bearbeitbaren vordefinierten Vorlagen entscheiden. Diese kommen bereits mit Bildern und Text, sodass du dir weniger Gedanken machen musst und weniger Aufwand hast.

Entscheidest du dich für vordefinierte Pop-Up Vorlagen, kannst du nun entweder nach Funktionen des Popups sortieren oder nach Art des Popups. Wenn du nach Funktionen sortierst, hast du bereits ein Design und eine englische Text Copy, die du nur noch übersetzen musst.

GetResponse Popup vorlagen

Kategorien nach Zwecken sind im Pop-Up Maker:

  • E-Mail Liste ausbauen
  • Mehr Absatz
  • Verbunden bleiben
  • Mehr Follower
  • Feedback einholen

Ansonsten wählst du die Pop-Ups nach Format, also so, wie sie auf deiner Website erscheinen sollen. Diese schauen wir uns jetzt einmal genauer an.

Pop-Up Box

Vorlagen für Pop-Up Boxen in GetResponse

Eine Pop-Up Box ist ein kleines Fenster, das sich innerhalb einer Seite oder deiner Homepage öffnet. Dieses Format ist das klassischste unter den Pop-Ups.

Vollbild Pop-Up

Vorlagen für Vollbild Popups in GetResponse

Ein Vollbild-Popup ist fast wie eine eigene Landing Page. Du kannst es nutzen, um eine größere Kampagne oder ein umfangreicheres Angebot zu promoten. Auch, wenn du etwas mehr Text benötigst oder Bilder hast, die in höherer Auflösung angezeigt werden sollen, eignet sich ein Vollbild-Pop-Up.

Slide-In Popup Fenster

GetResponse Vorlagen für gleitende Pop-Ups

Slide-In Pop-Up Fenster findest du in unserer Vorlagen Galerie unter “Gleiten”. Diese Pop-Up Fenster gleiten nämlich von der Seite, Ecke oder dem Winkel, den du festlegst und sorgen so für einen eleganten, visuellen Effekt.

Pop-Up Bar

Vorlagen für Leisten-Pop-Ups

Unter dem Reiter “Leiste” in unseren Vorlagen findest du Templates für Pop-Up Bars. Diese Leisten werden entweder dauerhaft oder unter bestimmten Bedingungen am oberen oder unteren Rand des Bildschirms angezeigt. Besonders eignet sich dieses Format für Newsletteranmeldungen oder Rabattcode-Aktionen.

Da diese Pop-Ups weniger aufdringlich sind als die Formate zuvor, klicken Menschen sie seltener weg. Außerdem dienen sie super dazu, sich einen eventuellen Rabattcode ins Gedächtnis zu rufen und erwecken unter Umständen mehr vertrauen bei deinen Webseiten-Besucherinnen und -Besuchern.

3. Den Inhalt gestalten

Kommen wir jetzt dazu, was du genau in deinem Pop-Up schreiben solltest und wie es aufgebaut sein sollte.

Generell besteht ein Pop-Up aus den folgenden Elementen:

  • Eingabefeldern für benötigte Informationen, die du von deinen Kund:Innen benötigst
  • einer kurzen, knackigen Aussage oder kurzem Text, der aussagt, was du vom User/von der Userin erwartest
  • dem CTA bzw. Call-to-Action Button, der per Klick zum Öffnen eines Links verleitet
  • einem “Schließen-Button”, um das Pop-Up wegzuklicken

Manchmal können zusätzliche Elemente wie eine Überschrift, mehrere Buttons oder Medien wie Bilder und Videos ebenfalls sinnvoll sein.

Sehen wir uns aber einmal genau an, welche Methode du in etwa für welche Art von Pop-Ups anwenden kannst.

Text & Felder für ein Anmeldeformular

Ein Pop-Up, das ein Anmeldeformular z.B. für einen Newsletter beinhaltet, sollte mindestens 2 Felder aufweisen:

  • Eins für die E-Mail-Adresse des Kunden/der Kundin
  • Eins für den Namen

Willst du für weitere Marketingzwecke mehr Infos über deinen Kundenstamm sammeln, füge mehr Felder hinzu, z.B. Geburtsdatum, Geschlecht usw.

Der CTA sollte signalisieren, dass sich ein Kontakt mit dem Ausfüllen des Formulars wirklich anmeldet und lauten “Jetzt abonnieren”, “Jetzt anmelden” etc.

Um klar zu machen, wozu das Pop-Up überhaupt auftaucht, binde eine Copy ein, die sagt “Für mehr Infos abonniere unseren Newsletter” oder Ähnliches.

Text & Felder für eine Rabattaktion

In dem Text deines Pop-Ups für die Rabattaktion sollte klar werden, um welche Aktion es sich handelt und wie viel Kund:Innen sparen können.

Also zum Beispiel:

“Sichere dir 20% auf das gesamte Sortiment mit dem Code SUMMERSALE”

Der Text für den CTA könnte etwas sein wie “Jetzt einlösen” oder “Jetzt sichern”. Ein nettes Element für eine zeitlich limitierte Rabattaktion ist außerdem ein Countdown, der anzeigt, wie lange die Aktion noch verfügbar ist. So hat der Kunde bzw. die Kundin auch einen Grund, die Conversion unverzüglich anzuschließen.

Rabattaktionen per Pop Up sollten nicht unterschätzt werden, da sie wirklich gute Ergebnisse und eine lohnenswerte Conversion Rate erzielen.

Text & Felder für eine Produktempfehlung

Eine Produktempfehlung empfiehlt sich in dem Formal eines Vollbild Pop-Ups oder eines klassischen Popup Fensters, das zum Beispiel vor dem Verlassen eines Warenkorbs auftaucht. So hast du Platz für Bilder der Produkte, die du empfehlen willst.

Der Text könnte einfach nur aussagen “Wir haben noch mehr Produkte, die dir gefallen könnten” oder “Sieh dir ähnliche Produkte an wie [bereits gekauftes oder favorisiertes Produkt]”.

Der CTA kann dann in etwa so lauten:

“Kollektion ansehen”, “Mehr entdecken”, o.Ä.

Text & Felder für ein Popup beim Abgebrochenen Warenkorb

Ein Pop-Up kann Warenkorbabbrecher:Innen beim nächsten Besuch daran erinnern, dass sie eine Bestellung noch nicht abgeschlossen haben, zusätzlich oder anstatt der Abandoned Cart Email. Auch hier sind Bilder der hinterbliebenen Produkte hilfreich.

Als Text ist ein Reminder sinnvoll, z.B.:

“Du hast etwas vergessen…” / “Es befinden sich noch Artikel in deinem Warenkorb”

Der Call-to-Action sollte dann dazu einladen, den Warenkorb wieder zu besuchen bzw. die Bestellung doch noch abzuschließen. Der Text für den CTA könnte also lauten:

“Deinen Warenkorb ansehen” oder “Einkauf fortsetzen”

Alternativ kannst du auch eine Option zum Warenkorb löschen anbieten, falls die potentiellen Käufer:Innen eine komplett neue Bestellung aufgeben wollen.

Text & Felder für ein Kontaktformular Pop-Up

Ein Kontaktformular könnte aufploppen, wenn die Nutzer:Innen ein Problem oder eine Frage haben, die sie auf deiner Seite nicht lösen können oder wenn du Feedback von ihnen einholen willst. Als Felder solltest du hier ein Eingabefeld für den Namen der Kund:In, die E-Mail Adresse, eventuell den Betreff und die Nachricht einrichten.

Der CTA “Senden” sollte dann automatisch eine Nachricht an deinen Kundenservice verschicken.

Text & Felder für Pop-Ups, um Social Media Follower zu bekommen

Du kannst Pop-Ups ebenfalls nutzen, um mehr Social Media Follower zu bekommen. Wichtig ist dann, dass der CTA die Nutzenden zu deinem entsprechenden Portal leitet. Der Text für dieses Pop-Up sollte einfach kurz und knapp lauten “Folge uns auch auf …!”

4. Erstelle die Dankesnachricht

Eine Dankesnachricht kann programmiert werden, um zu erscheinen, wenn die Webseiten-Besucher und -Besucherinnen ein Pop-Up Formular ausgefüllt haben, z.B. zur Newsletteranmeldung oder Anmeldung, um ein Incentive zu erhalten.

Diese Dankesnachricht dient als kurze Bestätigung, dass der Zweck des Pop-Ups erfüllt wurde.

5. Lege die Position des Pop-Ups fest

GetResponse Pop-Up Position festlegen

Egal, ob du dein Pop-Up Fenster mittig, am unteren Rand oder oben auf deiner Webseite anzeigen willst, achte darauf, dass keine Elemente verdeckt werden, die während des Aufploppens des Fensters sichtbar sein sollten.

Im Popup Maker von GetResponse kannst du verschiedene Positionen für dein Pop-Up austesten. Checke auch unbedingt, wie die Version auf mobilen und Desktop Endgeräten aussieht, um die optimale User Experience zu gewähren.

6. Trigger oder Timing festlegen: Wann soll das Popup Fenster auf meiner Seite ausgelöst werden?

Anzeigeregeln für Pop-Ups in GetResponse

Du kannst Trigger oder das Timing für deine Pop-Ups festlegen. Trigger sind zum Beispiel:

  • Nach einer bestimmten Zeit, z.B. 1 Minute nach Öffnen der Webseite
  • Nach dem Scrollen, z.B. nach 50% der gesamten Seite, auf der das Pop-up erscheint
  • Bei Verlassen der Seite, wenn sich der Mauszeiger der Besuchenden zu einem anderen Tab oder zum oberen Rand vom Browser bewegt
  • Bei Inaktivität, z.B. nach 1 Minute nachdem die letzte Aktion ausgeführt wurde
Zeit für Pop-Up Auslösung festlegen in GetResponse

Du kannst das Pop-Up auch nur für eine bestimmte Zeit anzeigen lassen. Das ist besonders sinnvoll für Aktionen, die nur über einen bestimmten Zeitpunkt stattfinden und per Pop-Up promotet werden.

Pop-Up Timing in GetResponse

Außerdem legst du nach Belieben Regeln fest, die verhindern können, dass regelmäßige Besucher und Besucherinnen nicht genervt von deinen Pop-Ups sind. So kannst du z.B. einstellen, dass den gleichen Menschen das Pop-Up nur einmal alle paar Tage oder insgesamt nur 1 mal oder eben jedes Mal angezeigt wird.

7. Bestimme die Zielgruppe

Zielgruppe für Pop-Ups festlegen in GetResponse

Als Nächstes legst du die Zielgruppe deines Pop-Ups fest.

Stell dir die folgenden Fragen:

Welche Arten von Besucher:Innen interessieren sollen dein Pop-Up sehen? – Alle, neue Besucher:Innen oder nur wiederkehrende Besucher:Innen

Auf welchen Endgeräten soll das Popup angezeigt werden? – Auf allen, Nur auf mobilen Geräten oder nur Desktopgeräten

Soll dein Pop-Up nur für Menschen aus einem bestimmten Land angezeigt werden (oder mehreren Ländern), z.B. wenn es auf einer bestimmten Sprache verfasst ist?

8. Positioniere dein Pop Up

Das Design deines Popups ist nun soweit fertig und es ist an der Zeit, dein Pop-Up auf deiner Seite einzubinden. Das kannst du zum Einen tun, indem du die URL der Website oder der einzelnen Seiten wie Landing Pages eingibst, auf der du das Popup haben möchtest.

Seiten-URL für die Pop-Up Setzung festlegen in GetResponse

Oder du kopierst den HTML-Code, den GetResponse für dich programmiert und setzt ihn in den existierenden HTML-Code deiner Website bzw. in dein Content Management System wie WordPress ein.

HTML Code für Popup Einbettung in GetResponse

Hast du am Anfang die Option “Eingebettet in deine Seite” gewählt, dann erhältst du einen Eingebetteten Formular Code, den du an der Stelle auf deiner Website einfügen kannst, wo du das Formular angezeigt haben willst

HTML Code erstellt in GetResponse für Pop-Up bzw. Formular Einbettung in eine Webseite
HTML Code erstellt in GetResponse für Pop-Up bzw. Formular Einbettung in eine Webseite

Wenn du das getan hast, sieh dir die Vorschau an und überprüfe, ob das Popup auf allen Endgeräten gut aussieht.

Performance deines Popups auswerten: Das ist wichtig

Pop-Up Reporting in GetResponse

Wenn du dein Popup kreiert hast, ist ein ganzes Stück Arbeit bereits getan. Nun geht es jedoch ans Auswerten und Optimieren. Idealerweise bietet dir dein Popups Service ein Dashboard mit den wichtigsten Metriken zur Auswertung.

In diesem Dashboard siehst du die Aufrufe, Klicks, Click-through-Rate und Leads deiner aktiven und vergangenen Popups. So siehst du, welche Arten von Popups gut funktionieren und eine tolle Conversion Rate erzielen und welche eher nicht.

Jetzt steht deinem erfolgreichen Online Marketing mit der Hilfe von Popups nichts mehr im Wege!

Häufig gestellte Fragen: Popups erstellen

Wie erstelle ich ein Popup Fenster?

Es gibt spezielle Software und Tools, die dir bei der Erstellung deines Pop-Ups helfen. Viele Creator und WordPress-Plugins für Pop-Ups sind kostenlos (wenn auch limitiert) verfügbar. Nutzt du eine Komplett-Marketing-Plattform, dann kann es dich natürlich etwas kosten. Allerdings zahlst du dort auch für mehr Funktionen als nur die Pop-Up Erstellung. Die Erstellung erfolgt entweder über einen visuellen Editor mit Vorlagen, die du nur noch anpassen musst oder per HTML Code, den du in den Code deiner Website einfügen kannst.

Wo ist das Pop Up Fenster?

Ein Pop-Up Fenster kannst du entweder als Vollbild-Fenster, als Box an einer beliebigen Stelle auf deiner Seite oder auch als Leiste in der Kopf- oder Fußzeile auf deiner Webseite positionieren.

Was sind Pop-Ups im Internet?

Pop-Ups sind Fenster mit Nachrichten oder Formularen, die ‘aufploppen’, wenn User eine bestimmte Aktion ausführen oder wenn eine festgelegte Zeit auf einer Website vergangen ist.

Wie kann ich Pop Up deaktivieren?

Pop-Ups kannst du mit Hilfe von Blockern in deinem Browser oder in den Einstellungen deines Browsers deaktivieren.


Lisa Kubatzki
Lisa Kubatzki
Lisa ist Senior SEO Content Managerin für die D-A-CH Region bei GetResponse und leitet unter anderem den deutschen Blog. Ihre berufliche Laufbahn führte sie bereits durch die Felder des Influencer Marketing, Affiliate Marketing, und Social Media, doch für SEO schlägt ihr Herz wirklich. Mit ihrer berufliche Expertise in Bereichen wie Marketingstrategie, E-Mail Marketing und SEO veröffentlicht sie regelmäßig Artikel im Bereich Marketing in verschiedensten Media Outlets wie OMR, OMT oder WLW. Besonders liebt sie es, neue Trends zu erforschen und Marketing im Kontext mit gesellschaftlichen Themen zu betrachten. Lisa erreichst du ganz einfach über ihr LinkedIn Profil.