今回はClickFunnelsでPricing Table（価格表）を追加していきます。
Step1. 価格表を追加する
価格表に関してはいくつかプランがあるときにその比較ができるような表になっていて、すごく便利なので紹介させてください。
「ADD NEW ELEMENT」をクリックして「Pricing」で検索すると「PRICING TABLE」が出てくるので、これを選択すると追加されます。
まずはプランの名前を一番上に入れるといいと思います。ここには通貨を入れられるのですが、キーボードで円マークを押しても出てきません。テキストエディタなどで円マークをコピーして貼り付けると普通に入るので、このような感じでやってみてください。あとは価格を設定して、その下に補足事項を入力します。最後に購入者が手に入れられるものをここに書いてあげるといいと思います。
Step2. SETTINGSタブを設定する
次はSETTINGSタブです。
- TOP MARGIN：エレメントの上の余白を調整できます。
- TOP TEXT COLOR：価格が書いてあるボックス内のテキストの色です。
- TOP BG COLOR：価格が書いてあるボックス内の背景色です。
Step3. ADVANCEDタブを設定する
次はADVANCEDタブです。
- BG COLOR STYLE：バックグラウンドのカラースタイルを変えるのですが、「Gradient」にしても変化がわからないので、あまり意味がない感じがします。この辺も機能の改良とともにもしかしたらご覧のときにはもう変わっているかもしれません。
- TEXT SHADOW：価格が書いてあるボックス内のテキストにかかるシャドウを変更できます。
- BORDER：周りの枠線の太さを指定できます。
- CORNERS：角の丸みを調整することができます。
- SHADOW：全体にシャドウがかかります。
次はANIMATIONタブです。「TIMED DELAY」はエレメントを遅れて表示させる機能です。「Fade In」または「Fade In With Scale」が選べます。
「MINUTES」と「SECONDS」でどのくらいのディレイを入れるかを指定できます。例えばウェビナーが開始されてから30分、正確にはウェビナーのページが読み込まれてから30分なのですが、ここで指定した時間だけ遅れてPricing Tableを出したりできます。
この下の「ANIMATION」は「TIMED DELAY」と似たような感じなのですが、JavaScriptが分かる方であれば「Lazy Loading」と言った方がわかりやすいかもしれません。ミリセカンド単位で表示を遅らせるような感じです。ページを開いたときにふわっと表示されるようなエフェクトを追加することができます。
いくつか種類があるのですが、「On Page Load」を選択するとページがロードされてからどのくらいの時間、どういうスタイルで遅れて表示させるかを選べます。「On Page Scroll (becomes visible)」を選択するとページが読み込まれたときではなく、ページをスクロールしていってこのエレメントが出るはずの場所まで来たときから起算して、500ミリセカンドでこの効果を表示させるように指定することができます。これはすごく便利なので使ってみてください。今回は以上です。