Wie man das Bloom-Opt-In-Formular öffnet, wenn man auf eine Schaltfläche klickt

Opt-in-Formulare sind heute aus dem Internet nicht mehr wegzudenken. Wir verwenden sie auf unserer Website insbesondere aus zwei Hauptgründen; Abonnenten gewinnen oder Leads generieren.

Den richtigen Weg zu finden, um Ihr Publikum mit Opt-in-Formularen anzusprechen, kann eine echte Herausforderung sein. Einige Leute möchten auf Nummer sicher gehen und ihren Besuchern nicht das Gefühl geben, dass sie mit unerwünschten Anmeldeformularen in ihre Internetblase "eindringen". Das ist normalerweise der Moment, in dem sich die Leute für ein Opt-in-Formular entscheiden, das erscheint, nachdem sie auf eine bestimmte Stelle auf der Website geklickt haben, oder wie wir es nennen; 'Bei Klick auslösen'.

Im heutigen Tutorial zeigen wir Ihnen, wie Sie diese Klick-Trigger in einigen der wichtigsten Bereiche Ihrer Website genau einsetzen können. Wenn Sie es geschafft haben, die Click-on-Trigger-Option einzubinden, vergessen Sie nicht, die Ergebnisse zu messen, die Ihnen dabei helfen, Fortschritte zu erzielen.

Wann Sie ein Opt-In-Formular nach einem Klick verwenden sollten

Sie können grundsätzlich alles auf Ihrer Website veranlassen, ein Opt-In-Formular auszulösen. Aber die Verwendung an den falschen Stellen kann sich schnell gegen Sie wenden. Die Leute sind es gewohnt, ständig zufällig auf eine Website zu klicken; wenn sie zum Beispiel etwas lesen. Oder auch nur, wenn sie sich umschauen, klicken sie oft zwecklos irgendwo auf die Website.

Stellen Sie sich nun vor, Sie wären der Besucher; Bei jedem zufälligen Klick werden Sie möglicherweise mit einem unerwarteten Anmeldeformular konfrontiert, das auf eine zwecklose Aktion zurückzuführen ist. Das wird zweifellos einen schlechten Effekt haben, da Sie im richtigen Moment das Gefühl haben, keine Kontrolle zu haben, wenn Sie diese Website besuchen.

Das Platzieren eines Klick-Trigger-Opt-In-Formulars an Orten, an denen Menschen freiwillig klicken oder nicht klicken (wie Schaltflächen oder Handlungsaufforderungen im Allgemeinen), ist jedoch eine andere Geschichte. Wir sind mit dem Klicken auf einen CTA (Call to Action) vertraut, damit wir keine Angst haben. Wir entscheiden uns bewusst für den nächsten Schritt. Wenn wir nicht neugierig sind, was sich hinter einem CTA verbirgt, klicken wir einfach nicht. Aber wenn wir wollen, können wir. Diese 'Wahl' haben Besucher, die sich leichter fühlen, wenn ein Opt-In-Formular erscheint, und erhöht die Chancen, dass sie sich tatsächlich für Ihren Newsletter anmelden.

Wie man das Bloom-Opt-In-Formular öffnet, wenn man auf eine Schaltfläche klickt

Abonnieren Sie unseren Youtube-Kanal

Erstellen Sie Ihr Opt-In-Formular

Menschen dazu zu bringen, auf Ihren CTA zu klicken, ist eine Kunstform. Menschen dazu zu bringen, sich zu abonnieren oder ein Lead durch ein Opt-in-Formular zu werden, nachdem sie auf Ihren CTA geklickt haben, ist die Wertschätzung von Kunst. Sie müssen experimentieren und die richtige Ansprache Ihrer Zielgruppe finden, damit am Ende beide Seiten zufrieden sind.

Wir zeigen Ihnen, wie Sie einen Klick-Trigger für zwei verschiedene Schaltflächen auf Ihrer Website erstellen, wo Sie von dieser Art von Opt-in-Formular profitieren können. das Schaltflächenmodul und die Kopfzeilenschaltfläche mit voller Breite. Die Arbeitsweise ist dieselbe, aber wenn Sie sie in verschiedenen Szenarien sehen, können Sie die Logik besser verstehen. Danach können Sie es auch für andere Module verwenden.

Bevor wir Ihnen nun zeigen, wie Sie die Opt-in-Formulare mit einem CTA verknüpfen, gehen wir die Einstellungen eines Opt-in-Formulars durch. In diesem Beitrag stellen wir Ihnen keine konkreten Designs vor, sondern nur die Logik. Es gibt einige Einstellungen, die erforderlich sind, um sicherzustellen, dass der Klick-Trigger funktioniert.

Wählen Sie die Art des Opt-In-Formulars

Wenn Sie ein neues Opt-in-Formular hinzufügen, werden Sie als erstes mit der Art des Opt-in-Formulars konfrontiert, das Sie verwenden möchten. Um den Trigger-bei-Klick-Effekt zu erstellen, können Sie zwei der Typen verwenden: das Pop-up und das Einfliegen. Am wahrscheinlichsten wählen Sie das Pop-up. Wer es aber etwas dezenter haben möchte, kann auch den Fly-In verwenden.

Registerkarte „Einrichtung“

Benennen Sie zunächst Ihr Opt-in-Formular auf der Registerkarte Setup des von Ihnen erstellten Opt-in-Formulars. Verbinden Sie als Nächstes Ihr Formular mit einem E-Mail-Anbieter. Ohne E-Mail-Anbieter, Konto und E-Mail-Liste ist das Formular inaktiv.

Registerkarte „Design“

Auf der Registerkarte Entwurf können Sie das Formular, das Sie verwenden möchten, formatieren. In diesem Beitrag werden wir das nicht tun. Wir werden ein Standard-Opt-In-Formular ohne Änderungen auswählen, nur um zu sehen, ob es funktioniert. Sie können später jederzeit zu dem von Ihnen erstellten Opt-In-Formular zurückkehren, um Änderungen vorzunehmen.

Registerkarte Anzeigeeinstellungen

Dies ist die Registerkarte, auf der wir das Opt-in-Formular mit einer der Schaltflächen verknüpfen. Um sicherzustellen, dass die Ergebnisse funktionieren, müssen Sie sicherstellen, dass das Opt-In-Formular auf der Seite angezeigt werden darf, auf der es funktionieren soll. Wenn Sie auf der gesamten Website dasselbe Formular verwenden, können Sie das Formular ganz einfach für alles aktivieren, wie in der Abbildung unten gezeigt.

Darüber hinaus möchten wir das Opt-in-Formular nur für Trigger auf Klick verwenden. Aus diesem Grund werden wir alle anderen Optionen deaktivieren und nur die Option "Trigger on Click" aktivieren. Sie werden sehen, dass das Feld CSS-Auswahl sofort angezeigt wird. Später in diesem Beitrag werden wir dieses Feld verwenden, um unsere Schaltflächen mit dem von uns erstellten Opt-in-Formular zu verknüpfen. Lassen Sie diese Seite in Ihrem Tab geöffnet, damit Sie später sofort darauf zugreifen können.

Lass uns anfangen

Obwohl die Logik hinter dem Hinzufügen eines Klick-Trigger-Opt-in-Formulars in verschiedenen Modulen dieselbe ist, werden wir sie in zwei Beispielen erläutern. das Schaltflächenmodul und die Kopfzeilenschaltfläche mit voller Breite. Ohne die Logik zu verstehen, können Sie einfach die Schritte in diesem Beitrag befolgen, um dies zu erreichen.

Wenn Sie jedoch möchten, dass der Klick-Trigger an anderen Stellen als den unten erläuterten funktioniert, müssen Sie eine geringfügige Änderung vornehmen. Das einzige, was sich ändern wird, ist die Klasse, die wir verwenden, da sich diese immer unterscheidet. Wenn Sie diesen Klick-Trigger für einen anderen Teil Ihrer Website ausführen möchten, führen Sie einfach die gleichen Schritte aus, die wir unten zeigen, und ändern Sie die CSS-Klasse entsprechend Ihrer Verwendung.

Button-Modul mit Pop-Up-Opt-In-Formular verbinden

Das erste Beispiel, durch das wir Sie führen werden, ist das Schaltflächenmodul. Das Schöne am Erstellen eines Klick-Triggers für ein Button-Modul ist, dass die Möglichkeiten endlos sind. Sie können jede Art von Abschnitt oder Zeile erstellen, die ein Schaltflächenmodul enthält, und so kreativ werden, wie Sie möchten.

Beginnen wir ohne weitere Fälligkeit mit der Erstellung eines Klick-Triggers für die Schaltfläche. Wir haben zwei Möglichkeiten, dies zu tun; indem Sie die CSS-Klasse verwenden oder eine dem Modul zugewiesene CSS-ID erstellen.

Durch Verwendung der CSS-Klasse

Öffnen Sie die Seite oder erstellen Sie die Seite, auf der der Klick-Trigger funktionieren soll. Fügen Sie als Nächstes ein Schaltflächenmodul hinzu oder öffnen Sie die Schaltflächenmoduleinstellungen der Schaltfläche, an der es arbeiten soll.

Gehen Sie zur Registerkarte Erweitert und scrollen Sie nach unten. Klicken Sie in das Feld Hauptelement und sehen Sie zu, wie die der Schaltfläche zugewiesene CSS-Klasse angezeigt wird. Kopieren Sie die CSS-Klasse, wir brauchen sie sofort.

Wechseln Sie dann zur Registerkarte Anzeigeeinstellungen des von Ihnen erstellten Anmeldeformulars. Im vorherigen Teil haben wir Ihnen bereits gezeigt, wo die Magie passieren wird. Wir haben 'Trigger On Click' aktiviert und alle anderen erwähnten Möglichkeiten deaktiviert. Direkt unter "Trick On Click" müssen Sie die folgende Zeile einfügen:

*.et_pb_button_0.et_pb_button.et_pb_module

Wie Sie sehen können, ist es einfach nur ein '*'-Symbol, gefolgt von der Klasse, die Sie direkt vor diesem Schritt kopiert haben.

Bei dieser Methode müssen Sie eines beachten; Die CSS-Klasse der Schaltfläche unterscheidet sich für jede Schaltfläche auf derselben Seite, aber sobald Sie eine Schaltfläche zu einer anderen Seite hinzufügen, beginnt sie sofort bei '0'. Das bedeutet, dass jedes erste Button-Modul auf jeder Seite das Opt-In-Formular auslöst, wenn Ihr Opt-In-Formular für alle Seiten und Beiträge verfügbar ist.

Wenn Sie dies vermeiden möchten, können Sie den Klick-Trigger über eine CSS-ID ausführen lassen. In Fällen, in denen Sie dem gesamten Modul jedoch eine bestimmte CSS-ID zuweisen, ist dies am einfachsten über die CSS-Klasse.

Sie können in den Anzeigeeinstellungen Ihres Opt-in-Formulars festlegen, auf welchen Seiten ein bestimmtes Opt-in-Formular angezeigt werden kann. Auf diese Weise haben Sie die Kontrolle und wissen genau, auf welchen Seiten das Opt-In-Formular erscheint, nachdem Sie auf die ihm zugewiesene Schaltfläche geklickt haben.

Durch Verwendung der CSS-ID

Die zweite Methode ist die Verwendung einer CSS-ID. Öffnen Sie das Button-Modul, gehen Sie zum Reiter Erweitert und geben Sie ihm eine CSS-ID. In diesem Fall verwenden wir "Popup".

Fahren Sie fort, indem Sie zur Registerkarte Inhalt des Schaltflächenmoduls gehen und das Symbol "#" eingeben, gefolgt von allem, was Sie möchten. Auf diese Weise stellen Sie sicher, dass der Besucher beim Klicken auf die Schaltfläche an derselben Stelle auf der Seite bleibt.

Gehen Sie weiter zu Ihren Opt-in-Formulareinstellungen und fügen Sie "a#popup" zum Feld Trigger On Click hinzu. Sie sollten immer „a#“ gefolgt von der CSS-ID schreiben, die Sie dem Button-Modul zugewiesen haben.

a#popup

Verbinden Sie Header-Schaltflächen in voller Breite mit dem Opt-In-Formular

Das andere Beispiel, in dem wir Ihnen zeigen, wie Sie ein Opt-in-Formular für Trigger On Click ausführen, ist die Header-Schaltfläche mit voller Breite. Die einzige Möglichkeit, die wir hier haben, ist die Verwendung der CSS-Klasse des Buttons. Insbesondere der Schaltfläche können wir über den Divi-Builder keine CSS-ID zuweisen.

Durch Verwendung der CSS-Klasse

Erstellen Sie einen Header mit voller Breite oder öffnen Sie den Header mit voller Breite, in dem Sie das Opt-in-Formular für Trigger On Click hinzufügen möchten. Gehen Sie zur Registerkarte "Erweitert" des Headers "Fullwidth" und scrollen Sie nach unten, bis Sie auf "Button One" stoßen. Klicken Sie auf das Feld und kopieren Sie die der Schaltfläche zugeordnete CSS-Klasse.

Gehen Sie dann zur Registerkarte Inhalt und geben Sie das Symbol "#" gefolgt von etwas anderem in das URL-Feld von Schaltfläche Nr. 1 ein.

Gehen Sie schließlich zur Registerkarte Anzeigeeinstellungen Ihres Opt-In und geben Sie das Symbol "*" gefolgt von der Klasse ein, die Sie der Schaltfläche zugewiesen haben.

*.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button

Abschließende Gedanken

Dieses Tutorial soll Ihnen bei den ersten Schritten mit Triggern beim Klicken und dem Bloom-Opt-in-Formular helfen. Es könnte Sie sogar dazu bringen, die Art und Weise zu überdenken, wie Sie derzeit versuchen, Abonnenten oder Leads zu gewinnen. Wenn Sie Fragen oder Anregungen haben; Hinterlasse gerne einen Kommentar im Kommentarbereich unten. Und während Sie dort sind; Teilen Sie uns mit, in welchen Fällen Sie das Opt-in-Formular für Trigger On Click verwenden würden.

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!

Ausgewähltes Bild von BarsRsind / shutterstock.com