通常、ヘッダーやフッターを作成するにはElementor Proを契約、テーマビルダーという機能を使用する必要があります。しかし、「Elementor – Header, Footer & Blocks Template」という無料のプラグインを使うことで、無料のElementorでもヘッダー・フッターを作成することができます。
Elementor Proは使いたくないけど、ドラッグ&ドロップで、ヘッダーとフッターを表示させたいと思っている方は、参考にしてみてください。
Step1. Elementor – Header, Footer & Blocks Templateプラグインをインストールする
まずは、「プラグイン」の「新規追加」から「Elementor – Header, Footer & Blocks Template」プラグインを「今すぐインストール」して「有効化」まで終わらせましょう。
Step2. Elementor – Header, Footer & Blocks TemplateでElementorが使えるように設定する
インストールが終わったら、「Elementor」の「設定」に移動し、「Elementor – Header, Footer & Blocks Template」にチェックを入れて、「変更を保存」します。チェックを入れないと、Elementorでヘッダーをデザインできませんので、必ず確認しておいてください。
Step3. ヘッダーを新規追加する
では、実際にヘッダーを作成していきたいと思います。「外観」の「Header, Footer & Blocks」に移動し、「Add New」ボタンをクリックします。
Step4. ヘッダーの基本設定をする
まず、タイトルをつけ、「Elementor – Header, Footer & Blocks Options」では、「Type of Template」で「Header」を選びます。もしヘッダーではなく、フッターを作成したいのであれば、「Footer」を選択しましょう。
その下にある「Display On」ではどのページに表示するのかを選択します。サイト全体に同じヘッダーを表示する場合は「Entire Website」を選択します。「Add Display Rule」では、特定のページ、カテゴリーにだけ表示する設定、「Add Exclude Rule」では逆に除外するページ、カテゴリーなどを設定することができます。
終わったら、いったん設定を保存して、「Elementorで編集」ボタンをクリックしてデザインしていきます。
Step5. ヘッダーをデザインする
それでは、あとは自由にヘッダーをカスタマイズしてみてください。
「Elementor – Header, Footer & Blocks Template」をインストールすることによって、上の画像のように、「HEADER, FOOTER & BLOCKS」というセクションが表示され、
- Retina Image：レティナ用の画像
- Copyright：コピーライト（著作権表記）
- Navigation Menu：ナビゲーションメニュー
- Page Title：ページタイトル
- Site Title：サイトタイトル
- Site Tagline：サイトのキャッチコピー
- Site Logo：サイトロゴ
- Search：検索アイコン
- Cart：カートアイコン（WooCommereをインストールしている場合に使用します。）
これら9つのウィジェットが使用できます。Pro版じゃないと使えないダイナミックコンテンツのウィジェットが使えるのは大きなメリットだと思います。例えば、Site Logoを追加すると、「外観」の「カスタマイズ」でサイトのロゴを変更すれば、その度に自動的に画像が切り替わります。
今回は、シンプルに左側にロゴ、右側にナビゲーションメニューを設定したヘッダーを作成してみました。
ロゴはシンプルに「Site Logo」を追加しただけですが、「Navigation Menu」はPro版のものと若干使い方が異なります。「Last Menu Item」の項目で「Button」を選択すると、メニューの一番右にあるメニューをボタン形式で表示することができます。
ちなみに、メニューは、「外観」の「メニュー」で作成することができます。
また、一番右のメニューをボタン形式で表示できるとお伝えしましたが、ボタン形式にしたいものは、メニューを作成する時点で、一番下に追加したおきましょう。
※Elementorの編集画面では、左下の「ページレイアウト」を「Elementor 全幅」に切り替えましょう。そのレイアウトであれば、ヘッダーやフッターを表示したままにすることができます。
まとめ
今回は、Elementor Proを使わずにヘッダーやフッターが作成できるElementor – Header, Footer & Blocks Templateというプラグインの使い方をご紹介してきました。
- Elementor Proを使いたくない
- 無料でヘッダー・フッターを作成したい
- Hello Themeを使用している（テーマにはヘッダーが用意されていないので。）
という方は、ぜひ使ってみてください。
