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:
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.
Inhaltsverzeichnis
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.“
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.
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.
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.
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.
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.
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.
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.
Außerdem wähle ich unter dem Tab Design die Variante mit der Light Box als Pop-up Theme.
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.
Daraus ergibt sich erstmal folgender Zwischenstand:
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.
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.
8 | Pop-up veröffentlichen und testen
Zu guter 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.
9 | Google Fons deaktivieren (Datenschutz)
Eine kleine Ergänzung: Standardmäßig lädt das Plugin die Google Fonts. Wenn du das unterbinden möchtest, gibt es aber eine Einstellungen im Plugin.
Dazu klickst du auf Popup Maker > Einstellungen > Verschiedenes > Anlagen und setzt dort einen Haken bei „Google-Fonts nicht laden.“
Außerdem kannst du in den Einstellungen für die Popup-Themes überprüfen, welche Schriftarten bei dem jeweiligen Theme für den Titel und den Inhalt geladen werden.
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!
Wie mache ich da einen Button statt dem Link?
Danke!
Super!!!
In dem Fall hatte ich es mit CSS gemacht. Unter Design > Customizer > Zusätzliches CSS kannst du eigenes CSS z.B. für einen Button hinzufügen. Ein einfaches Beispiel dafür: https://sebastianwuerfel.com/einfacher-button-mit-css/. Danach musst du im Pop-Up dem Link die genutzte CSS-Klasse für den Button hinzufügen.
Dazu stellst du im Pop-Up-Editor von „Visuell“ auf „Text“ um und fügst dem Link noch das
hinzu. Je nach dem, wie du die CSS-Klasse genannt hast. Dein Button könnte auch btn-pop-up heißen. So wie du es im CSS angibst, musst es dann den Pop-Up-Link hinzufügen.
Alternativ gibt es dafür bestimmt auch ein Button-Plugin, mit dem du einen Shortcode für den Button im Pop-Up einfügen kannst.
Sorry, eigentlich eine tolle Beschreibung. Aber entweder habe ich es überlesen, oder ich verstehe nicht, wie ich das Öffnen eines popups per Klick auf einem Text generieren kann…
Beispiel: „Hier gelangen Sie zu der Aktion“ und Link auf „Aktion“ öffnet das popup….
Hi, in dem Fall möchtest du eine Modal Box erstellen. Das geht auch mit dem Popup Maker. In Kurzform: Als Trigger bzw. Auslöser musst du dann in den Einstellungen „Öffnen durch Klick“ auswählen. Im darauf folgenden Fenster kommt ein Satz wie „Adding the class „popmake-213101″ to an element will trigger it to be opened once clicked.“ Die Klasse wird bei dir wahrscheinlich anders heißen. In diesem Fall hier füge ich dann „popmake-213101“ als CSS-Klasse einem Button oder Link hinzu.
Linkbeispiel:
Wenn es ein Button ist und du den Gutenberg Editor nutzt, dann wählst du den Block „Buttons“ aus und kannst dann rechts in den Blockeinstellungen unter Popup Einstellungen das Popup auswählen, das bei Klick geöffnet werden soll.
Ansonsten kannst du die Klasse auch unter Erweitert > Zusätzliche CSS Klassen dem Button Block hinzufügen oder wie beim Textlink im HTML-Code mit class=“popmake-213101″ ergänzen (Klasse variiert bei jedem PopUp, kann unter Auslöser / Trigger nachgesehen werden).
Wichtig ist hier nur, dass du bei diesem Popup / Modal dann keinen Cookie einstellst, der das erneute Öffnen verhindert. Also in den Popup Einstellungen unter „Cookies kontrollieren die wiederholte Anzeige von Popups“ sollte kein Cookie erstellt werden, der das erneute Öffnen für einen Monat oder so blockiert.
Ich werde die Erklärung noch mit Screenshots noch ergänzen. Ansonsten hier auch ein Video, dass es ganz gut erklärt: https://youtu.be/SPRsNtIoxkI
Hallo,
danke für die prima Erklärung.
Gibt es eine Möglichkeit ein in das Popup eingefügtes Video automatisch zu starten? Ohne das der Nutzer erst auf den Videopfeil klicken muss? Ähnlich einem gif, nur mit Ton eben?
Hi Kay, das hängt davon ab, wie du das Video eingefügt hast. Wenn du es mit einem YouTube Embed-Code machst, gibt es dazu z.B. hier eine Erklärung: https://socialmediaone.de/youtube-parameter-video-autoplay-start-ende-loop-wiederholung-untertitel-liste/
LG Sebastian
Super Webseite, danke für diesen tollen Beitrag… werde hier auch in Zukunft zurückgreifen 😉 DANKE !!!! Liebe Grüße Mia
Klasse. Vielen Dank für die tolle Beschreibung. Ich habe allerdings ein Problem – ich möchte das Popup automatisch zeitversetzt auf unserer Homepage haben. Jedoch wenn ich das Popup speichere zerschießt es mein Layout – sämtliche farblichen Hintergründe sind weg. Hast du eine Erklärung dafür?
Vielen Dank! Stephie
Hi Stephie, das kann ich dir nicht sagen, bei mir funktioniert das ohne Probleme. Du könntest dem Plugin-Support schreiben (vielleicht so schreiben, dass du auch zwecks Premium überlegst, aber zwecks dem Fehler aktuell jetzt verunsichert bist, ob sich das dann lohnt. Falls der Support es gelöst bekommt, wäre es ja eine Überlegung, ob du dir mal eine Lizenz für das Plugin kaufst). Außerdem könntest du dem Support von deinem WordPress Theme schreiben, falls du eine Premium-Variante nutzt. Vielleicht stimmt da etwas nicht oder es wurde nicht nach Best Practices umgesetzt. Ggf. gibt es auch einen Konflikt mit einem anderen Plugin. Hier hilft es mitunter zu Testzwecken mal alle anderen Plugins temporär zu deaktivieren (funktioniert es dann?) und dann einzeln wieder zu aktiveren (mit Test nach jeder Aktivierung, ob es geht). So lässt sich manchmal ein Übeltäter identifizieren…
Hoffe das hilft dir etwas. LG Sebastian
Ich danke dir vielmals für deine Antwort. Ich werde es versuchen!
LG Stephie
Viiiieeelen Dank erst einmal für den tollen, hilfreichen Artikel!
Eine Frage habe ich doch noch 🙂 Ich habe eine zweisprachige Seite (Deutsch, Englisch). Ist es möglich, für jede Sprachvariante ein eigenes Popup einzurichten, also dass bei Besuchern der deutschsprachigen Seite ein deutsches angezeigt wird und bei Besuchern der englischsprachigen Variante ein englisches?
Danke und liebe Grüße!
Hi Doro, danke für dein Feedback und deine Frage. Den Fall hatte ich so jetzt noch nicht, aber anscheinend kannst du es vereinfacht über die Einstellungen unter Targeting mit Bedingungen lösen. So könntest du Popups nur bestimmten Seiten / Beiträgen in einer Sprache zuordnen. In dem Beitrag vom Plugin selbst wird es auch noch etwas ausführlicher erklärt (EN): https://docs.wppopupmaker.com/article/344-display-a-popup-on-multiple-language-site
Mit der Premium-Erweiterung „The Advanced Targeting Conditions (ATC) extension to Popup Maker soll es wohl noch besser gehen. Kommt hier wahrscheinlich etwas darauf an, wie umfangreich deine Website ist. Es soll wohl damit möglich sein, einen beliebigen Teil einer URL oder einen beliebigen Abfrageparameter, der einer URL hinzugefügt wurde, als „nicht-inhaltsbasierte“ Bedingung zu definieren. Wenn dort als Abfrageparameter „lang=de“ etc. als Ziel angegeben wird, wird das Popup auf jeder Seite innerhalb der Website aktiviert, die dann z.B. „lang=de“ in der URL enthält (je nachdem wie das bei dir mit den Sprachen gelöst wird). Es wird aber auch im Beitrag (erster Link) etwas genauer mit erklärt.
Hoffe, das hilft dir etwas. LG Sebastian
Wow, tausend Dank für das ausführliche Feedback und die weiterführenden Links! Die werde ich mir gleich mal zu Gemüte führen 🙂
Dieses Plugin klemmt bei unterschiedlichen Browsern, das Popup lässt sich also nicht mehr schliessen. WP version 6.4.3
Gibt es dafür eine Lösung?
Hi Mike, habe es gerade bei mir auf dieser WordPress-Version getestet. Bei mir gibt es in Chrome, Safari, Firefox auf Desktop sowie auf Safari und Chrome auf dem Smartphone keinerlei Probleme mit dem Schließen. Die anderen Browser habe ich jetzt nicht getestet. Vermutlich liegt es an einem Konflikt mit einem anderen Plugin oder einem anderen Aspekt auf deiner WP-Installation (veraltete PHP Version, Caching auch denkbar, …). Am besten kontaktierst du dazu den Plugin-Support. Du kannst auch mal alle anderen Plugins deaktivieren und testen, ob es dann geht (danach einzeln wieder aktivieren und jeweils testen). Manchmal zeigt auch die Console ein paar Erkenntnisse, woran es liegen könnte (geblockte Ressource etc.). LG Sebastian