絞れば、出てくる、アイディア。

Elementor無料版でヘッダーを固定する方法

Elementor無料版でヘッダーを固定する方法

Elementorで、プラグインを使用してヘッダーを固定する方法を紹介します。
スクロールしてもヘッダーを常に画面上部に表示させることができます。

プラグイン「Sticky Header effects for Elementor」を使用して作成します。
Elementor Proを導入していなくても、Elementorで固定ヘッダーを作ることができます!

※テーマは「Hello Elementor バージョン 3.0.0」の使用を想定しています。

まず初めに、今回は簡単&無料ヘッダー作成できるプラグイン「Elementor Header& Footer Builder」ヘッダーを作成している状態からスタートします。

ヘッダーをまだ作っていない方は、こちら↓の記事を参考にヘッダーを作成してみてください!

1. プラグインのインストール

ヘッダーの固定はは、無料で簡単に使えるプラグイン「Sticky Header Effects for Elementor」を使用します。

ヘッダーの固定無料簡単に使えるプラグイン「Sticky Header Effects for Elementor」を使用します。

ワードプレス公式サイト:Sticky Header Effects for Elementor

↑ワードプレスのダッシュボードのメニューから「プラグイン」をクリックし、画面上部の「新規プラグインを追加」をクリックします。

検索欄に「Sticky Header」と入力すると、「Sticky Header Effects for Elementor」が表示されるので、「今すぐインストール」をクリックします。 インストールが完了すると、「有効化」というボタンが表示されるので、クリックしてプラグインを有効化します。

↑検索欄に「Sticky Header」と入力すると、「Sticky Header Effects for Elementor」が表示されるので、「今すぐインストール」をクリックします。

インストールが完了すると、「有効化」というボタンが表示されるので、クリックしてプラグインを有効化します。

2. ヘッダーを固定する

プラグインの有効化が完了したら、ワードプレスのメニューから「外観」→「Elementor Header & Footer Builder」を選択します。「ヘッダー」にマウスをかざして、「Elementorで編集」をクリックします。

↑プラグインの有効化が完了したら、ワードプレスのメニューから「外観」「Elementor Header & Footer Builder」を選択します。

※Elementor Header & Footer Builderであらかじめヘッダーを作っておきます。
作り方はこちらの記事で詳しく解説しています!

「ヘッダー」にマウスをかざして、「Elementorで編集」をクリックします。

↑Elementorの編集画面に入ったら、ヘッダーのコンテナ(セクション)を選択し、「高度な設定」をクリックします。

そして、下の方にある「Sticky Header Effects」をクリックします。

Sticky Header Effects の Enableを「ON」にして、更新ボタンをクリックします。

Sticky Header EffectsEnable「ON」にして、更新ボタンをクリックします。

↑見た目を確認します。ヘッダーが固定されました!

3. ヘッダーの背景色を変更する

ヘッダーの固定はできましたが、ヘッダーの背景が透明だと場合によってはメニューなどが見にくくなってしまいます。

ヘッダーに背景色を設定することによって、解決することができます!

ヘッダーのコンテナ(またはセクション)を選択した状態で、「スタイル」をクリックし、背景のBackground Typeで一番右側の筆のようなマーク(Classic)をクリックします。その下の「色」でヘッダーの背景色を設定できます。

↑ヘッダーのコンテナ(またはセクション)を選択した状態で、「スタイル」をクリックし、背景のBackground Typeで一番右側の筆のようなマーク(Classic)をクリックします。

その下の「色」でヘッダーの背景色を設定できます。

↑ヘッダーの背景色を設定すると、ヘッダーが見やすくなりました!

↑ヘッダーの背景の透明度は、「背景」「Background Type」から、カラーピッカーから一番下のスライダーで設定できます。

まとめ🍊

今回は、プラグイン「Sticky Header effects for Elementor」を使って、無料で簡単にヘッダーを固定する方法を紹介しました。
Elementor Header & Footer Builderと組み合わせて、ぜひ活用してみてください。