Einfaches Pop-up bei WordPress erstellen mit Plugin

In diesem Beitrag möchte ich dir zeigen, wie du mit einem kostenlosen Plugin ein einfaches Pop-up in WordPress erstellen kannst.

Hierbei handelt es sich um ein Tutorial mit dem Plugin “Popup Maker“, welches in der Grundversion kostenlos ist.

Wie so ein einfaches Pop-up im Ergebnis aussehen kann, zeigt dir schon mal der folgende Screenshot:

popup-erstellen-wordpress-beispiel
Hier siehst du ein einfaches Pop-up passend zum Thema des Artikels. Ich habe es mit dem Popup Maker Plugin zu Demozwecken für dieses Tutorial erstellt.

Die folgenden Schritte sollen das Vorgehen mit dem Popup Maker Plugin möglichst einfach und nachvollziehbar aufzeigen. Dabei ist es aber wichtig zu wissen, dass solche Plugins natürlich oft weiterentwickelt werden, wodurch sich der Aufbau sowie die Ansicht mit der Zeit verändern können.

Es kann also sein, dass die Screenshots nicht mehr ganz mit der Ansicht bei dir übereinstimmen. Das grundsätzliche Vorgehen bleibt aber oft sehr ähnlich.

1 | Installiere das Plugin

Dazu klickst du im WordPress Dashboard in der rechten Menüleiste auf > Plugins > Installieren. Im Suchschlitz suchst du dann nach “Popup Maker.”

WordPress Popup Maker Plugin installieren
Das Popup Maker Plugin kannst du ganz einfach über das WordPress Backend installieren. Screenshot: WordPress 21.12.2020

Als nächstes klickst du auf > Jetzt installieren und dann auf > Aktivieren.

Zur Begrüßung erscheint nun ein Fenster mit einigen Informationen zum Plugin vom Entwickler. Das kannst du dir durchlesen, wenn es dich interessiert.

wordpress-popup-maker-welcome-screen
Begrüßungsfenster nach der Installation und dem Aktivieren des Popup Maker Plugins vom Entwickler. Screenshot: WordPress 22.12.2020

Unten findest du nun auch einen Aufruf-Button > Create your first Popup! Hier kannst du drauf klicken oder alternativ über das Menü > Popup Maker > Create Popup dein erstes Pop-up erstellen.

2 | Neues Pop-Up erstellen

Sobald du dich über eine der gerade beschriebenen zwei Möglichkeiten auf die richtige Unterseite zum Erstellen des ersten Pop-ups navigiert hast, kannst du jetzt loslegen.

erstes-pop-up-erstellen
Bildschirm zum Erstellen des Pop-ups mit dem Popup Maker. Screenshot: WordPress 22.12.2020

Hier gibst du dem Pop-up einen Namen (für dich) und einen Titel (sehen auch die Besucher). Der Titel wird dann als Hauptüberschrift ganzen oben im Pop-up angezeigt.

Wenn das nicht zu deinem Design passen sollte, dann kannst du den Titel auch weglassen.

3 | Weitere Inhalte für dein Pop-up einbauen

Im Haupttextfeld unter dem Titel kannst du weiteren Text, Bilder oder auch Videos einbauen. Generell kannst du es dir beim Popup Maker Plugin so vorstellen:

Du hast jetzt einen kleinen zusätzlichen Bereich, wo du im Prinzip einen kompletten Blogpost einbauen könntest. Nur mit dem Unterschied, dass der gesamte Inhalt in einem Pop-up erscheint.

Zum Testen kannst du hier einfach zunächst irgendeinen Platzhaltertext einbauen.

popup-erstellen-beispiel-wordpress

4 | Auslöser und Cookie einrichten

Damit das Pop-up dann auch auf deiner Website auftaucht, musst du als nächstes einen “Auslöser” einrichten. Also ein Ereignis, dass dem Pop-up sagt, dass es genau jetzt auftauchen soll (z.B. nach 10 Sekunden oder nach einem Klick).

Dazu musst du etwas weiter nach unten scrollen und auf > Neuen Auslöser hinzufügen klicken.

popup-ausloeser-popup-maker

Hier hast du jetzt verschiedene Möglichkeiten. Wenn das Pop-up nur nach einem Klick auf einen Button etc. angezeigt werden soll, dann wählst du “Öffnen durch Klick” aus.

Falls du das Pop-up lieber automatisch nach einer bestimmten Zeit anzeigen lassen möchtest, dann wählst du “Zeitverzögerung / Automatisches Öffnen.

Außerdem hast du die Möglichkeit, das Pop-up an ein Formular (z.B. Newsletter-Anmeldung) zu koppeln.

ausloeser-popup-auswaehlen

In diesem Tutorial schauen wir uns das automatische Öffnen nach einer bestimmten Zeit an.

Damit das Pop-up nicht beim Öffnen weiterer Seiten jedes Mal wieder auftaucht, können wir außerdem einen Cookie setzen. Dieser wird in diesem Beispiel schon gesetzt, wenn das Pop-up das erste Mal erscheint.

Das hat folgenden Grund: So verhinderst du, dass das Pop-up beim Klick auf einen Link im Pop-up nach dem Öffnen der Unterseite noch einmal erscheint.

Standardmäßig ist in diesem Dropdown-Menü sonst nämlich eingestellt, dass der Cookie erst gesetzt wird, wenn du das Pop-up-Fenster schließt. Wenn du aber auf einen Link im Pop-up klickst, schließt du das Fenster nicht. Das Ergebnis: Das Pop-up taucht auf der neuen Zielseite noch einmal auf. Wenn der Cookie direkt beim Öffnen gesetzt wird, kannst du das verhindern.

Jetzt musst du noch auf > Hinzufügen klicken, um den Auslöser mit Cookie zu deinem Pop-up hinzuzufügen. Außerdem kannst du jetzt auch noch das Zeitintervall einstellen.

zeitverzoegerung-pop-up-einstellen

Fun Fact: Wenn du einen Cookie-Banner auf deiner Website einbaust, um die Besucher über das Setzen von Cookies zu informieren, brauchst du aus dem gleichen Grund wie bei einem Pop-up ebenfalls Cookies. Sonst kann sich der Browser nicht merken, dass du den Cookie-Banner schon bestätigt hast.

5 | Design festlegen

Bei den Einstellungen für dein Pop-up hast du noch ein weiteres Feld, was wichtig ist: Die Anzeige. Denn hier hast du verschiedene Optionen für das Design des Pop-ups.

Meine bevorzugte Standardeinstellung ist das zentrierte Pop-up.

pop-up-maker-design

Außerdem wähle ich unter dem Tab Design die Variante mit der Light Box als Pop-up Theme.

popup-maker-design-wahl

Da mir die Box standardmäßig etwas zu breit ist, stelle ich unter Größe außerdem eine maximale Breite von ca. 750 Pixeln ein. Mit dem Wert kannst du aber auch etwas experimentieren.

pop-up-maximale-groesse

Daraus ergibt sich erstmal folgender Zwischenstand:

wordpress-popup-zwischenergebnis

6 | Weitere Pop-up Einstellungen

Außerdem kannst du weitere Einstellungen für dein Pop-up festlegen. Dazu zählen:

  • Targeting: Wenn das Pop-up nur auf bestimmten Unterseiten erscheinen oder auf Smartphone / Tablet nicht angezeigt werden soll
  • Schließen: Einstellungen für den Schließen-Button bestimmen
  • Fortgeschritten: Weitere Einstellungsmöglichkeiten

Durch diese Felder kannst du dich einmal Durchklicken. Vielleicht ist hier noch etwas dabei, was für deine Vorstellungen relevant ist.

Da es sich beim Popup Maker um ein Freemium Plugin handelt, findest du viele weitere Funktionen in der Premium Version, die dann nicht mehr kostenlos ist. Für ein einfaches Pop-up ist das nicht notwendig, aber mit der Zeit erhöht sich oft auch der Anspruch. Daher kannst du natürlich jederzeit auch über ein Upgrade nachdenken.

7 | Pop-up verschönern mit einem Bild und generell weiter optimieren

Da ich aktuell noch nicht ganz zufrieden bin mit dem Pop-up, würde ich gern noch ein Bild hinzufügen. Dafür habe ich einfach bei Canva etwas erstellt.

erstes-pop-up-wordpress

 

Hier kommt es natürlich ganz auf deine Anforderungen an. Denn neben der technischen Umsetzung spielt natürlich auch der Inhalt deines Pop-ups eine große Rolle:

  • Interesse wecken / reine Information (z.B. Corona Hinweise)
  • Aufruf zu einer Handlung (Call to Action)
  • Visuell ansprechend gestaltet
  • Kurz & prägnant
  • etc.

Da es in diesem Beitrag hauptsächlich um die technische Umsetzung bei WordPress geht, möchte ich an dieser Stelle nicht weiter darauf eingehen.

Neben dem Foto habe ich außerdem den Link in einen Button verwandelt, sodass der Aufruf noch etwas besser erkennbar ist.

popup-erstellen-wordpress-beispiel

8 | Pop-up veröffentlichen und testen

Zu gu­ter Letzt musst du das Pop-up natürlich noch veröffentlichen und testen, ob auch wirklich alles funktioniert. Hierzu würde ich dir empfehlen, einen anderen Browser oder den Inkognito-Modus zu nutzen.

  • Erscheint das Pop-up?
  • Wie schaut es aus?
  • Funktioniert es auch auf dem Smartphone und ist die Ansicht ok?
  • Wird das Pop-up auch nur beim Öffnen der ersten Seite angezeigt?

Wenn du dann mit allem zufrieden bist, hast du dein erstes Pop-up mit WordPress erstellt.

Ich hoffe, dass dir der Beitrag etwas helfen konnte. Da ich das Pop-up nur zu Testzwecken erstellt hatte, bitte nicht wundern, wenn es nicht auf meiner Website auftaucht.

Du hast weitere Tipps oder kennst ein anderes tolles Pop-up Plugin für WordPress? Dann freue ich mich jederzeit über Hinweise!


Dir gefällt dieser Beitrag? Dann würde ich mich sehr darüber freuen, wenn du ihn teilen oder du einen Kommentar hinterlassen würdest. Vielen Dank! :)


Sebastian Würfel Avatar

Über mich

Seit über zehn Jahren nutze ich WordPress und schreibe auf verschiedenen Blogs. Als Spezialist für Content Marketing und SEO arbeite ich neben meiner Selbstständigkeit seit einiger Zeit für die NETZhelfer GmbH. Dort helfe ich verschiedenen Kunden als Website Booster. Auf meiner persönlichen Website berichte ich über meine Learnings.


Alle neuen Artikel im Newsletter

Keine Sorge, ich spamme nicht! Natürlich ist eine Abmeldung vom Newsletter jederzeit möglich. Die Eintragung umfasst die Hinweise zu Widerruf, Versanddienstleister und Statistik gemäß der Datenschutzerklärung.


Schreibe einen Kommentar