今回はClickFunnelsで画像を埋め込んで、カスタマイズしていきます。
Step1. 画像を挿入する
おなじみの「ADD NEW ELEMENT」をクリックします。今回使うのは「IMAGE」というエレメントです。いろいろ設定項目があるので見ていきましょう。
Step2. 画像をカスタマイズする
- TOP MARGIN：エレメントの上部の余白を調整することができます。
- IMAGE：画像のURLを直接入力していただいてもけっこうですし、「Uploaded Images」にあなただけの画像をアップロードして追加することもできます。「Pixabay」「IconFinder」「Unsplash」等からもいろいろ検索して出すことができます。例えば「Unsplash」で「ocean」と検索すると海の画像が出てきます。こういうものも著作権の緩いコンテンツをClickFunnelsが選んでくれているので、ここから使ってみてください。
- BACKGROUND：ClickFunnelsであらかじめ用意された素材が入っています。他にもちょっとした画像であれば「STOCK」にいろいろな種類が用意されています。
- MAP：地図を埋め込むこともできます。
今回は「ADD IMAGE」で画像を埋め込みました。
- ALT TEXT：HTMLメールでもSEOに効果があるといわれていて、alt属性や代替テキストと呼ばれるものですが、それをここに設定することができます。
- IMAGE WIDTH：画像の横幅を指定できます。
- IMAGE HEIGHT：画像の高さを指定できます。
- LINK URL：画像をクリックしたときのリンク先を選択でき、「LINK URL TARGET」は新しいタブで開くのか同じタブで開くのかを選択できます。「Normal」を選ぶと同じウィンドウで開くようにできます。
Step3. THEMESタブを設定する
次はTHEMESタブです。テーマに関してはいろいろなプリセットをClickFunnelsが用意してくれているので、けっこう良いものがあったりします。デザイン的なことがあまり得意ではないという方は、こういうものを使っていただくとすごくきれいにいろいろなデザインが出てくると思います。例えば枠と影が付いているようなものは使い勝手が良いと思います。
Step4. ADVANCEDタブを設定する
次はADVANCEDタブです。
STYLESタブの「ALIGN」に関してはちょっと分かりにくいのですが、例えば画像を横長の場所に配置したようなときに左側と右側のどちらに表示するかを設定できます。今回は「IMAGE WIDTH」を少し狭くしてみました。そうするとアラインメントがわかりやすくなったかと思います。「IMAGE WIDTH」を消すと元のサイズに戻すことができます。
- RADIUS：「Circle」で画像を円形にしたり、「Round Corners」で画像の角を丸くしたりすることができます。画像の半径までは指定できないのですが、すごく良いと思います。
- BORDER：白い枠線や黒い枠線を付けることができます。
- SHADOW：すでに「THEMES」で変更していて少しわかりにくくなってしまうので、デフォルトに戻しておきます。「Light Shadow」「Full Shadow」「Dark Shadow」があり、下に行くほどだんだんと影が濃くなっていきます。
- OPACITY：「Light Fade」「Strong Fade」「Stronger Fade」があり、透明度が3段階で選択できます。「Full Visible」にすると透明度が0になります。
- GREY SCALE FX：フルカラーにするのかモノクロにするのかを選択でき、「Black & White」を選ぶと画像を変えずにモノクロの効果が得られます。
すごく使えるのがこの「OPACITY」と「GREY SCALE FX」で、例えばこれを組み合わせてプロダクトローンチのページなどで画像のサムネイルを4つ並べたときに、今見ている動画以外の部分のサムネイルを薄くして白黒にすると、クリックできないような雰囲気を出すことができます。
ANIMATIONタブは他の要素と共通しています。「TIMED DELAY」はページの読み込みからどれくらいの時間差で「Fade In」や「Fade In With Scale」を表示するかというもので、「何分何秒」という指定ができます。
「ANIMATION」では「TYPE」を選択できます。これはミリセカンドなので、「On Page Load」の場合はページが読み込まれてから何秒後にフェードインや他の効果を出すかが指定でき、「On Page Scroll (becomes visible)」ではページがスクロールされて要素が見える状態になってから何秒後にフェードインするかを指定できます。今回は以上です。
