10 ページ全体に背景画像を敷く方法|上級者向けテクニック

執筆者 | 高コンバージョンファネル

こんにちは、下坂栄里子です。

この記事では、私自身が実際のオプトインページで使っている「ページ全体に背景画像を敷く」という、少し高度なテクニックを紹介します。必須ではないので、余裕がある方だけ挑戦してみてください。

ページ全体の背景に画像を設定する

「本文」の設定パネル。背景トグルがONになっており、画像URL・画像スタイル・画像フィットの設定項目が表示されている

私のページでは、背景全体にグラデーション画像を敷いています。これを設定するには、「本文」の設定を開き、「背景」をONにして画像URLを入力します。

ただし、このままだとセクションの背景が白のままになっていて、せっかく設定した背景画像が隠れてしまいます。

セクションの背景を透明にする

セクションの背景色を編集するカラーピッカー。アルファ値を0%に設定して透明にしている

そこで、各セクションの背景設定を開き、色のアルファ値(透明度)を0%にして透明にします。これで、本文に設定した背景画像がセクションを通して見えるようになります。

この設定をしておくと、ページをスクロールしたときに、背景画像がスライドするような視覚効果が生まれます。あくまで見た目の演出なので、やらなくてもオプトインページとしては問題ありません。

ClickFunnelsへの実装でデザイン崩れを防ぐポイントはこちらの記事でも解説しています。

まとめ

ページ全体に背景画像を敷くには、「本文」の設定から背景をONにして画像URLを設定する

そのままだとセクションの白背景に隠れてしまうため、セクションの背景を透明(アルファ0%)にする

スクロール時に背景がスライドするような演出効果が生まれる

これはあくまで余談的な高度なテクニックで、必須ではない

次回も引き続き、ページ作成の実演を解説していきます。

ファネルデザイナー® 下坂栄里子でした。

SNSをやめても、あなたの知識は売れ続けます。

眠っている間に世界中で売れ続ける仕組み「5つのデジタル導線」の作り方を、16分の無料動画で公開中です。

▶︎ 無料動画を視聴する