背景は、ClickFunnels のページのビジュアル アイデンティティを形成する上で重要な役割を果たします。ページ全体をカスタマイズする場合でも、セクション、行、列、要素などの特定のコンテナをカスタマイズする場合でも、ClickFunnels は色、画像、ビデオなどのさまざまな背景カスタマイズ オプションを提供します。この記事では、ページ レイアウトの背景を適用および最適化し、プロフェッショナルで視覚的に魅力的なデザインを確保する方法について説明します。.png "image(507).png")
必要条件
アクティブなClickFunnelsアカウント
ワークスペースで作成されたページ
背景を理解する
ClickFunnels では、背景を使用してレイアウトのルック アンド フィールを定義できます。コンテナの種類に応じて、以下を適用できます。
背景色: セクションから個々の要素まで、ほぼすべてのレイアウト タイプで使用できます。
背景画像: セクション、行、列、およびいくつかの要素などのコンテナでサポートされています。
背景ビデオ: セクション、行、フレックス コンテナなどの大きなコンテナの背景としてビデオを埋め込んで、ダイナミックな視覚的魅力を追加します。
これらのオプションを使用すると、ブランドのアイデンティティに合わせて視覚的に素晴らしいデザインを作成できます。
バックグラウンド設定へのアクセス
カスタマイズするコンテナ(セクション、行、列、フレックスコンテナ、または要素)にカーソルを合わせ、[ 設定 ]アイコンをクリックします。
背景 設定 を有効にするオプションを切り替えます。
.png "image(508).png")
[背景] 設定で、色、画像、またはビデオを背景としてコンテナに適用します。
[保存] をクリックしてページを保存します。
背景色の適用
ClickFunnels でコンテナに背景色を追加すると、コンテナの外観をカスタマイズし、ブランディングに合わせることができます。背景色を効果的に適用するには、次の手順に従ってください。
コンテナの 背景 設定(セクション、行、列、要素など)を有効にします。
[ 背景色] フィールドをクリックします。
色相セレクター と 彩度と明るさパネルを使用して単色を選択します。ページ デザインを補完し、オーバーレイされたコンテンツの読みやすさを保証する色を選択してください。
.png "image(511).png")
透明度やグラデーションなどの設定を調整して、高度なカスタマイズを行います (以下で説明します)。
デザインをプレビューし、[ 保存] をクリックして変更を適用します。
不透明度による透明度の調整
ClickFunnels を使用すると、背景色の不透明度を変更して部分的に透明にすることができます。
「不透明度スライダ 」または「アルファ」フィールドを使用して、カラーピッカーの透明度レベルを設定します。
不透明度 0% は背景が完全に見えないことを意味し、不透明度 100% は背景が完全に単色であることを意味し、不透明度 50% は背景を部分的に透明にし、その背後にあるコンテンツやデザインが透けて見えるようにします。
グラデーション背景の作成
グラデーション オプションは、視覚的に魅力的なデザインのために複数の色を動的にブレンドします。ClickFunnels では、次の手順に従ってグラデーションを簡単に作成できます。
カラーピッカー » スタイルセレクターで、背景タイプを単色からグラデーションに切り替えます。
カラーストップを追加およびカスタマイズします。
グラデーションバーをクリックして、 カラーストップを追加します。既定では、ClickFunnels は 2 つのカラー ストップを持つグラデーションを提供します。
カラーストップをクリックしてカラーセレクターを開き、そのポイントの色を選択します。
必要に応じて、ストップを追加して複雑なグラデーションを作成します。
.png "image(512).png")
方向セレクター(矢印)を使用して、グラデーションの角度を調整します。デザインに合わせて水平、垂直、斜めを選択してください。
レイアウト内のグラデーションをプレビューして、デザインを強化し、読みやすさを維持していることを確認します。
背景画像の適用
画像を背景として使用するには:
[背景] 設定で、[ 画像 URL ] フィールドを使用して画像を追加します。
画像 URL: 背景画像の URL を入力するか、ClickFunnels 画像ギャラリーに直接アップロードします。
画像スタイル: コンテナ内での背景画像の表示方法を制御します。
なし: 追加のスタイル設定なしで背景画像を元のサイズと位置で表示し、画像がコンテナよりも小さい場合は隙間が残る可能性があります。
フルセンター: サイズを変更せずにコンテナ内のイメージを中央に配置します。これにより、イメージがコンテナよりも小さい場合は空白スペースが残る可能性があります。
フルセンター(視差):画像を中央に配置し、視差スクロール効果を適用して、画像がメインコンテンツとは独立して移動するときにレイヤー化された外観を作成します。
手記：
Apple は iOS デバイスでの視差効果をサポートしていません。画像は「フルセンター」スタイルのみでレンダリングされます。
幅を 100% 塗りつぶす: このオプションは、画像を拡大してコンテナの全幅をカバーし、縦横比を維持し、場合によっては垂直方向にトリミングします。
幅と高さを100%塗りつぶす:これにより、画像が引き伸ばされ、コンテナの幅と高さの両方が塗りつぶされ、画像の一部がトリミングされて縦横比が維持されます。
繰り返しなし: 繰り返しずに画像を 1 回表示します。未使用のスペースは空のままになります。
繰り返す: 画像をコンテナ全体に並べて、幅と高さをカバーします。
水平方向に繰り返す: コンテナの幅全体でのみ画像を繰り返します。
垂直方向に繰り返す: コンテナの高さに沿って画像を垂直に重ねます。
画像のフィット: 画像をコンテナ内に配置します (中央、左上、右下など)、配置を改善します。この設定は、[画像スタイル]で[含める]または[縮小]が選択されている場合に表示されます。
背景と前景
背景: これは、コンテナの背面にあるメインの色または画像です。これは、セクション、行、または列の外観を与えるベースレイヤーです。
前景: このカラーレイヤーは背景の上に配置されます。これを使用して、透明なオーバーレイなどの効果を追加し、テキストやその他の要素を読みやすくすることができます。
背景は部屋の壁のようなもので、背景画像は壁を飾る壁紙のようなもので、前景は壁や壁紙の見た目を柔らかくしたり変えたりする薄手のカーテンのようなものです。壁紙(背景画像)が破れたり欠けたりすると、壁の色(背景色)が透けて見えます。最後に、コンテンツは、人々が注目し、対話する前に置かれた家具のようなものです。
背景画像へのオーバーレイの追加
ClickFunnels で背景画像を使用してオーバーレイ効果を作成するには、まず [背景設定 ] に画像を追加し、[ 画像スタイル ] オプションと [画像フィット] オプションを使用してその位置を調整します。次に、透明感のある 前景色 を適用して、オーバーレイされたコンテンツの読みやすさを高める微妙なオーバーレイを作成します。背景色は画像の読み込み時には表示されませんが、ソースの欠落やネットワークの速度が遅いために画像の読み込みに失敗した場合のフォールバックとして機能します。これにより、デザインの一貫性と視覚的に魅力的な状態が保たれます。
ビデオを背景として適用する
ClickFunnels を使用すると、 ページ全体、 セクション、 行、 フレックス コンテナなどのコンテナに魅力的な背景ビデオを追加できます。背景動画はページを視覚的にダイナミックにすることができますが、アクセシビリティとパフォーマンスを確保するために慎重に使用する必要があります。
背景ビデオを適用する手順:
コンテナの バックグラウンド設定 (ページ全体、セクション、行、フレックスコンテナなど)にアクセスします。
[背景設定]で、[ 背景ビデオ] オプションを切り替えます。
動画リンク(YouTubeまたはVimeo)を[ 動画URL ]フィールドに貼り付けます。
ビデオがページ上でどのように表示されるかを確認し、オーバーレイされたテキストやボタンに干渉しないことを確認します。
フォールバックとして 背景色を設定して 、ネットワークの問題やソースの欠落によりビデオの読み込みに失敗した場合にデザインが損なわれないようにします。
[ 保存] をクリックして、背景ビデオをコンテナに適用します。
動的なビデオの背景を追加するには:
[背景設定]で、[ 背景ビデオ] オプションを切り替えます。
動画へのリンク(YouTubeまたはVimeoから)を[ 動画URL ]フィールドに貼り付けます。
ビデオをプレビューします。
ビデオがデザインと一致し、テキストの読みやすさを妨げないことを確認してください。
背景ビデオのベスト プラクティス:
ユーザーを圧倒しないように、動きを最小限に抑えた微妙なビデオを使用します。
バックグラウンドビデオには再生コントロールが含まれていないため、重要なコンテンツにビデオを使用しないでください。
これらのアプリケーション固有の命令に焦点を当てることで、読者は冗長性のない背景色、画像、ビデオを迅速に実装できます。