• Skip to primary navigation
  • Skip to main content

石崎力也のコンサルティング「いしこん」

年収1000万円以上のネットビジネス経営者を対象にデジタルコンテンツの販売方法とマーケティングオートメーションの導入方法に関する情報を発信するブログ。

  • いしこん 2.0
  • 無料ウェビナー
  • もう1本読む?
    • オンラインコース(講座)ビジネスの作り方・やり方
    • ネットビジネスの始め方【これでオランダ移住を実現しました】
    • 会員制サイトの作り方とサブスクリプションの導入方法
  • コース一覧
  • お客様の声
  • 石崎力也とは?
  • リソース
  • ログイン
    • 新規登録はこちら
    • アカウントを持っている
  • Show Search
Hide Search
現在の場所:ホーム / ClickFunnels / 5-21 クリックファネルでドロップダウンリストを入れる (Select Box)

5-21 クリックファネルでドロップダウンリストを入れる (Select Box)

Last updated on 2021年4月14日 By 石崎 力也

今回はClickFunnelsでドロップダウンリストを作っていきます。

今回お届けするノウハウはこちら

  • Step1. 「SELECT BOX」を挿入する
  • Step2. SETTINGSタブを設定する
  • Step3. THEMESタブを設定する
  • Step4. ADVANCEDタブを設定する
  • やり方を動画で見る

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)」は長いセールスページなどでページをスクロールしていってエレメントの場所に来た時点から起算してディレイを出すという機能です。今回は以上です。

やり方を動画で見る

ClickFunnels(クリックファネル)の使い方・操作方法の一覧ページに戻る

Filed Under: ClickFunnels

知っていることはお金になる…1度限りのウェビナーをご用意しました。視聴する

石崎力也のコンサルティング「いしこん」

Copyright © 2022 · Rikiya "Sales Funnel" Ishizaki