今回はClickFunnelsで画像つきテキストエリアを作っていきます。
今回お届けするノウハウはこちら
ClickFunnelsのテキストエリアとは
テキストエリアは画像、タイトル、小さい文字の文章の3つが1つになっているというエレメントで、すごく使い勝手がいいので紹介します。それでは同じものを作ってみます。
Step1. 「IMG FEATURE」を挿入する
「ADD NEW ELEMENT」をクリックして「IMG FEATURE」を選択します。そうするとブランクの画像が出てくるので設定していきます。
Step2. SETTINGSタブを設定する
- TOP MARGIN：エレメントの上の余白を調整できます。
- IMAGE：これは大事です。先ほど出した画像は「350 × 250」と書いてあって、これに合わせてもいいのですが、合わせないで入れることもできます。例えば縦長の画像を入れると、その画像の縦横比で表示してくれます。その分、文章のエリアも余白が空いてしまうので、文章の長さと画像の縦横比をうまく調整しながらやったほうがいいです。余白が空いてしまうとやりにくいので、文章の量と画像の比率が合うような感じに調整してみてください。
- ALT TEXT：画像が表示されなかったときにテキストを表示するものです。SEOにも使われるものだと思うのですが、これはわかる方だけ入れてみてください。
- IMAGE WIDTH と IMAGE HEIGHT：イメージの大きさなどを固定できます。これはクロップされるというよりも画像をつぶすような形になるので、例えば「IMAGE WIDTH」を「300」、「IMAGE HEIGHT」を「100」にして縦長の画像を無理やり横長にしようとすると縦横比が崩れて変な感じになります。これはあまりやらないほうがいいと思います。例えば文章の量が少なくて全然ダメな場合は「IMAGE HEIGHT」を調整するというやり方もいいと思います。できれば画像をうまく選んでそれに合わせた文章の量で対応するのが一番いいと思います。
- FONT FAMILY：フォントを選ぶ画面が出てくるので、好きなフォントを選んでください。
- HEADLINE と TEXT：フォントのサイズを選択できます。
- HEADLINE COLOR と TEXT COLOR：色を選択できるので選んでおきます。
Step3. THEMESタブを設定する
THEMESタブにはデザインのプリセットがあります。これは左側の画像のスタイルを選択するプリセットです。右側のテキストには影響しません。いろいろなものがあるので、使い勝手を試してみてください。
Step4. ADVANCEDタブを設定する
次はADVANCEDタブです。
STYLESタブから見ていきましょう。
- LAYOUT：画像とテキストの順番を入れ替えることができます。
- COLUMN SIZES (%)：画像のサイズを変更できます。先ほどの「IMAGE WIDTH」と「IMAGE HEIGHT」を選択してもいいのですが、これで画像とテキストの比率も変更できるので、テキストの量と画像の大きさを調整してみてください。
- IMAGE RADIUS：画像のクロップの仕方が選択できます。角を丸くしたり、丸く切り抜くこともできます。
- IMAGE BORDER：画像の境界線を設定できます。
- IMAGE SHADOW：画像にシャドウを付けることができます。
ANIMATIONタブではディレイして表示させる設定ができます。大きく2つに分かれていて、上のほうは1秒以上の比較的長いディレイを入れることができ、下のほうは1秒以下のミリセカンド単位のディレイを入れることができます。
例えば1秒以上のディレイを入れる場合は、上の「TIMED DELAY」でスタイルを選ぶことができます。これはいろいろと試してみてください。
「MINUTES」と「SECONDS」ではページがロードされてからどのくらいたって表示するかという、ディレイの時間を選べます。よく使うのはウェビナーなどで、例えば60分のウェビナーに対して30分たってからセールスを始めるような場合です。これはページがローディングされてからの時間になります。
「ANIMATION」のほうはミリセカンド単位の設定になるのですが、「TYPE」で「On Page Load」と「On Page Scroll (becomes visible)」が選択できます。「On Page Load」のほうはページがロードされてから起算して、500ミリセカンドなどの比較的小さいディレイを入れることができます。「On Page Scroll (becomes visible)」のほうは長いページをスクロールしていってエレメントの場所まで来たときから起算して、指定したミリセカンドでディレイを表示するという感じです。
「ANIMATION」の短いほうのディレイはJavaScriptでいうLazy Loadingのような考え方です。「On Page Road」を選択すると「STYLE」があるので、いろいろなスタイルを試してみてください。「DELAY (MS)」は「500」になっているのですが、自由に調整してみてください。「On Page Scroll (becomes visible)」も同様です。これは便利なので使ってみてください。今回は以上です。
