今回はClickFunnelsでプログレスバーを挿入していきます。
Step1. プログレスバーを挿入する
「ADD NEW ELEMENT」をクリックし、「PROGRESS BAR」を挿入していろいろ設定していきます。
- TOP MARGIN：エレメントの上の余白の設定で、これはほとんどのエレメントで共通しています。
- PERCENT：文字の設定です。「PERCENT」と書いてあるのですが、だいたいは文字を入れています。例えば「申し込みはまだ完了していません！」という感じの文字を入れるとすごく効果的だと思います。
- FONT FAMILY：フォントを選択できます。
- BG COLOR：ハイライトされている部分の背景の色を変更できます。
Step2. THEMESタブを設定する
THEMESタブにはプリセットされたデザインがあります。「Animated Stripes」は動きがあっていいと思います。
Step3. ADVANCEDタブを設定する
次はADVANCEDタブです。
STYLESタブから見ていきましょう。
- PERCENT WIDTH：色が付いている部分の長さを変更できます。「90 Percent」にしてもいいですし、「33 Percent」にしてもいいと思います。
- SIZES：文字の太さと大きさを変更できます。
- TEXT SHADOW：テキストのシャドウを変更できます。
- TEXT STYLE：文字を太文字にしたりイタリックにしたりできます。
- ALIGNMENT：テキストの場所を「Center」「Left」「Right」と変更できます。
- OFFSET COLOR：これも設定したほうがいいです。通常は「White」になっています。今は背景が少し白っぽいので「Transparent White」にしても分かりにくいです。私は「Transparent Black」がいいと思います。
- SHADOW：「TEXT SHADOW」はテキストのシャドウに関しての設定でしたが、これはプログレスバー自体のシャドウのことです。
- CORNERS：角を丸くするもので、数値が大きいほど角が丸くなります。
- BORDER：プログレスバーの周りのボーダーを設定することができます。
ANIMATIONタブはほとんどのエレメントで共通しているのですが、画面をロードしてから少し遅らせてエレメントを表示させたいときに使います。上は長い時間のディレイに使い、下は短い時間のディレイに使うというふうに使い分けます。
「TIMED DELAY」は長い時間のほうで、「Fade In」などの効果が選べます。だいたいはオートウェビナーなどで使うのですが、1時間のウェビナーで30分たってからセールスをしたいという場合は「MINUTES」を「30」に設定します。これはボタンなどを後から表示したいときにも使えます。
「ANIMATION」の「TYPE」は2種類あり、JavaScriptでいうLazy Loadingのような感じです。「On Page Load」はページがロードされてから指定したミリセカンドで選択した効果を出すことができます。「On Page Scroll (becomes visible)」はスクロールしていってエレメントの場所まで来たときから起算して500ミリセカンドをカウントするというものです。
プログレスバーはすごく使い勝手がいいので、アップセルページなどで使ってみてください。今回は以上です。