Webサイトのヘッダーとフッターは重要な要素です。 ほとんどの場合、ヘッダーは、Webサイトのさまざまな部分へのナビゲートを簡素化するナビゲーションリンクを提供します。 一方、フッタは、ウェブサイトの訪問者は、元の数に言及し、このようなビジネスの住所や連絡先情報など、必要とすることの重要な情報が含まampレを。
ヘッダーとフッターは、WordPressのユーザーの現在のテーマによって提供されます。 これらは通常、適切に設計されており、ほとんどの用途に適しています。 ただし、テーマをカスタマイズする場合は、コードを変更する必要があります。 これは、PageBuilderpluginが役立つ場合です。 これらを使用して、コードを知らなくてもWebページコンポーネントを作成および変更できます。
このチュートリアルでは、Webサイトのヘッダーとフッターの作成方法を説明します。 Elementor Proが使用されます（Elementorの基本バージョンには、これらのコンポーネントを作成するために最も重要な機能が含まれていないため）。 したがって、Elementor Proをダウンロードして、オンになっていることを確認してください。
- なぜあなたはあなたのページビルダーとしてElementorを選ぶべきですか？
- Elementorを使用すると、カスタムヘッダーとフッターのメインレイアウトを選択できます。
- ヘッダーとは何ですか？それは何をしますか？
- 正確には、フッターとは何ですか？
- ヘッダーの作り方
- ヘッダーテンプレートの開発
- ヘッダーメニューに変更を加える
- ヘッダーパブリケーション
- フッターの作り方
- フッターテンプレートの開発
- フッターの変更
- 完成品
- 応答性について、ヘッダーセクションとフッターセクションを調べます。
- 物事を終わらせる
なぜあなたはあなたのページビルダーとしてElementorを選ぶべきですか？
Elementorは最も高度なページビルダーであり、ユーザーはプレミアム要素を使用してゴージャスなデザインとレイアウトを作成できます。 コーディングの予備知識がない初心者にとっては非常に有益です。 Elementorのドラッグアンドドロップエディタを使用すると、ユーザーはウィジェットやアイテムを移動できます。
Elementorは、ユーザーがモードを切り替えることなくページがどのように表示されるかを確認できるビジュアルページビルダーです。
Elementorを使用するためのもう1つの説得力のある議論は、ほとんどの作業をコストなしで完了できるということです。 彼らの無料版は、適切なサイト編集機能を提供する能力を超えています。 ただし、ニーズに最適なものを選択できるように、無料バージョンと有料バージョンの両方を検討します。
以下は、Elementorを価値あるものにする重要な側面の一部です。
- ドラッグアンドドロップ機能がサポートされています。
- 多数のテンプレートがあります。
- 全部で90以上のウィジェットがあります。
- レスポンシブサポートにはコーディングは必要ありません。
- やり直しと元に戻すオプションが利用可能です。
- 自動保存が利用可能です。
Elementorを使用すると、カスタムヘッダーとフッターのメインレイアウトを選択できます。
一意のヘッダーを開発する前に、目的のヘッダーセクションとフッターセクションの一般的な配置を決定すると役立ちます。 事前に作成されたヘッダーセクションのレイアウトを見ると、多くの選択肢が得られる可能性があります。
さまざまなヘッダーセクションから選択できます。 最も一般的でモダンな外観のヘッダーは、左端にサイトロゴ、中央にナビゲーションバー、右側に検索バーセクションを備えています。
無限の可能性があり、あなたはあなたが望むどんなレイアウトでも構築することができます。
私は7番の既製のヘッダーテンプレートを選びました。 これは、WordPressWebサイトでヘッダーを使用するための最も一般的で単純なアプローチです。 ヘッダーテンプレート名をコピーして[テンプレート]>[ヘッダー]>[検索テンプレート]>[コピーしたヘッダー名]に貼り付けます。
必要なヘッダーテンプレートが見つかったら、[Elementorで編集]を選択すると、ElementorProヘッダービルダーセクションに移動します。
パーティを始めましょう。
ヘッダーとは何ですか？それは何をしますか？
ウェブページの上部は「ウェブサイトヘッダー」と呼ばれます。 ヘッダーは通常、Webサイト全体で同じです。 ただし、一部のWebサイトでは、サイトのさまざまな部分にさまざまなヘッダーを使用しています。
ヘッダーのデザインは、ユーザーがホームページ、ページ、またはその他の個々のコンテンツにアクセスしたかどうかに関係なく、ユーザーにWebサイトの第一印象を与えます。 そして、それがうまく設計されていれば、それはユーザーの注意を引き付け、スクロールと読書を続けるようにユーザーを誘惑します。
ヘッダーは、会社のブランドアイデンティティの宣伝にも役立ちます。
会社のロゴ、フォント、色、全体的なブランド言語などの機能を使用しています。
サイトナビゲーション、サイト検索、ショッピングカート（販売サイト用）、召喚状（CTA）ボタン、およびユーザーエクスペリエンスを向上させ、コンバージョン率を上げるその他の機能はすべてヘッダーにあります。
正確には、フッターとは何ですか？
フッターは、ページの下部に表示されるWebページのセクションです。 それらは通常、ヘッダーと同様に、Webサイト全体、すべてのページおよび投稿に常に表示されます。
フッターはサイトのすべてのページに表示されるため、見過ごされがちですが、これは潜在的な無駄です。 それらはヘッダーにとっても同様に重要です。
フッターのデザインには、選択した設定に応じて、ニュースレターの登録、著作権情報、利用規約とプライバシー、サイトマップ、連絡先情報、マップ、Webサイトナビゲーションなどの役立つ重要な情報を表示できます。
ヘッダーの作り方
このセクションでは、カスタマイズされたヘッダーを作成します。 それが恐ろしいと思われる場合でも心配しないでください。 ゼロから始めることはありません。 代わりに、Elementorの設計チームによって設計されたElementórProのテンプレートを使用します。
ヘッダーテンプレートの開発
WordPress管理パネルで、 [テンプレート]にカーソルを合わせ、[新規追加]をクリックしてヘッダーを作成します。
ルーティングされると、モーダルウィンドウがポップアップ表示されます。 ドロップダウンメニューから[ヘッダー選択テンプレートの作成。
これにより、Elementorエディターが起動します。 その後、選択できるテンプレートのリストが表示されます。 だからあなたにアピールするものを選んでください：
テンプレートを選択すると、Elementor編集セクションの上部に表示されます。
ロゴの作成：最初のステップは、ロゴを作成することです。 サイトのライブエディターでロゴを設定して、ヘッダーに配置します。 サイトIDをクリックしてロゴを選択します。
ロゴを決定したら、[公開。
Elementorインターフェースを更新すると、サイトのロゴがヘッダーに表示されます。
その後、必要な変更を加えることができます。
ヘッダーメニューに変更を加える
次にすべきことはメニューを変更することです。 メニューを生成した場合、テンプレートには自動的に次のものが組み込まれます。
メニュー構造は次のとおりです。ヘッダーテンプレートに反映されています。
メニューが複数ある場合は、必要に応じて内容を更新できます。
他のウィジェットと同じように、そのプロパティを編集できます。
さらにアイテムを追加する必要がある場合は、ヘッダーにセクションを追加できます。
ヘッダーといくつかのソーシャルメディアアイコンを追加することから始めましょう：
その後、好きな変更を加えることができます。 編集結果は次のとおりです。
ヘッダーパブリケーション
変更が完了したら、ヘッダーを公開できるようになりました。 の例では、サイト全体でヘッダーを使用するため、 amp条件の追加]を選択した後でその選択肢を選択します
そして、ここでの元だampル私たちのライブサイトからページの：
フッターの作り方
フッターテンプレートの開発
フッターを作成するプロセスは、ヘッダーを作成するプロセスとかなり似ています。 作成するには、次のような新しいフッターテンプレートを作成します。
次に、テンプレートを決定します。 フッターにはさまざまな形とサイズがあります。 会社情報が含まれているものもあれば、連絡フォームがあるものもあります。 要件に適したテンプレートを選択してください。
ウェブサイト用に選択したテンプレートは次のとおりです。
フッターの変更
編集を開始するとすぐにヘッダーが表示されます（すべてのページに表示される条件を設定した場合）。
必要に応じてフッターを変更します。 リビジョンは次のようになります。
終了後にフッターを公開します。
完成品
完成した結果は次のようになります。 現在、ヘッダーとフッターの両方が当社のWebサイトで使用されています。
応答性について、ヘッダーセクションとフッターセクションを調べます。
これは最も重要なフェーズであり、ヘッダーセクションとフッターセクションが応答することを確認する必要があります。 全幅メニューは通常モバイルビューには適していないため、デザインがモバイル画面にどのように表示されるかを知っておく必要があります。 Elementorサイドバーセクションの下部にあるレスポンシブスイッチは、モバイルバージョンとタブバージョンを変更できます。
ヘッダーとフッターの応答性をさまざまな方法でテストできます。 EXのためにampル、あなたはあなたのウェブページには可能な限り対応していることを確認するためにBrowserstack、CrossBrowserテスト、およびGoogleのリサイズなどのツールを使用することができます。 さまざまなデバイスを試して手動で行うこともできます。
物事を終わらせる
このガイドが、ElementorProを使用して独自のヘッダーセクションとフッターセクションを迅速に開発するのに役立つことを願っています。 WordPressには多くの機能がありますが、ヘッダーセクションとフッターセクションにいくつかの変更を加えるだけで、最終的にElementorProページビルダーで修正されます。 サイト要素をはるかに適切に制御できるため、サイトのビジョンをより適切に示すことができます。 さらに、無料のアドオンを使用することでElementorの機能が改善され、ユーザーはより高度な機能でWebサイトをカスタマイズできるようになりました。
