今回はClickFunnelsで大きめのアイコンを入れる方法を説明します。アイコンを入れるとセールスページがすごく映えるので追加していきましょう。
今回お届けするノウハウはこちら
Step1. 「ICON」を挿入する
「ADD NEW ELEMENT」をクリックし、「ICON」をセレクトして設定していきます。
Step2. SETTINGSタブを設定する
- TOP MARGIN：エレメントの上の余白を調整することができます。
- ALIGN：表示エリアに対して左寄せなのか中央なのか右寄せなのかを選択できます。
- URL / ACTION：クリックしたときに飛ばすURLを指定できます。また、ここにカーソルを合わせてクリックすると「#open-popup」や「#submit-form」、「#yes-link」や「#no-link」などのショートコードが出てきます。他にも「#scroll-Section」でページ内のSectionに飛ばすという動作も指定できるので、必要に応じて設定してみてください。
- URL TARGET：同じタブやウィンドウで開く「Normal」か、新しいタブやウィンドウで開く「New Tab/Window」のどちらかを選択できます。
- FONT SIZE：フォントサイズではなく、実際はアイコンのサイズです。「72」がスライダーのマックスですが、「200」などと手動で入力してこのマックス値を超えた設定ができます。
- ICON COLOR：カラーを選択できます。
Step3. THEMESタブを設定する
次はTHEMESタブです。これはClickFunnelsがあらかじめプリセットのような感じでデザインを用意してくれていて、デザイン要らずで画像を用意しなくてもアイコンの周りに装飾を付けてくれるので、使い勝手がいいと思います。これをクリックすると「FONT SIZE」で設定してあるアイコンのサイズがプリセットに合わせて変わってしまうので、大きくしたい場合はプリセットを選んでから大きくしてください。
Step4. ADVANCEDタブを設定する
ADVANCEDタブが一番大事な「ICON PICKER」の設定です。アイコンの種類を選ぶのですが、たくさんの種類があります。英語のフィルター機能もあるので、例えばチェックマークが欲しい場合は「check」と入力することでチェックマークっぽいアイコンがたくさん出てきます。「video」や「cart」など、いろいろと試してみてください。
次はANIMATIONタブです。これは表示のディレイを設定でき、上のほうは1秒以上の大きなディレイ、下のほうはJavaScriptでいうLazy Loadingのような感じのミリセカンド単位のディレイです。
上の「TIMED DELAY」は1秒以上のディレイでしたね。どういうスタイルでディレイを表示するかが選択できるので、これもいろいろ試してください。ディレイの時間も設定することができるのですが、これはウェビナーなどの途中でセールスが始まったときに決済ボタンやエレメントを表示したい場合によく使います。
例えば60分のウェビナーに対して30分15秒などと指定して表示することができます。これはウェビナーのボタンをクリックして再生を開始してからではなくて、ページの読み込みが終わった後から起算する時間なので、そこは間違いがないように設定してみてください。
「ANIMATION」のほうはミリセカンド単位のもので、「On Page Load」と「On Page Scroll (becomes visible)」の2種類があります。「On Page Load」はページの読み込みから起算してディレイを表示してくれるというものです。「STYLE」もいろいろな種類があるのでいろいろ試してみてください。「DELAY (MS)」はデフォルトで500ミリセカンドになっているのですが、これも変更できます。
「On Page Scroll (becomes visible)」は長いセールスページなどをスクロールしてこのアイコンの場所に来たときから起算して、指定したミリセカンドで効果を出すことができるものです。これも同じくスタイルやディレイの時間を選ぶことができます。
こういうアイコンはアクセントになるので大きくして使ってもいいですし、いろいろと使い勝手がいいと思うので試してみてください。今回は以上です。
