今回はClickFunnelsで画像つきリストを入れていきます。これは箇条書きのプレートの部分、ドットの部分に画像を入れられるというものです。
Step1. 画像つきリストを追加する
「ADD NEW ELEMENT」をクリックして「image list」で検索し、「IMAGE LIST」を選択します。デフォルトで付いている矢印がありますが、これをカスタマイズできます。普通の箇条書きのような感じで追加していくといいと思います。
Step2. SETTINGSタブを設定する
- TOP MARGIN：エレメントの上の余白を調整できます。
- ICON IMAGE：「32PX」と書いてありますが、当然32ピクセル以上の画像も入れられます。例えば「IconFinder」などを使って「check」で検索した画像を入れてみると、大きすぎて変な表示になると思います。気に入ったアイコンなどがあれば32ピクセルまで縮小してからアップロードして入れてみてください。
- BULLET SPACE：箇条書きの行間を調整できます。
- LEFT MARGIN：エレメントに対して左側の余白を調整できます。
- FONT FAMILY：フォントを変更できます。
- FONT SIZE：フォントのサイズを選択できます。
- MOBILE SIZE：モバイル版のフォントサイズのことです。デフォルトではデスクトップ版とモバイル版のフォントサイズは一緒になっているのですが、「EDIT MOBILE SIZE」をクリックするとリンクが外れるようになっています。例えばリンクを外した状態で「MOBILE SIZE」を小さく設定することもできます。これはモバイルのビューがあるので、ページが完成した後にそれを見ながら調整するのがいいと思います。デスクトップ版と連動するように戻す場合は左のボタンをクリックします。
- COLOR：文字の色を変更できます。アイコンの色に関しては「ICON IMAGE」で規定されてしまっているので変更できません。
- BOLD COLOR：太字部分の色だけを変更できます。
Step3. ADVANCEDタブを設定する
次はADVANCEDタブです。
- ICON SIZE：アイコンを表示するかどうかというものです。アイコンを表示しないというのも意味が分からないのですが、「Show Icon」で表示できます。
- BOTTOM BORDER」はそれぞれの行間にけい線を入れることができます。これもけっこう見やすくなるのでたまに使うといいと思います。
ANIMATIONタブは他のエレメントと同様です。「TIMED DELAY」はページの表示から起算してどのくらい遅らせてエレメントを表示するかというものです。「Fade In」と「Fade In With Scale」の2つがあり、これもどちらがいいのかを試してみてください。
どのくらい遅らせるかは「MINUTES」と「SECONDS」で指定できます。よく使うのは例えばウェビナーページを読み込んでから30分ぐらいのたったところでオファーを出したりするときです。ここはご自身のウェビナーの長さに合わせて調整してください。「分」と「秒」をそれぞれ指定することができます。
「ANIMATION」は上の「TIMED DELAY」と考え方が似ていますが、1秒よりも短いディレイのことを指しています。JavaScriptでいうLazy Loadingのような感じです。これは2種類選ぶことができます。「On Page Load」であればページのローディングから起算してディレイの表示を入れることができるのですが、「DELAY」の所に「MS」と書いてあるのでミリセカンドになっています。
- TIMED DELAY：1秒以上のディレイを指定できる
- ANIMATION：1秒に満たないような細かいディレイを指定できる
「STYLE」に関してもいろいろあるので試して使ってみてください。
「TYPE」には「On Page Scroll (becomes visible)」というものがあります。先ほどの「On Page Load」とは違い、ページをスクロールしてエレメントが表示されるであろう場所まで来たときから起算してディレイを表示するという感じになっています。今回は以上です。