Willkommen beim Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
Pop-up

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
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

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.

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:

Wie gut findest du so ein Exit Pop-up?


Aktualisiert im Jahr 2023-Dezember