今回はClickFunnelsでポップアップ表示する画像を入れていきます。
今回お届けするノウハウはこちら
Step1. 「IMAGE POPUP」を挿入する
「ADD NEW ELEMENT」をクリックして「IMAGE POPUP」を選択します。サムネイル部分とクリックした後のフルサイズの画像を両方セットしていきます。
Step2. SETTINGSタブを設定する
- TOP MARGIN：エレメントの上の余白を調整できます。
- 「THUMBNAIL」と「FULL SIZE」：小さい画像をわざわざ作り直す必要はありません。両方ともURLは全く同じものが入っています。この場合はサムネイルの部分だけ「THUMBNAIL HEIGHT」を小さくして、クリックすると同じ画像が引き延ばされたような状態で出てくるように加工しています。「ADD IMAGE」をクリックして画像を追加します。「FULL SIZE」のほうも「ADD IMAGE」で同じ画像を追加します。これは別の画像でも構いません。クリックしたら別の画像が出てくるというのもありなので、クリックしたいような画像にしておいて、見てほしい画像を「FULL SIZE」のほうに入れるというやり方でもいいです。今回はサイズが大きいままやっていきます。
- ALT TEXT：画像が表示されないときにテキストで代替するという機能です。HTMLがわかる人はピンとくるのではないかと思います。
- 「THUMBNAIL WIDTH」と「THUMBNAIL HEIGHT」：先ほども説明したようにサムネイル部分の大きさを変えることができます。WIDTHと HEIGHTを指定することができるのですが、両方というよりは片方を指定するほうがいいと思います。片方だけを指定すると画像の縮尺の比率をうまく保ったままリサイズしてくれるので便利だと思います。
Step3. THEMESタブを設定する
テーマに関してはClickFunnelsが用意してくれているデザインをプリセットのような感じで使うことができます。枠付きのものやシャドウが付いただけのものなどがあります。
Step4. ADVANCEDタブを設定する
最初にSTYLEタブです。
- ALIGN：画像を右、左、中央と変えることができます。
- RADIUS：画像の枠に関する設定ができます。「Circle」にすると丸くなり、「Round Corners」にすると四角のままで角だけ丸くなります。
- SHADOW：画像の枠にドロップシャドウを付けることができます。
- OPACITY：画像の透明度を設定できます。サムネイルを透明にするのもいいと思います。下に行くほど透明度が上がって薄くなっていきます。
- GREY SCALE FX：画像をフルカラーで表示するのかモノクロで表示するのかを設定できます。いちいちモノクロの画像を用意しなくてもいいので重宝すると思います。
ANIMATIONタブではディレイを設定することができます。大きく上と下に分かれていて、上のほうは1秒以上の比較的大きなディレイを表示させることができ、下のほうはミリセカンド単位の細かいディレイを表示させることができます。
上のほうは「TIMED DELAY」で効果を選択できます。「Fade In」でいいと思います。例えば60分のウェビナーで30分15秒たってからピッチのところで画像を出したいという場合に使います。
逆にJavaScriptでいうLazy Loadingのような感じでミリセカンド単位で表示したいという場合は「ANIMATION」の「TYPE」で設定します。「On Page Load」と「On Page Scroll (becomes visible)」の2種類があり、「On Page Load」のほうは、ページの読み込みから起算して指定した効果で指定した時間後に表示させるという機能です。「On Page Scroll (becomes visible)」のほうは、例えば長いセールスページなどでこの画像がある所までスクロールしてきたときから起算して、指定した時間のディレイで表示させるという機能です。
画像をたくさん配置して、クリックして詳細やグラフを見てほしいという場合にけっこう使えると思うのでやってみてください。今回は以上です。
