今回はClickFunnelsでドロップダウンリストを作っていきます。
今回お届けするノウハウはこちら
Step1. 「SELECT BOX」を挿入する
ドロップダウンリストは「ドロップダウンメニュー」などいろいろな呼び方がありますが、Custom Typeで作ることもできます。下のように国を選択する「Select Country」はデフォルトで用意されているものです。
まずは「ADD NEW ELEMENT」をクリックします。「select」で検索して「SELECT BOX」を選択します。
Step2. SETTINGSタブを設定する
- TOP MARGIN：エレメントの上の余白を調整できます。
- INPUT TYPE：今回一番大事なのは「INPUT TYPE」で、何を選択させるかを指定できます。先ほど「Select Country」でお見せしたのは「All Countries」です。あとは英語圏のサービスなので「US & Canada」などがあるのですが、職業を選択するのは「INPUT TYPE」で「Custom Options」を選択して作りました。「INPUT NAME」は例えばClickFunnels側でお客さんが何を選んだのかという情報が残るので、それが何の入力欄だったのかを書くための項目です。今回は「職業」にしておきました。
- 「VALUE:」：例えば「職業」が「lawyer」というふうに情報として残す文字列です。
- 「TEXT:」はその「lawyer」というVALUEを選ばせるときに表示するユーザー向けのラベル（「弁護士」）のようなものです。
- 選択肢はいくつでも追加できるのでやってみてください。
- REQUIRED：このボックスを必須アイテムにするかどうかを設定するもので、デフォルトでは「Not Required」になっているのですが「Required」にしてもいいと思います。
- FONT FAMILY：フォントを選択することができます。
- FONT SIZE：ボックス内のテキストの大きさを選択できます。
Step3. THEMESタブを設定する
THEMESタブはClickFunnelsがデフォルトで作ってくれたデザインのプリセットのようなもので、例えば3Dっぽいものやボックスの周りにインナーシャドウがかかっているもの、ボックスの下にあるアンダーラインが強調されているものなどがあります。
Step4. ADVANCEDタブを設定する
STYLESタブから見ていきましょう。
- FONT WEIGHT：フォントの太さを選択できます。今回はすでにTHEMESタブで選択してしまっているので、太字の変化がわかりにくいかもしれません。
- ICON：ドロップダウンリストのアイコンを細かく変えることができるので、好みのものを探してみてください。
- CORNERS：ボックスの角の曲率を選択することができます。数値を大きくするほど丸いデザインになっていきます。
- BG COLOR：ドロップダウンリストのバックグラウンドカラーを選択できます。
ANIMATIONタブに関しては他のエレメントで説明している部分もあるので重複するのですが、もう一回説明しておきます。これはページの読み込んだりスクロールしてきてからエレメントを少し遅れて表示させるディレイを設定できます。上のほうと下のほうで分かれていて、上のほうは1秒以上の比較的大きなディレイを入れることができ、下のほうはミリセカンド単位の1秒より細かいディレイを入れることができます。JavaScriptでいうLazy Loadingのような考え方になると思います。
上の「TIMED DELAY」はスタイルを選択できます。どちらでもいいのでいろいろと試してみてください。「MINUTES」と「SECONDS」で時間を指定できます。例えば60分のウェビナーで30分ぐらいのところからピッチを挟むという場合に、「MINUTES」を「30」、「SECONDS」を「15」と入力して30分15秒後に指定したりできます。ただしこれは動画などを再生し始めてからではなく、ページを読み込んでから30分15秒ということなので注意してください。また、例えば120分のウェビナーで90分後に指定するなど、60分以上に指定することもできるので覚えておいてください。
下の「ANIMATION」では「TYPE」を選択します。「On Page Load」と「On Page Scroll (becomes visible)」があり、「On Page Load」はディレイの起算点がページがロードされた時点になります。「STYLE」は先ほどよりもバリエーションがあるので試してみてください。「DELAY (MS)」の「MS」はミリセカンドのことで、デフォルトは500ミリセカンド（0.5秒）です。「On Page Scroll (becomes visible)」は長いセールスページなどでページをスクロールしていってエレメントの場所に来た時点から起算してディレイを出すという機能です。今回は以上です。