(↑Pinterestでシェアお願いします!)

Bloomプラグインのクリックトリガーの使い方

執筆者 | 更新日 2020年02月07日 | Bloom | コメント0件

こんにちは、根本耕輔です。

BloomプラグインのPop upフォームもしくはFly inフォームで使えるクリックトリガー(正式には「Trigger On Click」)の使い方をご紹介していきます。

ちょっとややこしい部分もありますので、ゆっくり読み進めてみてください。

Step1. Pop upフォームかFly inフォームでクリックトリガーを設定する

BloomのPop upでクリックトリガーを設定する
まずは、Pop upフォームFly inフォームをすでに作成しているのを前提としてやっていきます。「DISPLAY SETTINGS」に行き、「LOAD-IN SETTINGDS」の項目にある「Trigger On Clicks」にチェックを入れます。すると、その下に「CSS Selector (string)」という欄が表示されますので、「.clicktrigger」と入力してみてください。ドットは必須ですが、「clicktrigger」という文言は、どんなものでも構いません。設定が完了したら、「SAVE & EXIT」をクリックします。

Step2. Diviで記事を作成する

DiviのテーマかDiviビルダープラグインで記事を作成する

クリックトリガーの設定が終わったら、Diviで記事を作成していきます。DiviのテーマでもDiviビルダープラグインでもどちらでも構いません。僕は、Diviのテーマを使っているので、「Diviビルダーを使う」という紫のボタンをクリックし、「ビジュアルビルダー」で設定していきます。記事の作り方は、「BUILD FROM SCRATCH」でも、「CHOOSE A PREMADE LAYOUT」でも、「CLONE EXISTING PAGE」でも構いません。好きなものを使ってみてください。

Step3. 記事にリンクトリガーを設定する

次に、記事にリンクトリガーの設定をしていきます。ボタンにリンクトリガーを設定する方法とテキストにリンクトリガーを設定する方法の2タイプをご紹介していきます。やり方が若干異なって、ややこしいので注意して設定してみてください。

ボタンにリンクトリガーを設定する方法

Bloomプラグインボタンでクリックトリガーを設定する方法

ボタンを使ってリンクトリガーを設定する場合は、ボタンのモジュールを追加します。ボタンのテキストは、好きな文言を入力しておいてください。あと、通常は「リンク」の「ボタン(URL)」の欄にURLを記入しますが、リンクトリガーを設定する場合は、入力する必要はありません。

「詳細」にタブを切り替えて、「CSSIDとクラス」を開きます。そしたら、「CSSID」と「CSSクラス」という2つの項目が表示されますが、「CSS」クラスの方にStep1で設定した「.clicktrigger」のドットを抜いた「clicktrigger」だけを入力します。設定が完了したら、「保存」して、「ビジュアルビルダーを終了」します。

そして、実際にボタンをクリックしてみてください。上のように、ボタンをクリックして、フォームが表示されたら成功です。もし、表示されない場合は、スペルが間違っていたり、記入する場所が「CSSクラス」ではなく、「CSSID」になっている可能性もあるのでチェックしてみてください。

テキストにリンクトリガーを設定する方法

テキストでクリックトリガーを設定する場合は、テキストのモジュールを追加します。そして、テキストの入力方法を「ビジュアル」から「テキスト」に切り替えます。

そして、上記のコードを入力します。「テキスト」の文言は、文章で表示される部分なので、適切な文言に変更しておきましょう。これで、完了です。

間違っても、ボタンの時と同じように「詳細」の「CSSIDとクラス」を開いて、「CSSクラス」に「clicktrigger」と記入しないようにしてください。そうすると、該当のテキストだけではなく、他のテキストの上でクリックしてもクリックトリガーが発動して、オプトインフォームが表示されています。

そしたら、ボタンの時と同じように、「保存」、「ビジュアルビルダーを終了」をクリックして、実際にクリックトリガーが発動するか確認してみましょう。

テキストには、リンクが埋まっていないので、指でクリックするようなカーソルは表示されませんが、クリックするとちゃんとフォームが表示されますので、安心してください。

KohsukeNemoto.comニュースレターに参加しませんか?

あなたがニュースレターに登録すると、、、

  • 週に1,2回程度のニュースレター
  • 有料販売している5コース(4,900円相当)
  • 新着有料コースの無料提供(不定期)

無料で受け取れます。右(スマホの方は下)のフォームにお名前とEメールアドレスを登録し、無料でニュースレターと特典をお受け取りください。

0コメント

コメントを提出

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Elementorの使い方を"無料"で学びませんか?