Das Timing eines Popups nach Seitenprozentsatz ist in Ordnung, bis Sie es benötigen, um genau an einer Stelle zu landen. Vielleicht möchten Sie es in dem Moment, in dem jemand Ihren Preisblock, eine Testimonialreihe oder ein Call-to-Action-Band erreicht, nicht um vage 40% auf der Seite. Die Master Addons Popup Builder Handhabt, dass mit der Auf Scrollen zu Element Trigger. Sie geben dem Popup eine CSS-ID mit einem #Setzen Sie dann dieselbe ID ein, ohne die #, auf dem Element, das Sie als Auslöser fungieren möchten.
Hier ist das vollständige Setup im Master Addons Popup Builder, das kostenlos mit Master Addons für Elementor geliefert wird Wenn ein prozentualer Trigger alles ist, was Sie brauchen, ist die Anleitung für Popup-Triggeroptionen Deckt das ab.
Bevor Sie beginnen #
- Ein Popup, das bereits im Master Addons Popup Builder erstellt wurde (siehe die Anleitung für Popup-Einstellungen Einen zu erstellen)
- Eine Seite mit dem Element, das Sie als Scroll-Trigger verwenden möchten
- Elementor installiert und aktiv
- Master-Addons für Elementor installiert und aktiv (Installationsführung)
Schritt 1: Stellen Sie das Popup so ein, dass es auf dem Bildlauf geöffnet wird, um es zu elementieren #
Öffnen Sie Ihr Popup in Elementor und gehen Sie zu den MA Popup-Einstellungen Panel. Unter EinstellungenSchalten Popup öffnen zu Auf Scrollen zu Element. Es zeigt sich ein neues Feld: Elementwähler.
Der Hinweis unter dem Feld buchstabiert, was es will, ein CSS-Selektor für das Element, das das Popup auf dem Bildlauf auslöst, wie #my-id oder .my-class.
Schritt 2: Geben Sie einen CSS ID Selector (mit dem # -Zeichen) ein #
In der Elementwähler Feld, geben Sie eine CSS-ID ein, die mit beginnt #. Hier ist es #show-popup. Halten Sie den Namen kurz und eindeutig, damit Sie ihn auf der Seite wiederverwenden können, ohne mit etwas anderem in Konflikt zu geraten.
Die # Echte Arbeit leistet: Es fordert das Popup auf, nach einem Element zu suchen, dessen ID lautet show-popup. Veröffentlichen (oder aktualisieren) Sie das Popup, um es zu speichern.
Schritt 3: Fügen Sie Ihrem Zielelement dieselbe ID hinzu (ohne das #-Zeichen) #
Öffnen Sie nun die Seite, auf der das Popup feuern soll und bearbeiten Sie es in Elementor Klicken Sie auf das gewünschte Element als Auslöser, hier ist der Abschnittsblock auf der Seite, und öffnen Sie dessen Fortgeschritten Tab.
Finden Sie die CSS-ID Feld im Reiter Erweitert und geben Sie denselben Namen ein, den Sie im Popup verwendet haben, aber Ohne die #Also einfach show-popup. Dieser eine kleine Unterschied ist der ganze Trick:
- Popup-Elementauswahl:
#show-popup(mit dem Hash) - CSS-ID des Elements:
show-popup(kein Hasch)
Die # Teil des CSS-Selektors ist, nicht Teil der ID, weshalb er ins Popup-Feld gehört, aber nie in das CSS-ID-Feld des Elements Aktualisieren Sie die Seite zum Speichern Eines zum Anschauen: Verwenden Sie keine ID, die bereits an einen Ankerlink oder benutzerdefiniertes CSS an anderer Stelle gebunden ist, nicht wieder, sonst erleben Sie Überraschungen.
Schritt 4: Vorschau und Scrollen zum Element #
Öffnen Sie die Seite am Frontend und beginnen Sie mit dem Scrollen Nichts oben Die zweite das Element, das die show-popup ID scrollt in die Ansicht, das Popup öffnet sich über die Seite.
Möchten Sie, dass mehrere Scrollpunkte dasselbe Popup auslösen? Geben Sie jedem Element die gleiche CSS-ID, show-popup, und jeder von ihnen wird es aufzünden.
Fehlerbehebung #
- Popup öffnet sich nie? Überprüfen Sie den Hash. Der Element Selector des Popups benötigt
#show-popupund die CSS-ID-Anforderungen des Elementsshow-popupOhne Haschisch. - Die # im CSS-ID-Feld benutzt? Nehmen Sie es heraus Das Elementor CSS ID-Feld möchte nur den einfachen Namen.
- Zwei Elemente mit derselben ID, die sich auswirken? Zum Auslösen ist das in Ordnung, aber verwenden Sie keine ID, die bereits CSS verarbeitet, oder verankern Sie Links auf der Seite.
- Popup gar nicht angezeigt? Stellen Sie sicher, dass die Aktivierung des Popups eingeschaltet ist und seine Anzeigebedingungen die Seite mit dem Triggerelement enthalten.
Häufig gestellte Fragen #
Wie öffne ich ein Popup, wenn ich zu einem bestimmten Element in Elementor scrolle?
Setzen Sie die Option Popup öffnen des Popups auf Auf Scrollen zu Element und geben Sie im Element Selector-Feld eine CSS-ID wie #show-popup ein, Fügen Sie dann dieselbe ID, ohne die #, dem CSS-ID-Feld des Zielelements im Erweiterten Reiter von Elementor hinzu.
Warum füge ich die # im Popup hinzu, aber nicht auf dem Element?
Das Element Selector-Feld erwartet einen CSS-Selektor, und # markiert einen ID-Selektor Das Elementor CSS ID-Feld erwartet nur den ID-Namen Sie verwenden also #show-popup im Popup und show-popup auf dem Element.
Kann ich das Popup von mehr als einem Element auslösen?
Ja. Geben Sie jedem Element die gleiche CSS-ID, und das Popup feuert, wenn der Besucher zu einem von ihnen scrollt Dies ist praktisch, wenn Sie mehrere Abschnitte haben, die alle das gleiche Angebot auslösen sollten.
Was ist der Unterschied zwischen On Scroll und On Scroll to Element?
Auf Scroll wird gefeuert, nachdem ein Besucher einen festgelegten Prozentsatz der Seite gescrollt hat. Auf Scroll to Element wird gefeuert, wenn ein bestimmtes Element in Sicht kommt. Dies ist präziser, wenn das Popup an einen genauen Abschnitt gebunden werden soll.
Brauche ich dafür Elementor Pro?
Nr. Der Master Addons Popup Builder arbeitet mit der kostenlosen Version von Elementor, so dass der Trigger On Scroll to Element und die CSS ID Methode ohne Elementor Pro funktionieren.
