Wie kann ich bei der Joomla! Komponente EngageBox ein Popup zeitverzögert Einblenden?
Es mehrere Lösungen die man verwenden kann um ein Popup Zeitverzögert zu laden. Jede dieser Lösungen hat ihre eigenen Vor- und Nachteile.
Wenn Seite geladen - (HTML Dokument geladen)
Der „Wenn Seite geladen“-Trigger wird ausgelöst, wenn das ursprüngliche HTML-Dokument vollständig geladen und geparst wurde, ohne darauf zu warten, dass Stylesheets, Bilder und Subframes zu Ende geladen werden. Äquivalent zum Document.DOMContentLoaded Ereignis.
Vorteil
Das Popup wird relativ Schnell angezeigt, da nicht gewartet wird bis alle Bilder usw. geladen werden die sich auf der Seite befinden. Das verhalten ist gut um z.B. ein Hinweis-Popup einzublenden oder bei Seite die lange Ladezeiten haben.
Nachteil
Wenn im Popup Bilder geladen werden oder Elemente von anderen Joomla! Erweiterungen eingebunden sind (z.B. Newsletter Anmeldung) kann es passieren, dass diese Elemente noch nicht sofort sichtbar sind, sondern erst noch geladen werden müssen.
Wie man ein Seitenlade-Popup in Joomla! erstellt
- In der Administration geht man auf Komponenten -> EngageBox
- Öffnet das Gewünschte Popup
- Im Reiter „Verhalten“ wählt man den Button „Wenn Seite geladen“
- Im Feld „Verzögerung“ kann eine Auslöseverzögerung in Millisekunden angegeben werden (0 für sofortige Ausführung oder 2000 für 2 Sekunden Verzögerung).
Wenn Seite bereit – (Vollständig geladen)
Der „Wenn Seite bereit“-Trigger wird ausgelöst, wenn die gesamte Seite geladen ist, einschließlich aller abhängigen Ressourcen wie Stylesheets und Bilder. Äquivalent zum Document.load Ereignis.
Vorteil
Das Popup wird erst eingeblendet, wenn die vollständige Seite inklusive aller Bilder und Stylesheet Elemente, Skripte usw. geladen ist. Wenn man in seinem Popup Bilder oder Formular und Inhalte von weiteren Joomla! Plugins anzeigt sind diese schon vorab geladen und werden sofort angezeigt.
Nachteil
Bei langsam ladenden Seiten wird das Popup sehr spät angezeigt.
Wie man ein Page Ready Popup in Joomla! erstellt
- In der Administration geht man auf Komponenten -> EngageBox
- Öffnet das Gewünschte Popup
- Im Reiter „Verhalten“ wählt man den Button „Wenn Seite bereit“
- Im Feld „Verzögerung“ kann eine Auslöseverzögerung in Millisekunden angegeben werden (0 für sofortige Ausführung oder 2000 für 2 Sekunden Verzögerung).
Scroll-Tiefe-Trigger
Der Auslöser „auf Scroll tiefe“ wird ausgelöst, wenn der Besucher die angegebene Bildlauftiefe in Prozent oder Pixel erreicht hat. Wenn die angegebene Scrolltiefe im Viewport sichtbar ist, wenn die Seite geladen wird, wird der Auslöser ausgelöst, ohne dass ein Scrollvorgang stattfindet.
Vorteil
Der Trigger ist unabhängig von der Zeit die der Besucher auf der Seite verbringt.
Nachteil
Wenn der Besucher nicht weit genug nach unten Scrollt wird ihm das Popup nicht angezeigt.
Wie man ein Popup mit Scroll-Trigger in Joomla! erstellt
Um ein Popup so einzurichten, dass sie bei der Scrolltiefe ausgelöst wird, geht man wie folgt vor:
- In der Administration geht man auf Komponenten -> EngageBox
- Öffnet das Gewünschte Popup
- Im Reiter „Verhalten“ wählt man den Button „auf Scroll Tiefe“
- Im Feld Scroll-Tiefe die Einheit (Prozent oder Pixel) wählen.
- Wenn man „Prozent“ wählt, wird eine Einstellung für den Bildlaufprozentsatz angezeigt um festzulegen wie weite der Benutzer nach unten Scrollen muss bis das Popup angezeigt wird.
- Wenn man „Pixel“ auswählt wird eine Pixel-Einstellung angezeigt um festzulegen wie viele Pixel der Besucher nach unten scrollen muss bis das Popup angezeigt wird.
- Über das Feld „Beim Rückwärtsscrollen schließen“ kann man einstellen ob das Popup automatisch beim nach oben Scrollen geschlossen werden soll.
- Über „Firing Frequency“ kann eingestellt werden ob das Popup einmal oder immer wieder angezeigt wird wenn der Besucher nach unten scrollt.
- Im Feld „Verzögerung“ kann eine Auslöseverzögerung in Millisekunden angegeben werden (0 für sofortige Ausführung oder 2000 für 2 Sekunden Verzögerung).
Element-Sichtbarkeit-Trigger
Der Trigger "on element Visibility" wird ausgelöst, wenn ein bestimmtes HTML-Element in das Browser gelangt. Das Laden des Popups funktioniert unabhängig vom Scrollen sobald das HTML-Element im Browserfenster erscheint.
Vorteil
Der Trigger ist unabhängig von der Zeit die der Besucher auf der Seite verbringt.
Nachteil
Dieser Trigger ist eher was für Profis, da man sehr genau die Einstellungen beachten muss und sich schnell Fehler einschleichen können.
Wie man ein Popup erstellt, das erscheint, wenn ein HTML-Element in Joomla! sichtbar wird
- In der Administration geht man auf Komponenten -> EngageBox
- Öffnet das Gewünschte Popup
- Im Reiter „Verhalten“ wählt man den Button „on element Visibility“
- Feld „Trigger Element“ - Legen Sie das Triggerelement fest, indem Sie die ID oder die Klasse des Elements/der Elemente angeben, das/die diesen Trigger auslösen soll(en). Sie können mehrere Elemente durch Komma getrennt angeben.
- Feld „Min. Prozent Sichtbar“ - Legen Sie den Prozentsatz des ausgelösten Elements, der sichtbar sein muss, damit der Auslöser ausgelöst wird, in der Einstellung Min. Prozent sichtbar fest.
- Feld „Close outside Viewport - Legen Sie fest, ob das Feld geschlossen werden soll, wenn sich das ausgelöste Element außerhalb des Ansichtsfensters befindet (Einstellung Außerhalb des Ansichtsfensters schließen).
- Über „Firing Frequency“ kann eingestellt werden ob das Popup einmal oder immer wieder angezeigt wird wenn der Besucher nach unten scrollt.
- Im Feld „Verzögerung“ kann eine Auslöseverzögerung in Millisekunden angegeben werden (0 für sofortige Ausführung oder 2000 für 2 Sekunden Verzögerung).