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

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
Werbung

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.

Werbung

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.

Werbung

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.

Werbung

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.


Info echo1 OpenClipart-Vectors-katze-1
Ist der Classic-Editor zu kennen? –
Versäume bitte nicht den Advanced Editor! Blick in die Zukunft: Advanced Editor Tools
Info echo2 OpenClipart-Vectors-katze-2
Classic-Editor – Classic Widgets
"Innovativ und ausgezeichnet!" Hauch von Nostalgie: Classic Widgets
Info echo3 OpenClipart-Vectors-katze-3
Klassischen Editor! – und …
"Advanced Editor Tools" Dauerhaft dynamisch: Advanced Editor Tools
Info echo4 OpenClipart-Vectors-katze-7
… die Welt gehört dem, der sie genießt.
– mit Classic Editor und Advanced Tools! Advanced Editor Tools und Classic Widgets
Info echo5 OpenClipart-Vectors-katze-4
Aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist fabelhaft!" Unverändert exzellent: Advanced Editor Tools
Info echo6 OpenClipart-Vectors-katze-5
Antörnend! – hier zur Lancierung
"Advanced Editor Tools – ist de luxe!" Classic Editor und Advanced Editor Tools
Info echo7 OpenClipart-Vectors-katze-6
Classic Widgets sind innovativ!
"Classic Widgets – sind modern!" Advanced Editor ToolsClassic Widgets
Info echo8 OpenClipart-Vectors-katze-8a
"Werkraum ist Werkraum"
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Frontend ist Frontend!" Classic Editor und Advanced Editor Tools

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?

wp wegerl.at

Der Beitrag wurde mit fachlicher Unterstützung erstellt.


Aktualisiert im Jahr 2023-Dezember