Pop-up-Showdown: Schneller Test von 2 Plug-ins

Hallo 💬 , ich bin's! "Der Webmaster von Wegerl.at? Denke, das passt schon gut! Er mag vielleicht ein wenig 'fortgeschritten' sein, aber das passt schon ganz gut, finde ich. 🦊✨" Illustration, MenielDM

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter. Info

Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

Einfach und intuitiv –
Der Classic-Editor für alle. Info

Classic Editor & Advanced Editor Tools
Erleben Sie es.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

Pop-ups sind wie kleine Helfer auf einer Webseite – sie können die Aufmerksamkeit auf besondere Angebote lenken und die Interaktion mit den Besuchern erhöhen. Ein geschickt platziertes Pop-up kann das Interesse wecken und dem Nutzer relevante Inhalte oder Möglichkeiten präsentieren. Allerdings sind Pop-ups oft auch umstritten. Einige sehen sie als störend an und empfinden sie als Unterbrechung beim Surfen. Daher ist es entscheidend, Pop-ups mit Bedacht einzusetzen, um den Mehrwert für den Nutzer zu maximieren, ohne dabei zu aufdringlich zu sein.

Ein Beispiel dafür wäre eine Umfrage, die im richtigen Moment angezeigt wird und die Besucher zur Teilnahme einlädt. Anstatt in der Seitenleiste übersehen zu werden, kann ein Pop-up hier die Aufmerksamkeit gezielt auf sich ziehen. Die Kunst liegt darin, Pop-ups subtil und gezielt einzusetzen, um einen echten Nutzen für die Besucher zu bieten.

Die Vielseitigkeit von Pop-ups ermöglicht es, sie auf unterschiedliche Weise einzusetzen und kreativ zu gestalten. Bei ihrer klugen Verwendung können sie die Nutzererfahrung verbessern und wertvolle Möglichkeiten bieten.

Inhaltsverzeichnis

Pop-up mit Plug-in Boxzilla

Mit dem Plug-in Boxzilla wird ein Pop-up beim Besuch der Website eingeblendet – entweder sofort oder erst beim Scrollen. Es dient als freundliche Begrüßung und kann beispielsweise zur Einladung für eine Umfrage genutzt werden. Die Abstimmung kann direkt im Pop-up erfolgen, was praktisch ist. Dank eines Cookies wird das Pop-up beim weiteren Durchstöbern der Website nicht erneut angezeigt. Es ist vorteilhaft, das Pop-up vorzeitig einzublenden, bevor man die Seite verlassen möchte und noch einmal aufgehalten wird.

Boxzilla

Einstellung Boxzilla

Die Einrichtung und Erstellung von Pop-ups inklusive der Cookie-Einstellungen ist sehr benutzerfreundlich und ermöglicht eine schnelle Einarbeitung.

Besonders erwähnenswert ist die Funktion "Auto-show box". Damit kann festgelegt werden, bei welcher Scrolltiefe der Website das Pop-up erscheint. Zum Beispiel:

Yes, when at element
- #comments (nach ID) oder
- .nav-links (nach Klasse).

Um die gewünschte Scrolltiefe für die Website festzulegen, ist es zunächst wichtig, die entsprechende ID oder Class zu identifizieren. Das geht ganz einfach, indem du auf der Website mit der rechten Maustaste klickst und dann 'Seitenquelltext anzeigen' wählst.

Beispiel CSS für Boxzilla

/* Boxzilla overlay background */
.boxzilla-overlay {
    background: #355cab !important;
    opacity: 0.2 !important;
} 

/* Boxzilla Scrollbar small */
.boxzilla::-webkit-scrollbar {
    width: 6px;
}
.boxzilla::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}
.boxzilla::-webkit-scrollbar-thumb {
    border-radius: 5px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

/* Boxzilla POPUP schütteln */
.boxzilla {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: wobble;
}
@keyframes wobble {
    from {
        transform: none;
    }
    15% {
        transform: translate3d(-21%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
    30% {
        transform: translate3d(18%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
    45% {
        transform: translate3d(-12%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
    60% {
        transform: translate3d(6%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
    75% {
        transform: translate3d(-3%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
    to {
        transform: none;
    }
}

Im Vergleich zum folgeden 'Popup Maker', das eine Dateigröße von etwa 4,1 MB hat, ist Boxzilla mit nur etwa 10 % davon deutlich kompakter.

Interne Anmerkung: Der Einstellung gleich zum Besuch der Website das Pop-up öffnen und durch die Verwendung von Plug-in Page Loading Effects wird Boxzilla erst im Anschluss geladen. Im Gegensatz dazu bietet das folgende Plug-in Popup Maker mit Page Loading Effects einen Vorteil gegenüber Boxzilla, da es gleichzeitig mit dem Page Loading Effect erscheint.

Pop-up mit Plug-in Popup Maker

Das Plug-in Popup Maker bietet intuitive Einstellungen für die Pop-up-Erstellung, ähnlich wie Boxzilla. Doch wenn es um Individualität geht, erfordert es eher fortgeschrittene Kenntnisse. Ein wichtiger Punkt ist die Möglichkeit, Themen individuell zu formatieren, was für Anpassungen entscheidend ist.

In der kostenlosen Version ist es im Backend nach dem Speichern nur einmal möglich, Änderungen zu testen. Daher steht nach jeder Änderung und Speicherung nur einmaliger Test zur Verfügung.

Um zu testen, kann man in den Einstellungen 'Beim Schließen des Popups' als Auslöser wählen und eine Beitrags-ID als Ziel eingeben. So kann das Pop-up getestet werden.

Auslöser / Ereignis: 'Beim Schließen des Popups'.
'Targeting' eine Beitrags-ID eintragen, welche zum Test verwendet wird.

Um jedoch Änderungen im Frontend zu überprüfen, muss der Beitrag in einem anderen Browser aufgerufen werden, während man im Backend angemeldet ist. Jede Änderung erfordert das Neuladen des Browsers, um das aktualisierte Pop-up zu sehen.

Das Feintuning des Inhalts im Pop-up kann anspruchsvoll sein, obwohl es auf den ersten Blick einfach erscheint.

Der Umfrage mit so Exit Pop-up?

Beispielweise gab es eine Umfrage zum Thema 'Wie nützlich findest du ein Exit-Pop-up?' Beim Verlassen der Seite erschien ein Pop-up mit der Einladung zur Abstimmung. Allerdings musste man im Pop-up zuerst auf einen Link zur Seite mit der Umfrage klicken, was als umständlich empfunden wurde. Trotzdem gab es innerhalb kurzer Zeit 23 Stimmen für die Umfrage: