ボタンをクリックしたときにブルームオプトインフォームをポップアップさせる方法

今日、オプトインフォームなしでインターネットを想像するのは難しいです。 特に2つの主な理由で当社のウェブサイトでそれらを使用しています。 サブスクライバーの獲得またはリードの生成。

オプトインフォームを使用してオーディエンスにアプローチする正しい方法を見つけることは、実際の課題になる可能性があります。 安全にプレイしたい人もいれば、訪問者に不要なオプトインフォームでインターネットバブルに「侵入」しているように感じさせたくない人もいます。 これは通常、ウェブサイトの特定の場所をクリックした後に表示されるオプトインフォーム、またはその呼び方を選択する瞬間です。 「クリック時にトリガー」。

今日のチュートリアルでは、Webサイトの最も重要な部分のいくつかでこれらのクリックトリガーをどのように正確に利用できるかを示します。 クリックトリガーオプションを含めることができたら、それがもたらす結果を測定して、それが進歩を遂げるのに役立つかどうかを確認することを忘れないでください。

クリック後にオプトインフォームを使用するタイミング

あなたは基本的にあなたのウェブサイト上の何でもオプトインフォームをトリガーさせることができます。 しかし、間違った場所でそれを使用すると、すぐにあなたに背を向けることができます。 人々はいつもウェブサイトをランダムにクリックすることに慣れています。 たとえば、彼らが何かを読んでいるとき。 または、見回しているときでも、目的のないWebサイトのどこかをクリックすることがよくあります。

今、あなたが訪問者であると想像してください。 ランダムにクリックするたびに、意図せずに実行したアクションが原因で、予期しないオプトインフォームが表示される場合があります。 それは間違いなく悪い影響を与えるでしょう。なぜなら、その適切な瞬間に、あなたがそのウェブサイトにアクセスしているとき、あなたはまったくコントロールできないように感じるでしょう。

ただし、クリックトリガーオプトインフォームを、人々が自発的にクリックするかクリックしないかを選択する場所（ボタンや一般的な行動の呼びかけなど）に配置することは別の話です。 私たちはCTA（召喚状）をクリックすることに慣れているので、怖がることはありません。 次のステップを確認することを意図的に選択しています。 CTAの背後にあるものを知りたくない場合は、クリックしないでください。 しかし、必要に応じてできます。 この「選択」訪問者は、オプトインフォームが最終的にポップアップしたときに、より安心してニュースレターに登録する可能性を高めます。

ボタンをクリックしたときにブルームオプトインフォームをポップアップさせる方法

私たちのYoutubeチャンネルを購読する

オプトインフォームを作成する

人々にあなたのCTAをクリックさせることは芸術の一形態です。 CTAをクリックした後、オプトインフォームを使用してユーザーに登録したり、リードになったりすることは、芸術への感謝です。 双方が最終的に満足するためには、実験してターゲットオーディエンスにアプローチする正しい方法を見つける必要があります。

この種のオプトインフォームを利用できる、Webサイト上の2つの異なるボタンのクリックトリガーを作成する方法を紹介します。 ボタンモジュールと全幅ヘッダーボタン。 作業方法は同じですが、さまざまなシナリオでそれを見ると、ロジックを理解するのに役立つ場合があります。 その後、他のモジュールにも使用できます。

ここで、オプトインフォームをCTAにリンクする方法を説明する前に、オプトインフォームの設定について説明します。 この投稿では、特定のデザインではなく、ロジックのみを提供します。 クリックトリガーが機能することを確認するために必要ないくつかの設定があります。

オプトインフォームの種類を選択してください

新しいオプトインフォームを追加するときに直面する最初の選択肢は、使用するオプトインフォームのタイプです。 クリック効果のトリガーを作成するには、ポップアップとフライインの2つのタイプを使用できます。最も選択する可能性が高いのはポップアップです。 ただし、もう少し微妙になりたい場合は、フライインを使用することもできます。

[設定]タブ

作成するオプトインフォームの[設定]タブでオプトインフォームに名前を付けることから始めます。 次に、フォームをメールプロバイダーに接続します。 電子メールプロバイダー、アカウント、および電子メールリストがないと、フォームは非アクティブになります。

[デザイン]タブ

[デザイン]タブでは、使用するフォームのスタイルを設定できます。 この投稿では、それを行うつもりはありません。 動作するかどうかを確認するために、変更を加えずに標準のオプトインフォームを選択します。 後で、いつでも作成したオプトインフォームに戻って変更を加えることができます。

[設定]タブを表示する

これは、オプトインフォームをボタンの1つにリンクするタブです。 結果が機能することを確認するには、オプトインフォームが機能するページに表示されることを許可されていることを確認する必要があります。 Webサイト全体で同じフォームを使用する場合は、下の画像に示すように、すべてのフォームを簡単に有効にできます。

さらに、クリックのみのトリガーにオプトインフォームを使用したいと思います。 そのため、他のすべてのオプションを無効にし、「クリック時にトリガー」のオプションのみを有効にします。 CSSセレクターフィールドがすぐに表示されます。 この投稿の後半で、このフィールドを使用して、作成しているオプトインフォームにボタンをリンクします。 このページをタブで開いたままにしておくと、後ですぐにアクセスできます。

始めましょう

異なるモジュールにクリックトリガーオプトインフォームを追加する背後にあるロジックは同じですが、2つの例で説明します。 ボタンモジュールと全幅ヘッダーボタン。ロジックを理解していなくても、この投稿の手順に従って実行できます。

ただし、以下で説明する以外の場所でクリックトリガーを機能させる場合は、わずかな変更を加える必要があります。 変更されるのは、使用しているクラスだけです。これは常に異なるためです。 このクリックトリガーをWebサイトの他の部分で発生させたい場合は、以下に示すのと同じ手順に従い、使用しているものに応じてCSSクラスを変更します。

ボタンモジュールを接続してオプトインフォームをポップアップする

最初に説明する例は、ボタンモジュールです。 ボタンモジュールのクリックトリガーを作成することの良いところは、可能性が無限にあることです。 ボタンモジュールを含む任意のタイプのセクションまたは行を作成して、必要に応じてクリエイティブにすることができます。

それ以上の期限なしで、ボタンのクリックトリガーの作成を始めましょう。 これを行うには2つの方法があります。 CSSクラスを使用するか、モジュールに割り当てられたCSSIDを作成します。

CSSクラスを使用する

ページを開くか、クリックトリガーを機能させるページを作成します。 次に、ボタンモジュールを追加するか、操作するボタンのボタンモジュール設定を開きます。

[詳細設定]タブに移動し、下にスクロールします。 Main Elementフィールドをクリックして、ボタンに割り当てられたCSSクラスが表示されるのを確認します。 CSSクラスをコピーします。すぐに必要になります。

次に、作成しているオプトインフォームの[表示設定]タブに移動します。 前のパートでは、魔法がどこで起こるかをすでに示しました。 「クリック時にトリガー」を有効にし、言及されている他のすべての可能性を無効にしました。 「TrickOnClick」のすぐ下に、次の行を貼り付ける必要があります。

*.et_pb_button_0.et_pb_button.et_pb_module

ご覧のとおり、これは単に「*」記号の後に、このステップの直前にコピーしたクラスが続くだけです。

この方法を使用する場合、注意しなければならないことが1つあります。 ボタンのCSSクラスは、同じページのボタンごとに異なりますが、ボタンを別のページに追加するとすぐに、「0」から始まります。 これは、オプトインフォームがすべてのページと投稿で利用できる場合、すべてのページのすべての最初のボタンモジュールがオプトインフォームをトリガーすることを意味します。

これを回避したい場合は、CSSIDを介してクリックトリガーを発生させるを使用できます。 ただし、特定のCSS IDをモジュール全体に割り当てる場合、それを実現する最も簡単な方法は、CSSクラスを使用することです。

特定のオプトインフォームを表示できるページを、オプトインフォームの表示設定で決定できます。 そうすることで、あなたはコントロールでき、割り当てられたボタンをクリックした後にオプトインフォームがどのページに表示されるかを正確に知ることができます。

CSSIDを使用する

2番目の方法は、CSSIDを使用することです。 ボタンモジュールを開き、[詳細設定]タブに移動して、CSSIDを指定します。 この場合、「ポップアップ」を使用します。

ボタンモジュールの[コンテンツ]タブに移動し、「＃」記号の後に必要なものを入力して続行します。 これを行うことにより、ボタンをクリックしている間、訪問者がページ上の同じ場所にとどまるようにします。

次に、オプトインフォームの設定に戻り、[クリック時のトリガー]フィールドに「a＃popup」を追加します。 常に「a＃」の後にボタンモジュールに割り当てたCSSIDを入力する必要があります。

a#popup

全幅ヘッダーボタンをオプトインフォームに接続する

クリック時にトリガーを選択するオプトインフォームを実行する方法を示すもう1つの例は、全幅ヘッダーボタンです。 ここでの唯一の可能性は、ボタンのCSSクラスを使用することです。 特に、Diviビルダーを介してCSSIDをボタンに割り当てることはできません。

CSSクラスを使用する

全幅ヘッダーを作成するか、トリガーオンクリックオプトインフォームを追加する全幅ヘッダーを開きます。 全幅ヘッダーの[詳細設定]タブに移動し、[ボタン1]が表示されるまで下にスクロールします。 フィールドをクリックして、ボタンに割り当てられたCSSクラスをコピーします。

次に、[コンテンツ]タブに移動し、ボタン＃1の[URL]フィールドに「＃」記号の後に他の記号を入力します。

最後に、オプトインの[表示設定]タブに移動し、「*」記号を入力してから、コピーしたクラスをボタンに割り当てます。

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

最終的な考え

このチュートリアルは、クリック時のトリガーとブルームオプトインフォームの使用を開始するのに役立ちます。 それはあなたが現在加入者やリードを獲得しようとしている方法を再考させるかもしれません。 質問や提案がある場合; 下のコメント欄にコメントを残してください。 そして、あなたがそこにいる間、 どのような場合にトリガーオンクリックオプトインフォームを使用するかを教えてください。

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

BarsRsind /shutterstock.comによる注目の画像