Google chrome(グーグル ク...
続きを読むElementorで、プラグインを使用してヘッダーを固定する方法を紹介します。
スクロールしてもヘッダーを常に画面上部に表示させることができます。
プラグイン「Sticky Header effects for Elementor」を使用して作成します。
Elementor Proを導入していなくても、Elementorで固定ヘッダーを作ることができます!
※テーマは「Hello Elementor バージョン 3.0.0」の使用を想定しています。
まず初めに、今回は簡単&無料でヘッダーを作成できるプラグイン「Elementor Header& Footer Builder」でヘッダーを作成している状態からスタートします。
ヘッダーをまだ作っていない方は、こちら↓の記事を参考にヘッダーを作成してみてください!
ヘッダーの固定は、無料で簡単に使えるプラグイン「Sticky Header Effects for Elementor」を使用します。
ワードプレス公式サイト:Sticky Header Effects for Elementor
↑ワードプレスのダッシュボードのメニューから「プラグイン」をクリックし、画面上部の「新規プラグインを追加」をクリックします。
↑検索欄に「Sticky Header」と入力すると、「Sticky Header Effects for Elementor」が表示されるので、「今すぐインストール」をクリックします。
インストールが完了すると、「有効化」というボタンが表示されるので、クリックしてプラグインを有効化します。
↑プラグインの有効化が完了したら、ワードプレスのメニューから「外観」→「Elementor Header & Footer Builder」を選択します。
※Elementor Header & Footer Builderであらかじめヘッダーを作っておきます。
作り方はこちらの記事で詳しく解説しています!
「ヘッダー」にマウスをかざして、「Elementorで編集」をクリックします。
↑Elementorの編集画面に入ったら、ヘッダーのコンテナ(セクション)を選択し、「高度な設定」をクリックします。
そして、下の方にある「Sticky Header Effects」をクリックします。
↑Sticky Header Effects の Enableを「ON」にして、更新ボタンをクリックします。
↑見た目を確認します。ヘッダーが固定されました!
ヘッダーの固定はできましたが、ヘッダーの背景が透明だと場合によってはメニューなどが見にくくなってしまいます。
ヘッダーに背景色を設定することによって、解決することができます!
↑ヘッダーのコンテナ(またはセクション)を選択した状態で、「スタイル」をクリックし、背景のBackground Typeで一番右側の筆のようなマーク(Classic)をクリックします。
その下の「色」でヘッダーの背景色を設定できます。
↑ヘッダーの背景色を設定すると、ヘッダーが見やすくなりました!
↑ヘッダーの背景の透明度は、「背景」→「Background Type」から、カラーピッカーから一番下のスライダーで設定できます。
今回は、プラグイン「Sticky Header effects for Elementor」を使って、無料で簡単にヘッダーを固定する方法を紹介しました。
Elementor Header & Footer Builderと組み合わせて、ぜひ活用してみてください。
2025-02-14
Friday
20代後半のWEBマーケター&WEBデザイナー
新卒で商社に入社しWEBマーケターとして勤務後、
カナダに渡航し現地企業のWEB制作と
マーケティング支援を行う。
現在は帰国し某企業でWEBマーケターをしています。
自分がWEBマーケター・WEBデザイナーとして
仕事をしているときに気になった事を
調べた経緯を残しておきたいなという思いと、
それを誰かのお悩み解決に
役立てることができたらいいなと思っています。
“ネコとレモンのWEBマーケ&デザインブログ”
みたいな感じで覚えてもらえたら嬉しいです😺🍋
Google chrome(グーグル ク...
続きを読むWebマーケターへの転職コースがある「マ...
続きを読む