【Elementorを最強にするプラグインをご紹介します！】Elementor Header & Footer Builder
記事コラム
あけましておめでとうございます。2024年もよろしくお願いいたします。
webデザイナーのLeycoです。
「すべての人がwebを使って自由に表現できる環境を作る」ことをモットーに、webデザイナーとしてLPやホームページ制作など、web制作全般を行なっております。
前回までElementorを使ったwebページの制作方法をご紹介してきました。
Elementorは無料版でもわかりやすく、簡単にサイトを作れるので、とても便利です。
ただ、Elementor無料版ではちょっと作りづらいのが「ヘッダー」。
（前回まで作っていたwebページにはヘッダーはロゴだけになっていました）
使っているテーマのヘッダーをそのまま使う場合が多いかもしれません。
ただ、Elementor無料版でも、プラグインを組み合わせてヘッダーをカスタマイズすることができます。
今回は、ヘッダー作成に便利なプラグイン「Elementor Header & Footer Builder」をご紹介します。
できるだけコストをおさえてwebページを作りたい方は、ぜひご覧ください。
【はじめに】Elementor Header & Footer Builderプラグインをインストールしましょう
まずはWordPressの管理画面からプラグインをインストールします。
メニューの「プラグイン」から「プラグインを追加」を選び、キーワード検索に「Elementor Header & Footer Builder」と入力しましょう。
見つかったら、「今すぐインストール」→「有効化」を選択します。
有効化まで完了していると、「メニュー」の「外観」に項目が追加されている
ので確認してみてください。
これでプラグインの準備ができました。
【Elementor無料版でヘッダーを作る方法①】新規ヘッダーを追加します
「メニュー」→「外観」→「Elementor Header & Footer Builder」を選択します。
上にある「ADD NEW」を選んで、新しいヘッダーを作りましょう。
（ちょっとしたアンケート画面が出ますが、スキップできます。）
このような画面になったら、
・名前→お好きな名前でOK
・Type of Template→Header
にしておきます。
最後に右側の「公開」ボタンを押すと、ヘッダーの完成です。
【Elementor無料版でヘッダーを作る方法②】ヘッダーの中身を作ります
先ほどの画面の「Elementorで編集」を選びます。
右下の「設定」から、「固定ページレイアウト」を「Elementor Canvas」にすると、自由にヘッダーを作ることができます。
ヘッダーを作る時によく使うウィジェットを２つご紹介。
・「Site Logo」ロゴ画像を挿入できます
・「Navigation Menu」メニューを追加できます
こちらの２つのウィジェットを組み合わせて、次のようなヘッダーを作ることができました。
【Elementor無料版でヘッダーを作る方法③】作ったヘッダーをページに追加します
ヘッダーが完成したら、もう一度「メニュー」→「外観」→「Elementor Header & Footer Builder」を選択して、こちらの画面を表示させます。
こちらの画面で水色になっている部分をコピーします。
次に、ヘッダーを追加したいページの編集画面に移動してください。
「ショートコード」というウィジェットを選択して、右の画面に追加します。
左の「ショートコードを入力」に、先ほどコピーした部分をペーストします。
Elementor Header & Footer Builderで作成したヘッダーが、そのまま追加されました。
【まとめ】Elementor Header & Footer Builderを使えば簡単にヘッダーが作れます
ここまでご覧いただきありがとうございます。
ぜひ「Elementor Header & Footer Builder」を使って、その便利さを実感してみてくださいね。
【お知らせ】「自力でヘッダーの完成は難しそう…」という方へ
こちらの記事でご説明しきれなかった、
・サイトロゴの登録
・グローバルメニューの作り方
・ページ内ナビの作り方
・レスポンシブ対応の方法
などに関するブログを、今後有料でご紹介する予定です。
もし「自力でちょっと作れなさそう…」という方は、ぜひご検討ください。
これからもどうぞよろしくお願いいたします。
また、「丸ごとwebページを作ってほしい」という方は、こちらのサービスもどうぞご覧ください。
