絞れば、出てくる、アイディア。

【Elementor】ヘッダーとフッターの作り方・ヘッダーの固定方法

【Elementor】ヘッダーとフッターの作り方

Elementorで、プラグインを使用してヘッダーとフッターを無料で簡単に作る方法を紹介します。
プラグイン「Elementor Header & Footer Builder」を使用して作成します。
Elementor Proを導入していなくても、Elementorでヘッダーとフッターの作成が可能です!

1. プラグインのインストール

ヘッダーとフッターの作成は、無料で簡単に使えるプラグイン「Elementor Header & Footer Builder」を使用します。

ヘッダーとフッターの作成は、無料簡単に使えるプラグイン「Elementor Header & Footer Builder」を使用します。

ワードプレスのダッシュボードのメニューから「プラグイン」をクリックし、画面上部の「新規プラグインを追加」をクリックします。

↑ワードプレスのダッシュボードのメニューから「プラグイン」をクリックし、画面上部の「新規プラグインを追加」をクリックします。

検索欄に「Header」と入力すると、「Elementor Header & Footer Builder」が表示されるので、「今すぐインストール」をクリックします。

↑検索欄に「Header」と入力すると、「Elementor Header & Footer Builder」が表示されるので、「今すぐインストール」をクリックします。

インストールが完了すると、「有効化」というボタンが表示されるので、クリックしてプラグインを有効化します。

プラグインを有効化すると、メニューの「外観」の中に「Elementor Header & Footer Builder」が表示されています!

↑プラグインを有効化すると、メニューの「外観」の中に「Elementor Header & Footer Builder」が表示されています!

2. ヘッダー・フッターの作成

メニューから「外観」→「Elementor Header & Footer Builder」をクリックします。 そして画面上部の「ADD NEW」をクリックします。

↑メニューから「外観」「Elementor Header & Footer Builder」をクリックします。
そして画面上部の「ADD NEW」をクリックします。

ADD NEWをクリックしたら、編集画面が表示されます。タイトルに「ヘッダー(またはフッター)」などわかりやすい名前をつけます。Type of Template でヘッダーの場合は「Header」、フッターの場合は「Footer」を選択します。

ADD NEWをクリックしたら、編集画面が表示されます。
タイトル「ヘッダー(またはフッター)」などわかりやすい名前をつけます。

Type of Template でヘッダーの場合は「Header」、フッターの場合は「Footer」を選択します。

「Display On」を「Entire Website」に設定すると、全てのページでヘッダーが表示されます。

「Display On」「Entire Website」に設定すると、全てのページヘッダーが表示されます。
ここまで作成したら、「下書き保存」をクリックして一旦保存します。

↑フッターも「ADD NEW」をクリックして、ヘッダーと同様の手順で作成します。

3. Elementorで編集する

ヘッダー(またはフッター)の編集画面で「Elementorで編集」ボタンをクリックします。

↑ヘッダー(またはフッター)の編集画面「Elementorで編集」ボタンをクリックします。

新たなセクション(コンテナ)を作成し、カラム数を選択します。 今回は、「キャッチコピー」、「ロゴ」、「メニュー」で配置したいので3カラムの構造を選択します。

新たなセクション(コンテナ)を作成し、カラム数を選択します。
今回は、「キャッチコピー」、「ロゴ」、「メニュー」で配置したいので3カラムの構造を選択します。

それぞれのカラムに要素を追加していきます。 メニューは、「Navigation Menu」ウィジェットを選択すると簡単にメニューが配置できます。

↑それぞれのカラムに要素を追加していきます。
メニューは、「Navigation Menu」ウィジェットを選択すると簡単にメニューが配置できます。

ただし、メニューはあらかじめ作成していなければ表示されません。 メニューの作成は、ワードプレスのメニューから「外観」→「メニュー」で作成できます。「メニューを保存」のクリックをお忘れなく。

↑ただし、メニューはあらかじめ作成していなければ表示されません。
メニューの作成は、ワードプレスのメニューから「外観」「メニュー」で作成できます。
「メニューを保存」のクリックをお忘れなく👍

メニューの見た目のカスタマイズは、「Navigation Menuを編集」の「スタイル」で可能です。 メニューボタンの間隔や文字の色(通常時、マウスオーバー時など)を細かく設定できます。

メニューの見た目のカスタマイズは、「Navigation Menuを編集」「スタイル」で可能です。
メニューボタンの間隔文字の色(通常時、マウスオーバー時など)を細かく設定できます。

最後に、左下の「公開」ボタンをクリックします。

↑最後に、左下の「公開」ボタンをクリックします。

フッターも、ヘッダーと同じ手順で作成します。 フッターは、セクション(コンテナ)の背景色を変更し、ロゴ、プライバシーポリシーページのリンク、Copyrightを縦に1カラムで記載してみました。

フッターも、ヘッダーと同じ手順で作成します。
フッターは、セクション(コンテナ)の背景色を変更し、ロゴプライバシーポリシーページのリンクCopyrightを縦に1カラムで記載してみました。

ヘッダーとフッターが完成しました!

ヘッダーフッターが完成しました!

まとめ🍊

今回は、プラグイン「Elementor Header & Footer Builder」を使って、無料で簡単にヘッダーとフッターを作成する方法を紹介しました。
Elementorを使ってウェブサイトやブログを制作されている方はぜひこの方法を試してみてください!

「Elementor Header & Footer Builder」を使って作成したヘッダーを固定する方法は、こちら↓の記事をご覧ください!