今回はClickFunnelsで比較的自由度の高いテキストブロックの機能についてお伝えしていきます。
今回お届けするノウハウはこちら
テキストブロックの機能
通常、テキストを入れたい場合には「PARAGRAPH」や「SUB-HEADLINE」などを選択すると思います。あるいは「HEADLINE」なども文字の大きさによって入れるものを変えると思います。ここでテキストブロックを使うと同じエレメントの中でもテキストの大きさを部分によって分けたりできます。
例えば大きいテキスト、中くらいのテキスト、小さいテキストというのを一つのエレメントの中で扱います。普通のヘッドやサブヘッドだとエレメントが複数に分かれてしまうので、それを一つにまとめて使える便利なのものを紹介します。
Step1. 「TEXT BLOCK」を追加する
まずは「ADD NEW ELEMENT」です。そして一番下のほうにある「TEXT BLOCK」を選択します。
そうすると直接編集ができなくなっていて、クリックすると「EDIT TEXT」が出てくるので、これをクリックします。そうするとダミーの文章が出てくるのですが、例えばこれを改行してみます。上部にいろいろなモードが並んでいるので左から見ていきます。
- HTMLモード：ソースで編集ができる状態になります。これでかなり自由度が上がると思います。
- 2つ目のモードはフォーマットに関して「Header」や「Quote」など、いろいろなものが選択できます。
- 太字とイタリックのモードは普通です。
- 箇条書きモード：ClickFunnelsの不具合なのか分かりませんが、テキストを選択して箇条書きモードをクリックしても何も起こりません。同じく文字色と文字のハイライトのモードに関しても何も変わりません。HTMLモードを見ても何も変わっていません。箇条書き、文字色、文字のハイライトのモードに関してはバグではないかと思われます。いずれ修正されるとは思いますが、あらかじめその点はお伝えしておきます。
- リンク機能は普通です。
- 7つ目のモードはセンターに寄せるのか左に寄せるのかといったことを場所によって変えることができますが、これも動作が怪しいです。HTMLがわかる方に関してはHTMLモードでやってもいいと思います。
一部のテキストだけ大きくしたり、「Header 1」を設定するということもできます。場所によって動きがバギーなところがあるので注意して使ってください。太字やイタリックのモードは割とシンプルな機能なのでバグが少なくできます。フォントサイズの変更もけっこうスムーズにできる感じがしました。では、これでアップデートします。わかりやすく文字を大きくしてみました。
Step2. その他のオプションを設定する
他のオプションを説明します。
- TOP MARGIN：エレメントの上の余白を調整できます。
- FONT FAMILY：ここで使うフォントを選択できます。残念ながらこのエレメントの中でフォントまで変えることはできませんが、先ほど言ったようにHTMLモードであればある程度指定はできると思うので、詳しい人はやってみてください。
- TEXT COLOR：「EDIT TEXT」の「OPEN TEXT EDITOR」から指定できますが、ここで指定することもできます。
- BG COLOR：エレメントの背景のカラーです。
Step3. ADVANCEDタブを設定する
次はADVANCEDタブです。
まずはSTYLESタブ。
- TEXT COLUMNS：文字列を何段かに分けることができます。例えば2段に分けたいというときがあるかと思いますが、これは4つまで対応できるのでけっこう使い勝手がいいと思います。
- PADDING：エレメントの内側の余白です。
- CORNERS：エレメントの四隅の角を丸くする際の曲率の大きさです。数値が大きいほど丸くなります。
ANIMATIONタブではエレメントをディレイで表示させることができます。
「TIMED DELAY」で「Fade In」か「Fade In With Scale」のどちらかを選んでください。あとは時間差を指定します。例えばウェビナーページなどでウェビナーが始まってから30分後、正確にはページが読み込まれてから30分後なのですが、その設定をする際は「MINUTES」を「30」、「SECONDS」を「0」にすると30分後に出てきます。
もっと細かく1秒以下のフェードや視覚効果を使いたいときは、JavaScriptでいうLazy Loadingのような感じになるのですが、500ミリセカンドが標準になっています。「Fade In」など、いろいろなエフェクトを選ぶことができます。
「TYPE」に「On Page Load」と「On Page Scroll (becomes visible)」があるので、ページをロードしたときから起算してディレイを入れるのか、ページのスクロールでそのエレメントの所に来たときから起算してディレイを入れるのかという感じで設定します。これは便利なので使ってみてください。今回は以上です。