今回はClickFunnelsのページにポップアップを付けていきます。
今回お届けするノウハウはこちら
Step1. エディットページで中に入る
- エディットページで中に入る
まずはFunnelに入ります。だいたいポップアップを付けるのはオプトインページだったりするので、エディットページで中に入ります。最初は何も作っていないので、エディットで作り込んでいきます。「POP UP」から「EDIT SETTINGS」をクリックするとまっさらな状態でポップアップが出てきます。
Step2. エレメントを追加する
- エレメントを追加する
まずはエレメントを追加していきます。「ADD NEW ROW」をクリックして「1 COLUMN」を選択します。エレメントですが、まずは入力フィールドを作りたいので「INPUT」と「BUTTON」をクリックします。
Step3. 「SETTINGS」で設定を変える
- 「SETTINGS」で設定を変える
ポップアップができたらエディットの「SETTINGS」で設定を変えることができます。
- TOP MARGIN：画面でどの位置にマージンを出すかを設定できます。
- BG IMAGE：アップロード画像を選択できます。デフォルトでも何種類かあるので今回はオレンジを選択して「ADD IMAGE」をクリックします。
- IMAGE POSITION: ：繰り返しやパララックスなど様々な設定ができます。
- TRIGGER ON EXIT: ：ユーザーがそのページを離脱しようとしたときに表示するか、離脱しようとしたときには表示しないかを選択できるオプションです。「ADVANCED」の「ANIMATION」の設定で何秒後に出すかも設定できるので、もし離脱時に表示しない場合はそういう設定もできます。
- MODAL WIDTH：ポップアップの大きさを選択できます。「Medium」ぐらいでいいと思います。
- BACKDROP：背景部分の色です。透明度を出して本文が見えるようにもできます。
- BG COLER：先ほどの「BG IMAGE」のような感じで色を付けることができます。
- TEXT COLOR：テキストを入れた場合のテキストカラーを設定できます。
- PADDING：余白を設定することができます。
Step4. ADVANCED設定
ADVANCED設定のうち、まず「STYLES」の設定を紹介します。
- CORNER RADIUS ：角丸の半径を設定できます。半径を大きくすれば角がどんどん丸くなっていきます。
- EDGES：トップとボトムのどちらかだけ角丸にするか、四隅全部を角丸にするかを選択できます。
- BORDER：トップとボトムのどちらかだけ枠線をつけるか、四隅全部につけるかを選択できます。STYLE もいろいろ選べますし、SIZE で太さも選べます。
- DROP SHADOW：外側にドロップシャドウを出すことができます。
Step.5 ANIMATIONの設定
- ANIMATIONの設定
次はADVANCED設定の「ANIMATION」の設定です。
「TIMED DELAY」の「Fade In」で何秒か後に出したり、「Fade In With Scale」で拡大しながらフェードインしたりすることができます。
あとはページがロードされてから何秒で表示されるか、スクロールしてどれぐらいで表示されるかが選択できます。ポップアップに関しては以上です。
