今回はClickFunnelsでクリックするとポップアップして出てくるビデオを設置していきます。
今回お届けするノウハウはこちら
Step1. 「VIDEO POPUP」を挿入する
最初にお見せすると、ここに埋め込んである画像をクリックするとビデオがポップアップで出てくるのですが、これを作っていきます。
「ADD NEW ELEMENT」をクリックします。「video」で検索して「VIDEO POPUP」を選択するとダミーの画像が入るので設定していきます。
Step2. SETTINGSタブを設定する
- TOP MARGIN：エレメントの上の余白を調節できます。
- THUMBNAIL URL：見ていただいたらわかると思うのですが、この下はYouTubeの再生アイコンのような画像が入っています。今はダミーの「Watch Video」になっていますが、これはご自身で画像を用意してもいいと思いますし、私は「SEARCH」から取ってきました。もしかしたら気に入ったものがないかもしれないので、「Unsplash」などからダウンロードしてご自身で加工したほうがいいかもしれません。サムネイルはいろいろと試してみてください。
- VIDEO URL：普通のビデオのエレメントだとVimeoなど他のプラットフォームを選べるのですが、今回はたぶんYouTubeだけだと思います。もしかしたらVimeoもできるかもしれないので、Vimeoでやってみてもいいと思います。
- ALT TEXT：この画像が表示できないときに代わりのテキストを表示するというもので、HTMLに詳しい人はたぶんわかると思います。
- TITLE：動画のタイトルなので入力してみてください。
- 「THUMBNAIL WIDTH」と「THUMBNAIL HEIGHT」：大きすぎるサムネイルを入れてしまった場合でもピクセル数を指定できるので、もともと大きいサイズの画像でも「THUMBNAIL HEIGHT」を「400」に指定すると小さくなります。
Step3. THEMESタブを設定する
THEMESタブはClickFunnelsがあらかじめプリセットとしてデザインを登録してくれているので、気に入ったものを選んでみてください。この下で作った画像は黒枠のデザインです。クリックしないとポップアップしないので、他のエレメントで「クリックでポップアップ」という文字を表示しておいたほうがいいかもしれません。
Step4. ADVANCEDタブを設定する
STYLESタブからいきましょう。
- ALIGN：左右の位置を設定できます。
- RADIUS：枠を「Circle」で円形にするのか「Round Corners」で角を丸くするのかが選択できます。
- SHADOW：今はもともとシャドウがかかっているテーマを選んでいるのですが、枠のドロップシャドウを付けることができます。
- OPACITY：透明度の設定ができます。今は「Full Visible」なので透明度はなしです。下に行くにつれてどんどん薄くなっていきます。
- GREY SCALE FX：下のエレメントを見たほうがわかりやすいかもしれません。ちょっとおしゃれにしたいときなどは「Full Color」を「Black & White」にすればわざわざ画像をアップロードし直すことなくグレースケールにすることができます。
ANIMATIONタブは大きく分けて2種類のディレイを入れる設定ができます。上のほうは1秒以上の比較的大きなディレイを入れることができ、下のほうはミリセカンド単位の小さなディレイを入れることができます。
上のほうは例えば60分のウェビナーで30分のところからピッチが入るときにエレメントを出したいという場合に、「TIMED DELAY」で「Fade In」を選んで「MINUTES」を「30」、「SECONDS」を「15」に指定すると、ページの読み込みから30分15秒遅らせてフェードインで表示してくれます。
「ANIMATION」は2種類あり、「On Page Load」はミリセカンド単位のディレイをページの読み込みから起算して入れる機能です。「STYLE」に関しても他にいろいろあるので試してみてください。「DELAY (MS)」はデフォルトで500ミリセカンドが指定されていて、これも調整することができます。「On Page Scroll (becomes visible)」は長いセールスページなどでページをスクロールしていってエレメントが表示される場所に来た時点から起算してディレイを出すという機能です。これも先ほどと同様に「STYLE」を選んで「DELAY (MS)」を指定します。今回は以上です。