通常、ヘッダーやフッターを作成するには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を使用している（テーマにはヘッダーが用意されていないので。）
という方は、ぜひ使ってみてください。
headerの編集、まさに知りたかった情報でした!! ありがとうございます。
大変助かりました。
コメントありがとうございます！お役に立ててよかったです。とても便利なプラグインですよね。
はじめまして。設定方法がとても参考なります！ありがとうございます。質問させていただきたいのですが、いくつかページがある中でお問い合わせページのみにヘッダーを適用する場合はどのように設定すれば良いのでしょうか？
コメントありがとうございます！「Display On」で「Specific Pages / Posts / Taxonomies, etc.」を選択して、お問い合わせページのタイトルを検索&選択すれば、お問い合わせページだけでヘッダーを表示できます。
できました！ご丁寧にどうもありがとうございました！
現在企業サイトを作っておりまして、既に別でtopページを固定ページとして作っていたのですが、
ヘッダーをこの方法で作ると、新規のページにまっさらな状態からスタートしてしまいますが、その場合、その今まで
作ったtopページにこのヘッダーを反映することはできるのでしょうか？また、１ページのサイトなのですが、最新ニュースの
部分のみ、詳細ページにとび別のページとして開きますが、こちらにも同様のヘッダーが表示されるようできるのでしょうか？御願いします
コメントありがとうございます！まず、ヘッダーを作成する際に、「Display On」で「Entire Website」を選択します。さらに、Elementorでページを作成する時に、左下の設定（ギアアイコン）から「ページレイアウト」を「Elementor 全幅」にしてみてください。ヘッダーが反映されるはずです。