ヘッダーとフッターは、ファネルに構造と一貫性を加えるページの上部と下部のセクションです。適切にデザインされたヘッダーとフッターは、ページの外観を向上させ、訪問者の方向性を維持し、ブランドを強化することができます。このガイドでは、ヘッダーとフッターを作成およびカスタマイズして、事前にデザインされたテンプレートから始めるか、ゼロから構築して、視聴者がメインのオファーに集中し続ける方法を説明します。
必要条件
アクティブなClickFunnelsアカウント
ワークスペースで作成されたページ
ページのヘッダーとフッターを作成する方法
事前にデザインされたテンプレートを使用してページのヘッダーまたはフッターを作成することも、手動で作成することもできます。各方法について、以下の手順に従ってください。
オプション 1: 事前にデザインされたテンプレートを使用する
ページエディタで、「 セクションの追加」 をクリックしてセクションライブラリを開きます。
[ カテゴリ] メニューで [ヘッダー] または [フッター ] を選択して、ページのヘッダーまたはフッターとして使用できる事前にデザインされたセクション テンプレートを表示します。
デザインのニーズに合った テンプレート を選択し、クリックしてページに追加します。これらのテンプレートは、ブランドに合わせて完全にカスタマイズできます。
.png "image(249).png")
オプション 2: ヘッダーまたはフッターを最初から作成する
ページエディタで、「 セクションを追加」 をクリックし、セクションオプションから 「空白」 を選択します。これにより、ページに空のセクションが追加され、カスタムヘッダーまたはフッターの作成を開始できます。
行の追加: セクション内で [行の追加] をクリックしてレイアウトを構造化します。たとえば、ヘッダーには、ロゴとナビゲーション リンクの行がある場合があります。フッターでは、リンク、ソーシャルメディアアイコン、連絡先情報に行を使用できます。 article on Adding Rowsを読んでください。
要素の追加: 各行内の [要素の追加] をクリックして、次のようなコンポーネントを挿入します。
ロゴ (画像要素を使用)
ナビゲーションメニュー (重要なページへのリンク)
ソーシャルメディアアイコン
ボタン (「お問い合わせ」や「今すぐ購入」などの行動を促すフレーズ用)
テキスト (連絡先情報、免責事項、または著作権)
詳細については、 article on Adding Elementを確認してください。
ヘッダーとフッターの設定を構成する
ヘッダーまたはフッターを構成するときに、 セクション、 行、 列、 要素の複数のレベルで設定を調整できます。各レベルには、ヘッダーとフッターの外観と機能を制御するためのさまざまなオプションが用意されているため、それぞれがどのように機能するかを理解すると役立ちます。
セクション設定: これらの設定は、ヘッダーまたはフッター領域全体を制御します。さまざまなデバイスでの 背景色、 パディング、 余白、 可視性 などのオプションを調整できます。セクション設定にアクセスするには、セクションにカーソルを合わせ、右上隅にある 歯車アイコン をクリックします。
行設定: 行は、コンテンツを整理してヘッダーまたはフッターを構成するのに役立ちます。
列設定: 列を使用すると、行をセクションに分割できます。列設定内で幅、配置、間隔を調整して、目的のレイアウトを作成できます。article on understanding Column.をチェックしてください
設定: テキスト、ボタン、アイコンなどの個々の要素には、それぞれ独自の設定があります。要素設定内で フォント スタイル、 色、 サイズ、 配置 をカスタマイズします。
ヘッダーとフッターのベストプラクティス
焦点を絞ったヘッダーで注目を集める: ヘッダーを使用して、特別オファー、期間限定割引、重要なお知らせなど、訪問者の注意を引く重要な情報や行動喚起を強調します。デザインをすっきりと保ち、過密状態を避けて、メッセージを際立たせます。
フッター情報の整理: フッターを使用して、セカンダリ ページ (利用規約、プライバシー ポリシーなど) やソーシャル メディア プロフィールへのリンクを提供します。関連情報を行にグループ化して、読みやすさを向上させます。
モバイル向けに最適化する: ヘッダーとフッターがモバイルフレンドリーであることを確認してください。さまざまなデバイスでテストして、リンクがクリック可能であること、および小さな画面でレイアウトが適切に調整されることを確認します。
明確で読みやすいフォントを使用する: 特にユーザーがナビゲーション リンクを探すヘッダーで、読みやすいフォントと適切なサイズのフォントを選択します。