Elegante Popup-Fenster in WordPress einbauen mit dem Plugin Popup-Maker

Popup Maker für Popups in Wordpress

In der Regel bastele ich alle Webseiten für meine Kunden mit dem Blogsystem WordPress. Ausnahmen sind Internetseiten, bei denen ich eine individuelle Programmierung mit PHP basteln muss – aber sonst: alles in WordPress.

Ausgelöst durch die Corona-Pandemie haben in kurzer Zeit nun schon zwei Kunden angefragt, ob ich ihnen nicht ein Popup auf der Webseite erstellen könnte, das Besuchern anzeigt, in welcher Form die Dienste meiner Kunden weiterhin genutzt werden können.

Mit einem Popup-Fenster kann man seine Webseitenbesucher unkompliziert über aktuelle Vorgehen in der Coronakrise informieren (Fotos: Sir Apfelot).

Mit einem Popup-Fenster kann man seine Webseitenbesucher unkompliziert über aktuelle Vorgehen in der Coronakrise informieren (Fotos: Sir Apfelot).

TL;DR: Für alle, die keine Lust haben, meine ganzen Erläuterungen zu lesen: Ihr findet das Popup Maker Plugin, um das es geht, hier in der Sammlung der WordPress Plugins auf wordpress.org oder direkt auf der Webseite des Anbieters.

Eigentlich ist die Bezeichnung Popup-Fenster nicht ganz richtig, auch wenn jedermann es so verwendet. Praktisch handelt es sich hier nämlich nur um ein Overlay-Element, das über der restlichen Internetseite schwebt. Ein Popup-Fenster ist dagegen ein eigenständiges Browserfenster, das durch ein Script geöffnet wird und dann im Vordergrund liegt.

Die "echten" Popup-Fenster sind jedoch schon vor Jahren abgeschafft worden, da sie massiv für Werbefenster missbraucht wurden. Mittlerweile fängt jeder Browser eigenständig solche Fenster ab, damit sie den Benutzer nicht nerven. Der Benutzer sieht dann in der Regel nur einen Hinweis, dass eine Seite versucht hat, ein Popup-Fenster zu öffnen.

Wir kümmern uns hier also um ein Overlay-Fenster – auch wenn wir es mit dem Plugin "Popup Maker" machen, was so gesehen den falschen Namen hat.

In Safari werden echte Popup-Fenster standardmässig unterdrückt – es sei denn man gibt sie bei einer Webseite explizit frei. Unser Overlay-Popup ist davon aber nicht betroffen.

In Safari werden echte Popup-Fenster standardmässig unterdrückt, es sei denn man gibt sie bei einer Webseite explizit frei. Unser Overlay-Popup ist davon aber nicht betroffen.

Bei den Popup-Plugins für WordPress gibt es eine riesige Auswahl. Ich habe einige Plugins ausprobiert und nicht selten waren es Lösungen, die als Plugin kostenlos waren, aber für eine funktionierende Umsetzung sollte man dann doch ein monatliches Abo von einem angeschlossenen Service abschließen.

Dagegen sind die vollkommen kostenlosen Varianten oft fehlerhaft und öffnen sich aus unerfindlichen Gründen nicht, oder sie sehen nur am Desktop oder Tablet gut aus und werden am Smartphone falsch dargestellt – also unbrauchbar.

Popup Maker ist das erste Plugin gewesen, das viele Einstellungsmöglichkeiten, eine einfache Bedienung, kostenlose Nutzung und einwandfreie Funktion geboten hat. Entsprechend möchte ich es hier als Empfehlung vorstellen. Ihr findet es hier auf der Anbieter-Webseite.

Die Basisversion von Popup Maker ist gratis und bietet schon genug Funktionalität, um Popups mit Cookies zu verbinden.

Die Basisversion von Popup Maker ist gratis und bietet schon genug Funktionalität, um Popups mit Cookies zu verbinden.

Vorgaben für die Umsetzung

Damit man mit dem Fenster, das eingeblendet wird, möglichst alle Besucher erreicht, sollte es nicht nur auf der Startseite erscheinen, sondern auch auf allen Unterseiten, auf die Leute zum Beispiel über Links bei Google gelangen.

Ebenso war mir wichtig, dass das Popup (ich nutze nun mal konsequent die falsche Bezeichnung im restlichen Text) nur einmal pro Tag und Besucher angezeigt wird. Für diesen Zweck muss das Plugin ein Cookie setzen, das einen Tag bestehen bleibt. Das Cookie soll dabei schon gesetzt werden, wenn das Popup sich öffnet und nicht erst nach dem Schließen – falls Besucher abspringen, bekommen sie beim nächsten Besuch das Fenster nicht wieder angezeigt.

Der letzte Wunsch war die Gestaltung des Inhalts. Hier sollten sowohl einfache Texte als auch Grafiken einsetzbar sein. Dazu muss das Overlay sowohl auf dem Mac als auch auf iPad und iPhone gut aussehen – also responsiv sein und sich dem Endgerät anpassen.

Alle diese Dinge lassen sich mit dem Popup Maker lösen – und das auch schon in der kostenlosen Basisversion.

Das Popup wird in einem WYSIWYG-Editor gestaltet, in dem man mit CSS und HTML oder einfach nur mit Text und Bildern arbeiten kann.

Das Popup wird in einem WYSIWYG-Editor gestaltet, in dem man mit CSS und HTML oder einfach nur mit Text und Bildern arbeiten kann.

Einstellungen im Plugin

Ich möchte euch anhand meines aktuellen Kundenprojekts www.knowwau.com zeigen, welche Einstellungen ich im Plugin vorgenommen habe. Meine Kundin hat mir dazu ihre Freigabe erteilt und bekommt als Dankeschön hoffentlich ein paar Besucher über diesen Artikel.

Falls ihr an Hundeerziehung interessiert seid und ein paar ihrer Online-Kurse anschauen möchtet (da man aktuell ja zu keiner Hundeschule hingehen kann), dann möchte ich euch ihre Webseite knowwau.com wärmstens ans Herz legen. Dort findet ihr aktuell auch das Popup in Aktion. 😉

Popup Maker Auslöser

Bei den Einstellungen für den Auslöser wähle ich immer, dass das Fenster sich automatisch nach einer halben Sekunde automatisch öffnet. Gleichzeitig wird ein Cookie mit einer Laufzeit von einem Tag gesetzt, sodass Besucher den Cookie immer nur einmal alle 24 Stunden angezeigt bekommen.

Popup Maker Targeting

Der Bereich Targeting ermöglicht die Auswahl der Seiten, auf der das Popup erscheinen soll. Hier gibt es zahlreiche Auswahlmöglichkeiten. Wählt man nichts aus, erscheint das Banner auf allen Seiten.

 

Popup Maker Theme Editor

Man kann zwischen verschiedenen Themes auswählen und diese auch im Theme-Editor verändern. Hier lassen sich zum Beispiel die Transparenz im Hintergrund einstellen oder man kann Abstände und Größe des Fensters ändern. Ich habe alles gelassen, wie es war und nur die Transparenz auf 80% gesetzt. Der Rest ist schon optimal für eine Darstellung auf Desktoprechner und mobilen Endgeräten.

Popup Maker Schliessen Button

Für die Anpassung des "Schliessen"-Buttons gibt es einen eigenen Bereich im Plugin. Damit kann man entscheiden, wo der Button erscheint, welche Farbe er hat und welchen Text er trägt.

Popups mit Kunden testen

Wenn man an einem Popup arbeitet, möchte man natürlich nicht, dass jeder Besucher mit den Bauarbeiten konfrontiert wird. Aus dem Grund stelle ich den Auslöser immer so ein, dass das Popup nur bei 404 Fehlern erscheint. Also wenn man eine URL aufruft, die es auf der Webseite nicht gibt. Dazu hängt man an die Domain einfach "/abc" oder etwas ähnliches an und ruft diese URL auf.

Um zu umgehen, dass man das Popup nur einmal pro Tag testen kann, nutze ich immer ein Inkognito-Fenster bzw. ein Privates Fenster, da in diesen Browser-Fenstern keine Cookies gespeichert werden und man das Popup immer wieder gezeigt bekommt.

Zum Testen wähle ich beim Targeting die 404-Seiten und öffne dann eine fehlende Unterseite in einem privaten Browserfenster auf.

Zum Testen wähle ich beim Targeting die 404-Seiten und öffne dann eine fehlende Unterseite in einem privaten Browserfenster auf.

On Exit Intent und andere Spezialitäten

Wenn man ein On Exit Intent Popup machen möchte – also ein Popup, das sich öffnet, wenn der Besucher mit dem Mauszeiger aus dem Browserfenster geht – dann muss man leider ein Abo beim Popup Maker-Service buchen. Die Preise (247 USD pro Jahr) sind dort recht happig, sodass ich an dieser Stelle lieber eine Alternative suchen würde.

Die Preise von Popup Maker – sofern man nicht mit den Funktionen der kostenlosen Basisversion auskommt – sind nicht ganz ohne. Aber das Plugin ist wirklich funktional und zuverlässig.

Die Preise von Popup Maker – sofern man nicht mit den Funktionen der kostenlosen Basisversion auskommt – sind nicht ganz ohne. Aber das Plugin ist wirklich funktional und zuverlässig.

Wer jedoch Geld mit seinem Blog verdient und bereit ist, ein umfassendes Popup Tool zu bezahlen, dass einfache Bedienung und saubere Popups verbindet, der kann sich die Popup Maker Abos trotzdem mal anschauen.


Aktueller RAMPOW Deal: über 40% Rabatt auf das USB-C auf Lightning-Kabel bei Amazon. Dazu den Code CKRYHHV4 bei der Kasse eintragen. Gültig bis 27.7.2020.

2 Kommentare

  1. Peter sagt:

    Ich habe Popup Maker (in der freien Basisversion) auch schon gern genutzt und bin ebenfalls im Wesentlichen zufrieden mit den Möglichkeiten. Danke übrigens für die Tips zum Handling bei "Bauarbeiten" mit dem Plugin – das hatte ich bisher nicht so auf dem Schirm… und habe daher u.U. dem einen oder anderen Besucher der Seiten ein paar Einblicke in die Fortschritte der Implementierung gegeben…

    Was ich nicht so überzeugend finde, sind aber z.B. die Möglichkeiten der Formatierung des Popup-Texts. Abstände zwischen Absätzen oder von der Überschrift zum Text sind – soweit ich das bisher sehe – mit den Standardformatierungsoptionen beispielsweise nicht zu beeinflussen (und sind quasi nicht vorhanden). Insbesondere hängt der Text immer ganz direkt unter der Überschrift.

    Allerdings kann man das Ganze mit ein paar CSS-Kenntnissen durchaus – über die mitgelieferten Themes hinaus – recht individuell formatieren, wenn man sich erst einmal die vom Plugin verwendeten Klassen und/oder IDs besorgt hat (etwa über den Browsereigenen „Inspektor“) und die Änderungen dann im WP-Backend beim benutzerdefinierten CSS der Website ablegt. So lassen sich z.B. Typografie und Farben kundenspezifisch anpassen, wenn man Wert darauf legt, aber natürlich auch allgemeine Designaspekte wie Randabstände usw..

    • Sir Apfelot sagt:

      Hallo Peter! Ja, bei den Feineinstellungen muss man ein bisschen CSS können, um das schick zu machen. Aber im Grunde ist das Standardtemplate schon verwendbar. Ich hatte schon deutlich grausamere Popups bei anderen Plugins gesehen. 😀

Schreibe einen Kommentar

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

Alle News 1x pro Woche

Du magst die Artikel auf Sir Apfelot?
Dann trage dich in meinen wöchentlichen Newsletter ein.