Elementor Header & Footer Builderの使い方

Elementor Proの『テーマビルダー』を使わなくても、Elementorの無料版でHeaderやFooter、サイトのコンテナ、ウィジェットなどを1箇所で管理できることをご存知ですか？
実は『Elementor Header & Footer Builder』というプラグインを使うと、ページ毎に修正を加える必要がなく、1ヵ所を修正することでサイト全体に反映することができるようになります。

この記事では、『Elementor Header ＆ Footer Builder』の使い方を説明します。

Elementor Proの『テーマビルダー』についてはこちらの記事を見てください。
>>Elementor Pro『テーマビルダー』の基本

Elementor Header & Footer Builderをインストールする

まずは、WordPressの『プラグイン』メニューから『新規プラグインを追加』をクリックします。
『Elementor Header & Footer Builder』を検索し、『今すぐインストール』後、有効化します。

実は『Elementor Header & Footer Builder』のプラグインは、WordPressのテーマ『Astra』を作っている会社が作っています。
今回は『Astra』で作られたサイトのヘッダーフッターを、このプラグインを使って作り変えていきます。

テーマの既存ヘッダーフッター

ヘッダーフッターは、WordPressテーマによって既存で作成されています。
今回のテーマは『Astra』なので、Astraのヘッダーフッタービルダーで作成されています。
この部分を『Elementor Header & Footer Builder』を使って作り変えていきます。

基本的な使い方

Elementor Header & Footer Builderを開く

『Elementor Header & Footer Builder』を開くには、『外観』から『Elementor Header & Footer Builder』をクリックします。

『ADD NEW』をクリックします。

この画面が表示されますが、アンケートなので今回は『Skip』します。

Elementor Header ＆ Footer Optionsの設定

今回はヘッダーを例に作成していきますが、フッターやBefore Footerも同じ手順で作成できます。

Type of Template

タイトルにわかりやすい名前をつけ、『Type of Template』（どのパーツを作るか）は今回は『Header』を選びます。

Display On

『Display On』はどこに表示させるかを設定できます。
『Display On』には次のオプションの選択肢があります。

今回は『Entire Website』（全てのページ）を選択します。

『下書き保存』をクリックし、『Elementorで編集』をクリックします。

Elementorで編集する

Elementor Header & Footer Builder ウィジェット

Elementor編集画面に入り、ウィジェットを下にスクロールしていくと、『Elementor Header & Footer Builder』ウィジェットが表示されます。

『Elementor Header & Footer Builder』ウィジェットには、ヘッダーやフッターを作成するのに適したウィジェットが準備されています。

コンテナについて

今回はコンテナは『Flexbox』で作成していきます。
コンテナについては『Elementorのコンテナウィジェットの使い方【基礎】』を見てください。

ヘッダーを構成するウィジェットを入れる

ヘッダーに入れたいウィジェットを配置していきます。

ウィジェットはコンテナにドラッグで入れることができます。

Navigation Menu

『Navigation Menu』をドラッグします。

『Navigation Menu』ウィジェットでは、表示させたいメニューを選択することができます。

レイアウトの設定も可能です。

『Responsive』設定では、ブレークポイントやメニューアイコンの設定ができます。

スタイルタブではフォントサイズやHover Effect、Animationなど細かく設定することができます。

『Navigation Menu』以外にも、『Site LOGO』や『Site Title』、『Copylight』や『Search』など便利なウィジェットが準備されています。

Elementor Header & Footer Builder ウィジェット以外

Elementor Header & Footer Builderウィジェット以外のウィジェットも同じく入れる事ができます。

公開する

ヘッダーの編集が終わったら『公開』をクリックします。

実際のページを確認すると、WordPressテーマではなく、Elementor Header & Footer Builderで作成したヘッダーが表示されました。

今回は『Entire Website』（全てのページ）で表示させる設定になっているので、他のページでもElementor Header & Footer Builderで作成したヘッダーが表示されます。

Elementor Header & Footer Builder ショートコードの活用

Elementor Header & Footer Builderでテンプレートを作ると、『Shortcode』が生成されます。
この『Shortcode』を使う事で、Elementor Header & Footer Builderで作成したテンプレートを様々な場所で活用することができます。
Elementor Header & Footer Builderで作成したパーツを修正する場合、この『Shortcode』を使うと個々のパーツを修正する必要はなく、1箇所修正するだけでパーツを使っている全箇所に反映することができます。

特定のページのみヘッダーの上に要素を追加する

例えば、求人情報のページだけヘッダーの上にテキストを表示させたい、などの場合にショートコードを使って作成する手順をみていきましょう。

先ほど作成したヘッダーの『Shortcode』をコピーします。

『ADD NEW』をクリックします。

Type of Template

先ほどと同じく、任意のタイトルを入力し、『Type of Template』は『Header』を選択します。

Display On

今回、特定のページにのみ表示させたいので、選択肢一番下の『Specific Pages / Posts / Taxonomies,etc.』を選択します。

今回作成するヘッダーを入れるページ名を入力して表示されたページ名を選択します。

表示させるページ名が選択されました。
この設定にすると、『求人情報ヘッダー』は『求人情報』ページでのみ表示されます。
複数ページに表示させたいときは、『Display On』は複数入力することができます。

先ほどと同じく、『下書き保存』をクリックした後、『Elementorで編集』をクリックします。

Elementorで編集する

Elementor編集画面に入ったら、コンテナ内に『ショートコード』ウィジェットをドラッグします。

ショートコード入力欄に先ほどコピーしていたショートコードをペーストすると、作成したヘッダーが表示されます。

今回求人情報のページのみヘッダー上部にメッセージを入力させたいので、目立つように赤背景のテキストを挿入しました。

編集が終わったら『公開』をクリックします。

求人情報のページを表示確認すると、今回テキストを追加した『求人情報ヘッダー』が表示されました。
他のページは通常の『ヘッダー』が表示されます。

ヘッダーに変更を加える

最初に作成した『ヘッダー』に変更を加えた時の、『求人情報ヘッダー』との連動について確認していきます。

『Elementor Header & Footer Builder』で作成した『ヘッダー』に、変更を加えます。
今回はロゴの横にイラスト画像を追加しました。

『公開』をクリックします。

ヘッダーに修正内容が反映されました。

求人情報ページを確認すると、『求人情報ヘッダー』にもロゴの横にイラストが表示されました。
ショートコードを使う事で、『ヘッダー』に変更を加えると『求人情報ヘッダー』を直接編集しなくても変更が連動されます。
直接編集する手間が省けるので、ヘッダーやフッターの拡張が便利になります。

ページパーツ（ブロック）の作成

ヘッダーやフッターだけではなく、ページパーツも『Elementor Header & Footer Builder』で作成することができます。

『Elementor Header & Footer Builder』画面で『ADD NEW』をクリックします。

任意のタイトルを入力し、『Type of Template』は『Custom Block』を選択します。
Custom Blockを選択すると、『Shortcode』が表示されます。

『下書き保存』をクリックし、『Elementorで編集』をクリックします。

Elementorでページパーツ（ブロック）を作る

Elementor編集画面で任意のページパーツを作成します。

編集が終わったら『公開』ボタンをクリックします。

Shortcodeの活用

『Elementor Header & Footer Builder』の編集画面に戻り、先ほど作成した『お問合せブロック』の『Shortcode』をコピーします。

表示させたいページのElementor編集画面を開き、『ショートコード』ウィジェットをドラッグして挿入します。

先ほどコピーしたショートコードをペーストすると、作成した『お問合せブロック』が表示されました。
複数個所に表示させる場合もショートコードをペーストするのみです。

求人情報ページにもショートコードをペーストして、『お問合せブロック』を挿入しました。
実際に挿入したページを確認すると、『お問合せブロック』が表示されています。

Elementorでページパーツ（ブロック）を編集する

『お問合せブロック』の背景を白色に変更します。

編集が終わったら『公開』ボタンをクリックします。
『お問合せブロック』を挿入したページを確認します。

どちらのページも『お問合せブロック』の背景が白色に変更されています。

まとめ

このプラグイン『Elementor Header & Footer Builder』があれば、Elementor Proがなくても自由にヘッダーやフッター、ページパーツを作ることができます。
また、ショートコードを活用することで個々のページを直接編集しなくても変更が連動されます。

とても便利で作業時間の短縮にも繋がりますので、是非試してみてください。

Elementor Header & Footer Builder

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。