Elementorでヘッダーとヘッダーメニューを入れる方法

こんにちはモグえもんです！

今回はElementorでヘッダーとヘッダーメニューを挿入する方法をご紹介します！

無料プラグインElementorでは今までWordpressでは叶えることができなかったような意匠作成が簡単にできますが

ヘッダーやヘッダーメニューが入れられないことに困った人も多いのではないでしょうか？

残念ながらテンプレートのページタブのライブラリの中にヘッダーメニューを使った無料ページはなく・・・

ブロックタブ内でHeaderを探してもプロ版でしか使えないものばかりです。

他のサイトではブロックで「無料版で使えるヘッダーは一つだけ」と紹介されているところもありますが、テーマによって使えるものが制限されているのかもしれませんね。

私はLightningを使っていますが全滅です。

そこで見つけたのがHeader & Footer Builder for Elementorというプラグインです！

Header & Footer Builder for Elementorとは

Elementorをさらに強化するプラグインで、これを追加すればヘッダーとフッターの編集もできるようになります！

こちらをインストールするとElementorのウィジェット内に新たに

「HEADER ELEMENTS」という項目が追加されます。

サポートされているテーマ

アストラテーマ

GeneratePress
創世記
OceanWP

サポートされていないテーマだとインストールしても使えないかも

管理画面「外観」→「メニュー」の「メニュー設定」に「メニューの位置」と書かれています。

ここで「ヘッダーメニュー」「フッターメニュー」「モバイルメニュー」のどれを作成するか選びます。

（まだ複数選んだことがない・・・）

選んだら「メニューを保存」をクリックしましょう。

管理画面「固定ページ」→「新規作成」の画面に移ったら

Elementorで編集する前に画面右側の「ページ属性」の「テンプレート」を「Elementorキャンバス」にしましょう

サポートされているテーマをお使いの場合は必要ないですが

サポートされていないテーマを使っている場合、Elementor キャンバスを使うのは必須とのことです。

設定ができたら公開を押して、Elementorで編集しましょう

通常通り、ウィジェットメニューからナビゲーションのアイコンをドラッグアンドドロップするだけで、固定ページで作成していたメニューが自動でレイアウトできます！

次回ナビゲーションを全幅にする方法