Manchmal möchte man nicht, dass ein Popup von selbst geladen wird Sie möchten, dass es sich nur öffnet, wenn jemand auf einen Button oder Link klickt Die Master Addons Popup Builder Trägt dies mit der Auf Klicken Trigger und einen CSS-ID-Selektor Sie setzen die ID auf dem Popup, fügen dann dieselbe ID zu einem beliebigen Elementorelement hinzu, und ein Klick auf dieses Element öffnet das Popup.
Was ist ein On-Click-Popup in Elementor? #
Ein On-Click-Popup in Elementor, das versteckt bleibt, ist ein Popup, das einen Besucher auf einen bestimmten Popup-Button, ein Bild, ein Bild oder einen Link klickt, anstatt beim Laden der Seite auf einem eigenen Element zu erscheinen. Die Master Addons Popup Builder Baut eine mit der Auf Klicken Trigger: man gibt dem Popup ein CSS ID-wähler Wie zum Beispiel #sale-popup, dann fügen Sie dieselbe ID hinzu (ohne die #) zum CSS-ID-Feld eines beliebigen Elementorelements. Da die Übereinstimmung nur mit der ID erfolgt, kann ein Popup aus vielen Elementen ausgelöst werden, da Sie wie eine Elementorlizenz benötigen und kein benutzerdefiniertes JavaScript erforderlich ist, obwohl der On-Click-Trigger Master Addons Pro erfordert. On-Click-Popups passen zu absichtsgesteuerten Inhalten wie Preisdetails, Videodemos, Anmeldeformularen und Gutscheincodes, bei denen ein automatisches Popup eher unterbrechen als helfen würde. Durchsuchen Sie den Rest des Master Addons Widgets und Erweiterungen Um zu sehen, was man noch in einen.
Bevor Sie beginnen #
Drei Dinge müssen vorhanden sein, bevor Sie ein On-Click-Popup einrichten: ein Popup, das bereits im Master Addons Popup Builder erstellt wurde, Elementor installiert und aktiv ist und Master Addons für Elementor installiert und aktiv Das ganze Setup dauert dann zwei Felder und etwa eine Minute.
- Ein Popup, das bereits im Master Addons Popup Builder erstellt wurde (siehe die Anleitung für Popup-Einstellungen Einen zu erstellen)
- 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 Klick geöffnet wird #
Öffnen Sie Ihr Popup in Elementor und gehen Sie zu den MA Popup-Einstellungen Panel. Unter Einstellungenändere Popup öffnen zu Auf Klicken. Es zeigt sich ein neues Feld: Nach Auswahl öffnen.
Geben Sie in diesem Feld eine CSS-ID ein Mit dem # -Zeichen(zum Beispiel #sale-popup. Das ist der Selektor, der das Popup auslöst Halten Sie den Namen einfach und einzigartig, damit er leicht wiederverwendet werden kann.
Schritt 2: Fügen Sie die CSS-ID zu einem Elementorelement hinzu #
Gehen Sie nun zu der Seite, auf der Sie den Auslöser haben möchten, und bearbeiten Sie ihn in Elementor. Wählen Sie ein beliebiges Element aus, eine Schaltfläche funktioniert gut und öffnen Sie es Fortgeschritten Tab. Finden Sie die CSS-ID Feld und geben Sie den gleichen Namen ein, aber Ohne das # - Schild Diesmal also sale-popup.
Dieser Unterschied bringt die Leute auf den Punkt: Open By Selector verwendet das Popup #sale-popup, während die CSS-ID des Elements verwendet wird sale-popup. Die # Teil der Selektorsyntax ist, nicht Teil der ID.
Schritt 3: Vorschau und Klicken #
Seite aktualisieren, dann Vorschau auf dem Frontend sehen Sie Ihren Button (hier mit der Bezeichnung “Klick zum Öffnen von Popup”) im Layout sitzen, noch kein Popup in Sicht.
Klicken Sie auf die Schaltfläche, und das Popup öffnet sich sofort Derselbe Auslöser funktioniert auf so viele Elemente, wie Sie möchten, geben Sie einfach jedem die gleiche CSS-ID.
Fehlerbehebung #
- Bei Klick passiert nichts? Stellen Sie sicher, dass die IDs übereinstimmen:
#sale-popupIm Open By Selector des Popups undsale-popup(keine #) in der CSS-ID des Elements. - Popup nicht aktiv? Überprüfen Sie, ob das Popup Aktivierung Ein ist und zu seinen Anzeigebedingungen gehört die Seite mit dem Button.
- Die # im CSS-ID-Feld benutzt? Entfernen Sie es. Die Elementor-CSS-ID verwendet nur den einfachen Namen.
Häufig gestellte Fragen #
Wie öffne ich ein Master Addons Popup auf Klick?
Stellen Sie im MA Popup Settings-Panel Popup auf Auf Klicken öffnen und geben Sie im Feld Open By Selector eine CSS-ID wie #sale-popup ein. Fügen Sie dann dieselbe ID ohne # zum CSS-ID-Feld eines Elements im Reiter Erweitert von Elementor hinzu.
Warum füge ich die # an der einen Stelle hinzu, die andere jedoch nicht?
Das Feld Open By Selector erwartet einen CSS-Selektor, und # markiert einen ID-Selektor Das Feld Elementor CSS ID erwartet nur den ID-Namen Sie verwenden also #sale-popup im Popup und sale-popup auf dem Element.
Kann ich das Popup von mehr als einer Taste auslösen?
Ja. Geben Sie jedem Button oder Element die gleiche CSS-ID, dann öffnet jedes das gleiche Popup auf Klick Sie können Buttons, Links und andere Elemente mischen.
Kann ich ein Popup von einem Textlink statt von einem Button öffnen?
Ja. Jedes Element mit der passenden CSS-ID funktioniert, einschließlich eines Links, eines Bildes oder eines Symbols. Fügen Sie die ID in der Registerkarte Erweitert dieses Elements hinzu und sie wird zum Auslöser.
Benötige ich Elementor Pro für ein On-Click-Popup?
Nr. Der Master Addons Popup Builder arbeitet mit der kostenlosen Version von Elementor, so dass der On Click Trigger und die CSS ID Methode ohne Elementor Pro funktionieren Der On Click Trigger selbst benötigt Master Addons Pro, da das kostenlose Plugin jedes Popup auf Seiten laden öffnet.
