PopUp mit JetPopup aus Crocoblock und Elementor erstellen

Hallo Leute,

In diesem Video werden wir sehen, wie wir können Erstellen Sie ein Popup mit Elementor und dem Premium-JetPopup-Plugin von Crocoblock für Ihre Webseite.

In diesem anderen Artikel erkläre ich es So erstellen Sie ein Popup mit Elementor Pro.

Jetpopup ist ein Zahlungs-Plugin, das Sie können für 22 $ separat kaufen:

oder wenn Sie auf die Crocoblock-Mitgliedschaft zugreifen, haben Sie alles für 130 US-Dollar.

Ich liebe die Philosophie von Crocoblock, denn anstatt ein riesiges und schweres Plugin zu erstellen, teilt es die Funktionalitäten in kleine Plugins auf und jedes von ihnen erstellt ein separates Plugin. Es scheint mir sehr richtig zu sein.

Sobald das Plugin installiert ist, erscheint ein neues Element namens JetPopup im WordPress-Menü.

In meinem Fall habe ich die Plugins JetPopup, JetEngine und JetElementos For Elementor installiert.

Wenn wir zu JetPopup -> PresetLibrary finden wir eine riesige Bibliothek vordefinierter Popups:

Wie wir im vorherigen Bild sehen, können wir dank der vorhandenen Filter das Popup finden, das unseren Anforderungen am besten entspricht.

Darüber hinaus teilt es uns in jedem Popup mit, welche Plugins es für seinen Betrieb benötigen würde. In dem im Bild wäre es das Jet Elements Plugin.

Installieren Sie eine Popup-Vorlage

Es gibt kein Geheimnis, wir klicken in der Vorlage, die uns gefällt, auf Installieren.

Nach der Installation gelangen wir zu einer Elementor-Seite mit der hinzugefügten Vorlage

Jetzt können wir Elemente hinzufügen, ändern und entfernen, genau wie auf jeder Seite mit Elementor.

Popup-Einstellungen

Die eigenen Optionen des Popups, wie Eintritts- oder Austrittseffekte und wann das Popup angezeigt werden soll, haben wir in den Einstellungen unten links:

Und wenn wir klicken, finden wir all diese Optionen:

Animation: Dies ist der Effekt, den das Popup beim Betreten haben wird

Offene Veranstaltung: Wenn das Popup erscheinen soll

Wir können das Popup nach x Sekunden nach dem Laden der Seite, nach einer Zeit der Inaktivität, beim Scrollen der Seite um %, beim Verlassen der Seite, einem bestimmten Datum, einer bestimmten Uhrzeit und beim Klicken auf ein Element des Webs erscheinen lassen.

Anzeigebedingungen Hier geben wir an, wo im Web es erscheinen soll:

Wir können Ihnen mitteilen, auf welchen Seiten wir es einschließen oder von welchen Seiten wir es ausschließen möchten.

Sobald unser Popup veröffentlicht ist, erscheint es auf unserer Website 😉

Lassen Sie das Popup springen, wenn Sie auf einen Link klicken

Eine Option, die mir besonders gefällt, ist das Einblenden eines Popups, wenn auf einen Link oder eine Schaltfläche geklickt wird.

Mir gefällt besonders, dass wir mit einem Popup einen Link innerhalb einer Seite springen lassen können, der nicht mit Popup erstellt werden muss. Ich mag das sehr gerne.

Bezeichner zur Schaltfläche hinzufügen

Als erstes müssen wir der Schaltfläche, die wir als Popup-Auslöser verwenden möchten, eine ID oder Klasse hinzufügen:

Nachdem wir nun die Kennung der Schaltfläche haben, kehren wir zu dem Popup zurück, das wir erstellen.

Wenn Sie sich erinnern, haben wir oben gesehen, dass eines der Ereignisse, die wir zum Auslösen des Popups auswählen können, ist Benutzerdefinierte Auswahl Klicken Sie auf

Wenn alles gut gelaufen ist, springt das Popup jetzt, wenn jemand auf die Schaltfläche klickt, die wir konfiguriert haben.

Senden Sie Leads mit Webhooks an unser E-Mail-Marketing-Tool

JetPopup hat eine direkte Integration mit Mailchimp. Die Integration erfolgt über den API Key schnell und einfach.

Im Crocoblock-Menü -> JetPlugins-Einstellungen -> Integrationen können wir es verbinden:

Aber wie würden wir es mit einem anderen Tool machen, das nicht Mailchimp ist?

Wir würden uns bedanken Webhooks.

Ich liebe Webhooks, weil sie es uns ermöglichen, Tools zu verbinden, auch wenn es keine direkte Integration mit ihnen gibt.

In meinem Beispiel werde ich es mit integrieren Aufladen, aber es würde mit jedem Tool, das Webhooks akzeptiert, ähnlich verfahren.

JetEngine ermöglicht es uns, Formulare zu erstellen und auch hinzuzufügen Webhaken also genau das, was wir brauchen 😉

Sobald JetEngine installiert ist, können wir Formulare finden:

In meinem Fall erstellen wir ein Formular mit den Feldern, die wir benötigen

In dem Teil des Feldeinstellungen Wir fügen die Felder hinzu, die wir in unserem Formular benötigen.

Der wichtige Teil, wo die Magie passiert, ist drin Post-Submit-Aktionen/Benachrichtigungseinstellungen, das heißt, was passiert, nachdem das Formular ausgefüllt wurde.

Wir müssen anklicken Benachrichtigung hinzufügen und fügen Sie eine Benachrichtigung des Typs hinzu Anruf bei Webhook

Woher bekommen wir die Webhook-URL?

Wir müssen diese Informationen von dem Tool erhalten, das wir verbinden möchten, in unserem Fall möchten wir die Interessenten an Encharge senden.

Innerhalb von Encharge, wenn wir eine Flow und füge ein Formular hinzu. Wir finden die URL des Webhook, den wir in JetEngine hinzufügen müssen:

Sobald das Formular konfiguriert ist, müssen wir es nur noch zu unserem JetPopup-Popup hinzufügen:

Wir haben unser Popup gespeichert und jetzt wird jedes Mal, wenn jemand seine Daten hinzufügt, dank Webhooks direkt zu Encharge weitergeleitet.

Sag mir nicht, es ist nicht wunderbar? 😉

Wir sehen uns im nächsten Tutorial