ユニバーサルヘッダーとフッターをサイトに追加する

ヘッダーとフッターはどのサイトにとっても不可欠であり、すべてのページで一貫したナビゲーションとブランディングを提供します。ClickFunnels では、ユニバーサル ヘッダー セクションとフッター セクションを作成し、これらのセクションの更新がサイト全体に確実に反映されるようにすることができます。この記事では、ユニバーサルヘッダーとフッターを作成し、それらを別のページにインポートし、ナビゲーション要素を効果的に使用する方法について説明します。

---

必要条件

1. アクティブなClickFunnelsアカウント

2. The Site & Blog app added to your workspace

---

ユニバーサルセクションとは

ユニバーサルセクションは、保存してサイト上の複数のページに追加できる再利用可能なコンテンツブロックです。各ページで手動で再作成することなく、同じヘッダー、フッター、またはその他の繰り返し要素を使用することで、サイト全体の一貫性を維持するのに最適です。

保存すると、ユニバーサルセクションはエディターに 紫色のハイライト で表示され、識別しやすくなります。ユニバーサルセクションに加えられた更新は、それが使用されているすべてのページに自動的に反映されるため、時間を節約し、デザインの統一性を確保します。

---

ユニバーサルヘッダーとフッターの作成

1. ワークスペースから、 サイトとブログ アプリに移動し、[ 概要 ] メニューを選択します。

2. 右上隅の [サイトの編集 ] をクリックします。

3. [サイト テーマ ページ] で [ ホーム ページ] オプションを選択して、ページ エディターでサイトのホーム ページを編集します。

4. 緑色の「+ セクションを追加」 アイコンをクリックして、新しいセクションを追加します。
   

   • ヘッダーの場合: ナビゲーション カテゴリを参照し、ナビゲーション メニューを含む適切なヘッダー テンプレートを選択します。

   • フッターの場合: [フッター] カテゴリを参照し、フッター テンプレートを選択します。

5. ページ エディターを使用して、ロゴ、ナビゲーション メニュー、リンク、アイコンなどの要素を追加または編集して、選択したテンプレートをカスタマイズして、ブランドに合わせてカスタマイズします。

6. デザインが完成したら、セクションにカーソルを合わせて [保存] アイコンをクリックします。

7. [ セクション名 ] フィールドに、「Web サイト ヘッダー」や「Web サイト フッター」などのわかりやすい名前を入力します。

8. **「セクションをユニバーサルにする」**オプションを有効にして、このセクションを他のページで再利用できるようにします。

9. [ セクションの保存] をクリックして、ユニバーサルセクションとして確定し、保存します。
   

---

ユニバーサルセクションを別のページにインポートする

ユニバーサルセクションを使用すると、同じヘッダーとフッターをデザインし直すことなく、複数のページで再利用できます。インポート方法は次のとおりです。

1. ユニバーサルヘッダーまたはフッターを追加するページの ページエディタ を開きます。

2. 緑色の「**+****セクションを追加」**アイコンをクリックして、セクションを追加します。

3. セクションライブラリの[ ユニバーサル ]タブに移動します。

4. 保存したユニバーサル ヘッダーまたはフッターをリストから選択するか、ユニバーサル セクションの名前を検索します。

5. セクションをページ上の目的の場所にドラッグ アンド ドロップします。
   

ユニバーサルセクションを使用すると、1つの場所でヘッダーまたはフッターに加えられた更新は、セクションが適用されているすべてのページに自動的に反映されます。

---

ナビゲーション要素の使用

ナビゲーション 要素は、訪問者に直感的なブラウジングエクスペリエンスを作成するために不可欠です。サイトのさまざまなセクションやページにリンクするメニューを整理して表示できます。効果的に使用する方法は次のとおりです。

事前にデザインされたテンプレートを使用する場合

• 事前にデザインされたテンプレートからヘッダーセクションをインポートした場合、 ナビゲーション 要素はすでに含まれています。さらにカスタマイズしない限り、再度追加する必要はありません。

ヘッダーまたはフッターを最初から作成する

• ヘッダーまたはフッターセクションを最初から作成する場合は、Navigation 要素を手動で追加 する必要があります。

  1. ページエディタで [+ 要素を追加 ] アイコンをクリックします。

  2. 要素ライブラリの ナビゲーション カテゴリに移動します。

  3. Navigation 要素を目的の場所にドラッグ アンド ドロップします。
     

• Navigation 要素は用途が広く、ヘッダーとフッターの両方で使用できます。

  • ヘッダーナビゲーション: 従来のヘッダー デザインに合わせてメニューを水平に配置します。

  • フッター ナビゲーション: 垂直または水平レイアウトを使用して、「プライバシー ポリシー」や「利用規約」などのリンクを整理します。

メニュー項目の追加とカスタマイズ

ナビゲーション要素でメニューを設定するには:

1. ナビゲーション設定へのアクセス: エディターのナビゲーション要素の [ 設定 ] アイコンをクリックします。

2. ナビゲーション リンクの変更: ナビゲーション リンク 設定の下に、「ショップ」、「ブログ」、「会社概要」の 3 つのデフォルト メニュー項目があります。

   • 各メニュー項目をクリックしてテキストを編集し、適切なページにリンクします。

   • リンクには、/shopや/about-usなどの相対パスを使用します。相対パスにより、ナビゲーション リンクが動的で適応性が高くなり、ドメインが変更された場合でもシームレスに機能します。
     

新しいメニュー項目の追加やスタイル設定など、ナビゲーション要素のカスタマイズに関する詳細なガイドについては、Navigation: Add Navigation Menus to Pagesの記事 を参照してください。