Web サイトのヘッダーとフッターは重要な要素です。ほとんどの場合、ヘッダーには、Web サイトのさまざまな部分への移動を簡単にするナビゲーション リンクが提供されます。一方、フッターには、いくつかの例を挙げると、会社の住所や連絡amp情報など、Web サイト訪問者が必要とする可能性のある重要な情報が含まれています。
ヘッダーとフッターは、WordPress 上のユーザーの現在のテーマによって提供されます。これらは通常、適切に設計されており、ほとんどの用途に適しています。ただし、テーマをカスタマイズしたい場合は、コードを変更する必要があります。このような場合には、Page Builderpluginが役立ちます。これらを使用すると、コードを知らなくても Web ページ コンポーネントを作成および変更できます。
このチュートリアルでは、Web サイトのヘッダーとフッターを作成する方法を説明します。 Elementor Pro が使用されます (Elementor の基本バージョンには、これらのコンポーネントを作成するために最も重要な機能が含まれていないため)。したがって、Elementor Pro をダウンロードして、オンになっていることを確認してください。
Elementor は最も高度なページ ビルダーであり、ユーザーはプレミアム要素を使用して豪華なデザインとレイアウトを作成できます。コーディングに関する予備知識のない初心者にとっては非常に有益です。 Elementor のドラッグ アンド ドロップ エディターを使用すると、ユーザーはウィジェットやアイテムを移動できます。
Elementor は、ユーザーがモードを切り替えることなくページがどのように表示されるかを確認できるビジュアル ページ ビルダーです。
Elementor を使用するもう 1 つの説得力のある議論は、ほとんどの作業はコストをかけずに完了できるということです。無料版でも十分なサイト編集機能を提供できます。ただし、ニーズに最も適したものを選択できるように、無料版と有料版の両方について説明します。
以下は、Elementor の価値のある重要な側面の一部です。
独自のヘッダーを開発する前に、目的のヘッダー セクションとフッター セクションの一般的な配置を決定しておくと役に立ちます。事前に作成されたヘッダー セクションのレイアウトを見ると、多くの選択肢が表示される場合があります。
さまざまなヘッダー セクションから選択できます。最も一般的でモダンな外観のヘッダーには、左端隅にサイトのロゴ、中央にナビゲーション バー、右側に検索バー セクションがあります。
可能性は無限にあり、好きなレイアウトを構築できます。
私は No.7 の既成ヘッダー テンプレートを選択しました。これは、WordPress Web サイトでヘッダーを使用する最も一般的で簡単なアプローチです。ヘッダー テンプレート名をコピーして、 [テンプレート] > [ヘッダー] > [テンプレートの検索] に貼り付け、コピーしたヘッダー名を貼り付けます。
必要なヘッダー テンプレートが見つかったら、「Elementor で編集」を選択すると、Elementor Pro ヘッダー ビルダー セクションが表示されます。
このパーティーを始めましょう。
ウェブページの上部は「ウェブサイトヘッダー」と呼ばれます。ヘッダーは通常、Web サイト全体で同じです。ただし、一部の Web サイトでは、サイトの異なる部分に異なるヘッダーを使用します。
ヘッダーのデザインは、ユーザーがホームページ、概要ページ、その他の個別のコンテンツにアクセスしたかどうかにかかわらず、ユーザーに Web サイトの第一印象を与えます。また、デザインが優れていれば、ユーザーの注意を引き付け、スクロールして読み続けたくなるでしょう。
ヘッダーは、会社のブランド アイデンティティの宣伝にも役立ちます。
会社のロゴ、フォント、色、全体的なブランド言語などの機能を使用しています。
サイト ナビゲーション、サイト検索、ショッピング カート (販売サイト用)、コール トゥ アクション (CTA) ボタンなど、ユーザー エクスペリエンスを向上させ、コンバージョン率を高めるその他の機能はすべてヘッダーに含まれています。
フッターは、Web ページの下部に表示されるセクションです。これらは通常、ヘッダーと同様に、Web サイト全体のすべてのページと投稿に常に表示されます。
フッターはサイトのすべてのページに表示されるため、見落とされることがよくありますが、これは可能性の無駄です。これらはヘッダーにとっても同様に重要です。
フッターのデザインには、選択した設定に応じて、ニュースレターの登録、著作権情報、利用規約とプライバシー、サイトマップ、連絡先情報、地図、Web サイトのナビゲーションなど、役立つ重要な情報を表示できます。
このセクションでは、カスタマイズされたヘッダーを作成します。それが恐ろしいと思われても心配しないでください。ゼロから始めるつもりはありません。代わりに、Elementor のデザイン チームによってデザインされた Elementor Pro のテンプレートを使用します。
WordPress 管理パネルで、 「テンプレート」、 「新規追加」ヘッダーを作成します。
ルーティングされると、モーダル ウィンドウがポップアップします。からヘッダーを選択し、ヘッダーに名前を付けて、「テンプレートの作成」をクリックします。
これにより、Elementor エディタが起動します。その後、選択できるテンプレートのリストが表示されます。興味のあるものを 1 つ選んでください。
テンプレートを選択すると、Elementor 編集セクションの一番上に表示されます。
ロゴの作成:最初のステップはロゴを作成することです。サイトのライブ エディターでロゴをヘッダーに配置するように設定します。 [サイト ID] をクリックしてロゴを選択します。
ロゴを決定したら、 [公開]。
Elementor インターフェースを更新すると、サイトのロゴがヘッダーに表示されるはずです。
その後、必要な変更を加えることができます。
次にやるべきことはメニューを変更することです。メニューを生成した場合は、テンプレートに自動的にメニューが組み込まれます。
メニュー構造は次のとおりです。ヘッダー テンプレートに反映されていることがわかります。
複数のメニューがある場合は、必要に応じて内容を更新できます。
他のウィジェットと同様に、そのプロパティを編集できます。
さらに項目を追加する必要がある場合は、ヘッダーにさらにセクションを追加できます。
まずはヘッダーとソーシャル メディア アイコンを追加しましょう。
その後、必要に応じて変更を加えることができます。編集結果は次のとおりです。
ヘッダーの変更が完了したら、ヘッダーを公開できるようになります。ampではサイト全体でヘッダーを使用するため、[条件の追加] を選択した後にヘッダーを選択します。
以下は、実際のサイトのページのampです。
フッターを作成するプロセスは、ヘッダーを作成するプロセスとかなり似ています。これを作成するには、次のような新しいフッター テンプレートを作成します。
次にテンプレートを決めます。フッターにはさまざまな形やサイズがあります。企業情報が含まれているものもあれば、問い合わせフォームがあるものもあります。要件に適したテンプレートを選択してください。
私たちのウェブサイト用に選択したテンプレートは次のとおりです。
編集を開始するとすぐにヘッダーが表示されます (すべてのページにヘッダーが表示されるという条件を設定した場合)。
必要に応じてフッターを変更します。私たちのリビジョンは次のようになります。
完了したらフッターを公開します。
完成した結果は次のようになります。ヘッダーとフッターの両方が Web サイトで使用されるようになりました。
これは最も重要なフェーズであり、ヘッダー セクションとフッター セクションが応答することを確認する必要があります。通常、全幅メニューはモバイル表示には適さないため、デザインがモバイル画面でどのように表示されるかを理解しておく必要があります。 Elementor サイドバー セクションの下部にある応答性の高いスイッチを使用して、モバイル バージョンとタブ バージョンを変更できます。
ヘッダーとフッターの応答性をさまざまな方法でテストできます。amp、Browserstack、CrossBrowser Testing、Google Resizer などのツールを使用して、Web ページの応答性を可能な限り高めることができます。さまざまなデバイスを試して手動で行うこともできます。
このガイドが、Elementor Pro を使用して独自のヘッダーおよびフッター セクションを迅速に開発するのに役立つことを願っています。 WordPress には多くの機能がありますが、ヘッダーとフッターのセクションでいくつかの変更のみが可能で、最終的には Elementor Pro ページ ビルダーで修正されます。サイトの要素をより適切に制御できるようになり、サイトのビジョンをより適切に示すことができるようになりました。さらに、無料のアドオンを使用することでElementorの機能が向上し、ユーザーはより高度な機能でWebサイトをカスタマイズできるようになりました。
市場で最も人気のある WordPress テーマの 2 つは、Astra と OceanWP です。プロ…
オンライン ストアのセットアップに関しては、WooCommerce が頼りになるpluginです。それ…
当社独自のページ ビルダーである Avada Builder は、次の 2 つのインターフェイスで利用できるようになりました。Avada…