Google chrome（グーグル ク...
続きを読む
Elementorで、プラグインを使用してヘッダーとフッターを無料で簡単に作る方法を紹介します。
プラグイン「Ultimate Addons for Elementor」を使用して作成します。
※2024年12月に「Elementor Header & Footer Builder 」は「Ultimate Addons for Elementor」に機能が統合されました！
Elementor Proを導入していなくても、Elementorでヘッダーとフッターの作成が可能です！
ヘッダーとフッターの作成は、無料で簡単に使えるプラグイン
「Ultimate Addons for Elementor (旧Elementor Header & Footer Builder）」を使用します。
↑ワードプレスのダッシュボードのメニューから「プラグイン」をクリックし、画面上部の「新規プラグインを追加」をクリックします。
↑検索欄に「elementor header」と入力すると、「Ultimate Addons for Elementor」が表示されるので、「今すぐインストール」をクリックします。
インストールが完了すると、「有効化」というボタンが表示されるので、クリックしてプラグインを有効化します。
↑プラグインを有効化すると、メニューの中に「UAE」が表示されています！
この「UAE」が「Ultimate Addons for Elementor」のことです。
↑「UAE」をクリックし、上部に表示されている「Header & Footer Builder」をクリックします。
↑「Header & Footer Builder」の画面まで進んだら、「新規追加」をクリックします。
↑編集画面が表示されたら、タイトルに「ヘッダー（またはフッター）」などわかりやすい名前をつけます。
テンプレートのタイプでヘッダーの場合は「ヘッダー」、フッターの場合は「フッター」を選択します。
↑「表示」を「サイト全体」に設定すると、全てのページでヘッダーが表示されます。
ここまで作成したら、「下書き保存」をクリックして一旦保存します。
↑フッターも「追加」をクリックして、ヘッダーと同様の手順で作成します。
↑ヘッダー（またはフッター）の編集画面で「Elementorで編集」ボタンをクリックします。
↑新たなセクション（コンテナ）を作成し、カラム数を選択します。
今回は、「キャッチコピー」、「ロゴ」、「メニュー」で配置したいので３カラムの構造を選択します。
↑それぞれのカラムに要素を追加していきます。
メニューは、「Navigation Menu」ウィジェットを選択すると簡単にメニューが配置できます。
↑ただし、メニューはあらかじめ作成していなければ表示されません。
メニューの作成は、ワードプレスのメニューから「外観」→「メニュー」で作成できます。
「メニューを保存」のクリックをお忘れなく👍
↑メニューの見た目のカスタマイズは、「Navigation Menuを編集」の「スタイル」で可能です。
メニューボタンの間隔や文字の色（通常時、マウスオーバー時など）を細かく設定できます。
↑最後に、左下の「公開」ボタンをクリックします。
↑フッターも、ヘッダーと同じ手順で作成します。
フッターは、セクション（コンテナ）の背景色を変更し、ロゴ、プライバシーポリシーページのリンク、Copyrightを縦に１カラムで記載してみました。
↑ヘッダーとフッターが完成しました！
今回は、プラグイン「Ultimate Addons for Elementor (旧Elementor Header & Footer Builder）」を使って、無料で簡単にヘッダーとフッターを作成する方法を紹介しました。
Elementorを使ってウェブサイトやブログを制作されている方はぜひこの方法を試してみてください！
「Ultimate Addons for Elementor 」を使って作成したヘッダーを固定する方法は、こちら↓の記事をご覧ください！
2025-04-29
Tuesday
20代後半のWEBマーケター&WEBデザイナー
新卒で商社に入社しWEBマーケターとして勤務後、
カナダに渡航し現地企業のWEB制作と
マーケティング支援を行う。
現在は帰国し某企業でWEBマーケターをしています。
自分がWEBマーケター・WEBデザイナーとして
仕事をしているときに気になった事を
調べた経緯を残しておきたいなという思いと、
それを誰かのお悩み解決に
役立てることができたらいいなと思っています。
“ネコとレモンのWEBマーケ＆デザインブログ”
みたいな感じで覚えてもらえたら嬉しいです😺🍋
Google chrome（グーグル ク...
続きを読む
AIがあなたの代わりにブログを書いてくれ...
続きを読む
