Pop-Ups erstellen mit Popup Maker
Zuletzt aktualisiert am 31. Dezember 2020 um 10:06 Uhr
Ich kann mir denken was Du beim Lesen der Überschrift zu diesem Artikel gedacht hast: Pop-Ups sind nervig. Pop-Ups sind lästig. Warum um alles in der Welt braucht es dann einen Blogbeitrag, wie man die Dinger erstellt?
Aber eigentlich sind Pop-Ups wie McDonalds: Keiner mag sie, sie funktionieren trotzdem.
Wobei es in meinen Augen ganz gravierende Unterschiede gibt was den „Nerv-Faktor“ angeht. Das, was als lästig und nervig empfunden wird sind Werbeanzeigen, die einem wenige Sekunden nach betreten der Website vor die Nase geknallt werden und die man dann erstmal wieder wegklicken muss, um das zu sehen, weswegen man eigentlich auf die Seite gekommen ist: Den Inhalt.
Als deutlich weniger aufdringlich werden kleine Einblendungen am unteren Bildschirmrand empfunden oder Pop-Ups, die sich erst beim Verlassen der Website öffnen. Letzteres nennt sich „Exit Intend“.
Inhaltsverzeichnis
Wie kommt das Pop-Up auf die Website
Es gibt für WordPress eine ganze Reihe von Plugins, mit denen man Pop-Ups einbinden kann. Mein persönlicher Favorit ist das Plugin „Popup Maker„. Das Plugin ist in der Basisversion kostenlos und kann direkt aus WordPress heraus installiert werden.
Wenn Du meinen Blog schon eine Weile verfolgst dann weißt Du, dass ich es einfach und ohne Schnickschnack mag. Je einfacher ein Plugin in der Einrichtung und Bedienung, desto besser.
Und dieses Kriterium trifft auf auf den Popup Maker zu.
Nach der Installation des Plugins findest Du in der Seitenleiste Deines Dashboards einen neuen Menüpunkt „Popup Maker“.
Durch Klick auf „Popup hinzufügen“ kannst Du sofort mit der Gestaltung beginnen.
Das Plugin verwendet den klassischen Editor. Du kannst Deine Bilder und Texte also ganz genau so einpflegen, wie Du das von Seiten und Blogbeiträgen bereits kennst.
Das Design Deines Pop-Ups, also Farben, Schriftarten etc. gestaltest Du dann über die „Popup Themes“. Dazu komme ich gleich, vorher möchte ich Dir aber noch die Einstellungen für das Pop-Up vorstellen.
Pop-Up Einstellungen
Die Einstellungs-Möglichkeiten findest Du unter dem Eingabefenster. Sie unterteilen sich nach
- Auslöser
- Anzeige
- Targeting
- Schließen und
- Fortgeschritte
Auslöser
Der Auslöser legt fest, unter welchen Bedingungen sich das Popup öffnet. Durch Klick auf „Neuen Auslöser festlegen“ kommst Du in die Einstellungen für diese Option.
Du kannst in der kostenfreien Version des Plugins wählen zwischen
- Öffnen durch Klick und
- Zeitverzögerung
Öffnen durch Zeitverzögerung ist das, was die meisten unter einem Pop-Up verstehen: Nach einem bestimmten, festgelegten Zeitfenster öffnet sich das Pop-Up – egal, was der Besucher der Website gerade tut.
Ich weiß nicht, wie es Dir geht, aber ich schließe diese Art von Pop-Ups quasi aus Reflex sofort, ohne auch nur eine Sekunde auf den Inhalt zu schauen. Ähnlich, wie ich eine Fliege wegwischen würde, die mir gerade über meine Buchseiten krabbelt.
Solche zeitverzögerten Pop-Ups sind einfach nur lästig und wirklich niemand mag sie. Daher würde ich diesen Auslöser am allerwenigsten empfehlen.
Öffnen durch Klick ist das komplette Gegenteil davon: Dieses Pop-Up-Fenster öffnet sich nur dann, wenn der Besucher auf einen dafür hinterlegten Link klickt. Das habe ich zum Beispiel für meine Newsletter-Hinweise in den Blogbeiträgen so eingerichtet:
Willst Du WordPress noch besser verstehen?
Werde Stammgast im WP Bistro und erhalte künftig alle Infos zu neuen Tutorials, Blogbeiträgen sowie Kursen und Webinaren - direkt in Dein Postfach.Ja, ich will dabei sein!
Exit Intend: Die Funktion, das Pop-Ups sich erst beim Schließen der Website öffnen zu lassen ist in der kostenfreien Version des Plugins leider nicht enthalten, kann aber über das kostenpflichtige AddOn „Exit Intend Popups*“ nachgerüstet werden. Das AddOn kostet für eine einzelne Website USD 35,00 pro Jahr.
(*Dieser Link ist ein Affiliate-Link. Wenn Du darüber das AddOn kaufst erhalte ich eine kleine Provisionsgutschrift. Dir entstehen dadurch keine zusätzlichen Kosten.)
Wenn Du das AddOn installiert und aktiviert hast steht Dir bei den Auslösern zusätzlich die Option „Exit Intend“ zur Verfügung. Du musst dafür weiter nichts einstellen wenn Du diesen Trigger auswählst.
Technisch funktioniert das so, dass das Pop-Up dann geöffnet wird, wenn der Mauszeiger sich aus dem Inhaltsbereich der Website bewegt, was normalerweise immer dann der Fall ist, wenn man das Browserfenster schließen möchte oder eine neue Adresse ins Browserfenster eingibt.
Der Besucher ist also in der Regel nicht mehr damit beschäftigt, Deine Inhalte zu lesen und das Pop-Up hat eher die Funktion eines „Abschiedsgrußes“.
Targeting
Das Targeting ermöglicht Dir festzulegen, wo auf Deiner Website das Pop-Up erscheinen soll. Du kannst hier über die Bedingungen sowohl bestimmte Seite ausschließen als auch festlegen, dass die Einblendung nur auf bestimmten Seiten erfolgen soll.
Außerdem kannst Du bestimmen, ob das Pop-Up auch auf mobilen Geräten angezeigt werden soll. Insbesondere wenn Du die Variante des zeitverzögerten Auslösers gewählt hast würde ich empfehlen, auf die Anzeige auf mobilen Geräten zu verzichten.
„Nervige Pop-Ups auf mobilen Geräten“ sind für Google nämlich auch ein Ranking-Kriterium und könnten negativen Einfluss auf Deine Positionierung in den Suchergebnissen haben.
Anzeige
Hierüber kannst Du festlegen, wie Dein Pop-Up grundsätzlich dargestellt wird. Du wählst das Theme aus ( dazu komme ich gleich noch ), die Größe und die Positionierung.
Ein klassisches Pop-Up wird z.B. ca. 60% der Bildschirmbreite in Anspruch nehmen und mittig zentriert positioniert sein.
Du könntest aber auch ein kleineres Pop-Up mit maximal 30% Breite unten rechts an den Bildschirmrand packen. Das könnte sich dann auch zeitverzögert öffnen, denn solche „Pop-Ups“ werden oft als deutlich weniger lästig empfunden als vollflächige Einblendungen.
Schließen
Das ist denke ich relativ selbsterklärend. Hier kannst Du festlegen, welcher Text im „Schließen“-Button angezeigt werden soll ( ich persönlich bevorzuge hier einfach ein „X“ und wie lange es dauern soll, bis sich das Fenster nach Klick auf den Schließen-Button schließt. Meine Empfehlung: Belasse es bei den voreingestellten 0ms – es gibt keinen vernünftigen Grund, warum das Fenster sich nicht sofort schließen sollte wenn der Besucher es nicht mehr sehen möchte.
Unter „Alternative Methoden“ kannst Du noch weitere Möglichkeiten zum Schließen des Pop-Up-Fensters erlauben. Ich wähle hier immer alle drei Optionen aus um es meinen Besuchern so einfach wie möglich zu machen, eine Einblendung zu schließen, die sie nicht sehen wollen.
Pop-Up Themes
Nachdem ich Dir die Einrichtung des Pop-Ups jetzt vorgestellt habe komme ich jetzt endlich zu den Themes, die der PopUp Maker mitbringt.
Das Theme entscheidet über das grundsätzliche Aussehen Deines Pop-Ups, also Hintergrundfarben, Schriftarten und -farben, Schriftgröße, etc.
Du findest die Optionen für die Einrichtung und Anpassung der Themes unter „Popup Maker“ – „Popup Themes“.
Das Plugin bringt eine ganze Reihe vorinstallierter Themes mit – schau Sie Dir einfach mal an, vielleicht ist ja bereits etwas passendes für Dich dabei.
Wenn ich ein neues Pop-Up einrichte dann passe ich in der Regel einfach das Standard-Theme an. Dafür einfach in der Übersicht beim entsprechenden Theme auf „Bearbeiten“ klicken.
Overlay
Damit das Pop-Up mehr „Präsenz“ erhält empfiehlt es sich, ein halbtransparentes „Overlay“ über den Hintergrund zu legen. Du kannst dabei jede beliebige Farbe auswählen und über den Schieberegler „Deckkraft“ festlegen, wie stark die Transparenz sein soll. Im Vorschau-Fenster rechts kannst Du sofort sehen, welchen Effekt Deine Einstellungen haben.
Container
Hierüber kannst Du zum Beispiel die Hintergrundfarbe für Dein Pop-Up-Fenster festlegen oder – falls gewünscht – eine Umrandung definieren.
Auch hier zeigt das Vorschaufenster rechts Dir sofort an, wie das Pop-Up nach Deinen Anpassungen aussehen wird.
Titel
Hierüber definierst Du Schriftart, Schriftfarbe und -größe der Hauptüberschrift.
Inhalt
Über diese Option legst Du Schriftart und -farbe des Inhaltsbereiches fest.
Schließen
Hier kannst Du einstellen, wie der Schließen-Button in Deinem Pop-Up aussehen soll, wo er positioniert wird und wie er standardmäßig beschriftet sein soll.
Verzichte bitte darauf, den Schließen-Button außerhalb des Fensters zu positionieren. Nichts ist nerviger als ein Pop-Up, bei dem man nicht erkennt, wie man es schließen kann.
Fazit
Ja, Pop-Ups gehören nicht zu den beliebtesten Elementen im Webdesign. Aber Pop-Up ist auch nicht gleich Pop-Up. Durch die Art des Auslösers und die Positionerung kann ein Pop-Up mal mehr, mal weniger aufdringlich erscheinen.
Mit dem Popup Maker stehen Dir hier viele verschiedene Möglichkeiten zur Wahl, Einblendungen in Deine Website zu realisieren.
Welche Variante ist Deine bevorzugte Variante? Oder hasst Du Pop-Ups, egal in welcher Form? Schreib es mir einfach hier unten in die Kommentare.
Anzeige
