Elementor でスティッキーヘッダーとスクロール効果を使用する方法

ヘッダーは通常、Web サイトにアクセスしたときに最初に目にするものであり、Web サイトを探索するための基盤として機能します。

e コマース Web サイト、個人 Web サイト、教育用 Web サイト、コミュニティ フォーラム、メディア用 Web サイトのいずれであっても、ヘッダーによって閲覧が簡単になり、楽しく使用できるようになります。

スティッキー ヘッダーは、ユーザー ナビゲーションを改善するために Web サイトを整理および構造化するために Web デザイナーの間でますます人気が高まっています。

このチュートリアルでは、Elementor を使用してスティッキー ヘッダーを作成する方法を説明します。

固定ヘッダーを使用すると、ユーザーはどこまでスクロールしてもページのヘッダーとメニュー セクションを表示できます。

• ステップ 1: メニューを作成する
• ステップ 2: Elementor でヘッダーを作成する
• ステップ 3: Elementor を使用してヘッダー テンプレートを作成する
• ステップ 4: Elementor ヘッダーをスティッキーにする方法
• ステップ 5: CSS をカスタマイズする
• 結論

ステップ 1: メニューを作成する

Web サイトにスティッキー ヘッダーを追加するには、 [wp-admin] > [外観] > [メニュー] 、メイン メニューを作成します。 ヘッダーに、表示するセクションを入力します。

ステップ 2: Elementor でヘッダーを作成する

メインメニューの作成が完了したら、 [Elementor Templates] > [Theme Builder]に移動します テーマビルダーページのヘッダー領域を選択し、「新しいヘッダーの追加」をクリックします。

ヘッダーテンプレートに名前を付け、ポップアップ画面でテンプレートの作成

その後、Elementor の編集ページに移動します。 既製のヘッダー テンプレートのいずれかを使用することも、独自のヘッダー テンプレートを最初からデザインすることもできます。

このチュートリアルでは、Elementor スティッキー ヘッダーを最初から始めます。

テンプレートのデザインを開始する前に、Elementor エディターでさまざまなヘッダー ウィジェットを確認できます。 これらのセクションを使用すると、ヘッダーをすばやく簡単に設計できます。

ステップ 3: Elementor を使用してヘッダー テンプレートを作成する

2 列のレイアウトを作成します。 セクションのコンテンツ幅が「 Boxed 」に設定されていることを確認してください。

Elementor 編集セクションのコンテンツ幅設定で、「編集」列の下の最初の列幅を 20% に設定します。

Web サイトのサイト ロゴを最初の列に配置し、左揃えにします。

2 番目の列にナビゲーション メニューを追加し、手順 1 で作成したメイン メニューを選択します。ナビゲーション メニューを右に揃えます。

このチュートリアルではヘッダーを単純にしておきます。 背景色、ホバーアニメーション効果、ボタン、その他の要素を追加することで、ヘッダーをより詳細にすることができます。

ステップ 4: Elementor ヘッダーをスティッキーにする方法

基本的な Elementor ヘッダーを作成したので、次はそれを Sticky ヘッダーに変換します。

これを行うには、編集セクション(ヘッダー全体セクション) に移動します。 ドロップダウン メニューから[詳細設定] > [モーション エフェクト]を選択します

「上部に固定」を選択し、固定ヘッダーを表示する場所にデバイス

スティッキー ヘッダーはタブレット サイズのデバイスではほとんどの場合望ましくないものであり、モバイル画面でも同様にほとんどの場合望ましくありません。 その結果、「Sticky On」の下の両方のオプションの横にある「x」をクリックし、「デスクトップ」のみを選択したままにします。

作業に満足したら、「公開」をクリックします。 これによりスティッキー ヘッダーが有効になりますが、現時点では現在のテーマ ヘッダーは置き換えられません。

Elementor は、ヘッダーを公開した後、ヘッダーに条件を追加するように求めます。 条件を追加することで、サイト上の任意の場所にヘッダーを表示できます。

このヘッダーは、404 ページを省略して、サイト全体に表示されるようにしたいと考えていました。 その結果、404 ページは除外し、サイト全体を選択肢に含めました。

ご覧のとおり、Elementor を使用してパーソナライズされた Sticky ヘッダーを作成するのは簡単で簡単です。

カスタム CSS を使用して Elementor スティッキー ヘッダーの見栄えを大幅に向上させる Elementor を使用すると、CSS クラスを追加してスティッキー ヘッダーをカスタマイズし、よりスタイリッシュにすることができます。

ここで、スティッキー ヘッダーの高さ、背景色、トランジション、スティッキー効果をカスタマイズできます。

編集エリアに戻って、スティッキーヘッダーをよりスタイリッシュにします (ヘッダーセクション全体)。 ドロップダウン メニューから[詳細設定] > [モーション エフェクト]を選択します

ここでは「エフェクトオフセット 訪問者が Web サイトを使用するときに、スクロール効果が発生するスクロール距離です。

モーションオフセットを設定します。

オフセット効果オプションはカスタム CSS が使用されている場合にのみ機能することに注意してください。 したがって、独自のカスタム CSS を追加しない場合は、最後のオプションをスキップできます。

最終的なスティッキー ヘッダーを公開する前に、オプションで最後のスティッキー ヘッダーに条件を追加できます。 amp例は、スティッキー ヘッダーを表示する場所です。 例としてamp サイト全体という条件を選択できます。

次に、Web サイトにカスタム CSS を追加します。 カスタム CSS は非常に柔軟であり、その操作に慣れていれば、必要なものを何でも含めることができます。

掃除は完了しました。 次に、カスタム CSS コードの追加など、Web サイトの複雑な部分に移ります。 Elementor 用の無料のスティッキー ヘッダー エフェクトを取得するための基本と高度なテクニックの両方を説明します。 Elementor 2.9 以降を使用している場合は、グローバル スタイル ルールを使用してこの CSS をサイトに組み込むことができます。

カスタム CSS を含めるには、以下に概説する手順に従ってください。

• ハンバーガー メニューにアクセスするには、Elementor メニューの左上隅にあるハンバーガー メニューを見つけて選択します。
• 「グローバル スタイル」セクションの下にあるドロップダウン メニューから「テーマ スタイルの選択」を選択します。
• そのセクションのドロップダウン メニューから [カスタム CSS] を選択します (色は以前の遺伝的な赤色から青色に変わります)。

その後、以下の CSS コードを貼り付けます。

header.sticky-header { --header-height: 90px; --不透明度: 0.90; --シュリンクミー: 0.80; --sticky-background-color: #0e41e5; --トランジション: 0.3 秒のイーズインアウト; トランジション: 背景色 var(--transition)、背景画像 var(--transition)、背景フィルター var(--transition)、不透明度 var(--transition); } header.sticky-header.elementor-sticky--Effects {背景色: var(--sticky-background-color) ; 背景画像: なし ; 不透明度: var(--opacity) ; -webkit-backdrop-filter:blur(10px); 背景フィルター: ぼかし(10px); header.sticky-header > .elementor-container {transition: min-height var(--transition); } header.sticky-header.elementor-sticky--Effects > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me)); 高さ: calc(var(--header-height) * var(--shrink-me)); header.sticky-header .elementor-nav-menu .elementor-item { 遷移: パディング var(--transition); header.sticky-header.elementor-sticky--Effects .elementor-nav-menu .elementor-item {padding-bottom: 10px; } パディングトップ: 10px; } header.sticky-header > .elementor-container .logo img {transition: max-width var(--transition); } header.sticky-header.elementor-sticky--Effects .logo img { max-width: calc(100% * var(--shrink-me)); } 

ステップ 5: CSS をカスタマイズする

上記の手順では、Elementor で減少するスティッキー ヘッダーを作成するプロセスを説明します。 ヘッダーをさらにカスタマイズする方法について詳しく知りたい場合は、以下に示す CSS コードを参照してください。これにより、ヘッダーのデザインをより創造的にすることができます。 ニーズに応じて、多数の設定を変更し、粘着性を多かれ少なかれ調整することで、Elementor 粘着ヘッダーをカスタマイズできます。 コード エディタを使用して、この CSS の変更を Elementor に直接組み込むことをお勧めします。 Visual Studio Code または Atom を利用すると、コードを迅速にまとめて利点を得ることができます。 これらのエディタは無料で使用でき、Windows、Mac OS X、Linux などのさまざまなシステムからアクセスできます。

このセクションでは、CSS スタイル シートを使用して、Elementor の縮小ヘッダーの効果を調整する方法を示します。 カスタム プロパティに 1 つだけ変更を加えた場合、残りの CSS コードと一致するようにすぐに変更されます。

減少するヘッダーのカスタマイズ オプションは、合計 5 つの異なる方法で利用できます。 すべての変数をカスタマイズする必要があるわけではありませんが、必要に応じてカスタマイズすることができます。 どの変数を変更するかを決定したら、それらの変数のみを変更し、残りのパラメーターは変更しないでください。

以下に 5 つの CSS 変数を示します。各変数のデフォルト値は赤色で示されています。

スティッキーの背景色は #0e41e5 、ヘッダーの高さは 90px です。 その他のスタイル オプションには、不透明度 0.90、シュリンクミー 0.80、不透明度 0.90、およびイーズイン/イーズアウト トランジション 300 ミリ秒が含まれます。

カスタム プロパティは、ampコードの二重ダッシュ「-」の後に表示される要素であり、ampコードの先頭にリストされています。 必要なのは、文内のコロンの後とセミコロンの前に表示される値を調整することだけです。

amp、ヘッダーの高さを 100px に増やしたい場合、高さを変更する前と変更した後は次のようになります。

以前は、ヘッダーの高さは 90 ピクセルでした。 その後、ヘッダーの高さは 100 ピクセルになりました。

Elementor を使用すると、いくつかの異なる方法でスティッキー ヘッダー メニューをデザインできます。 無料の Elementor スティッキー ヘッダーを作成できるだけでなく、カスタム CSS を追加してヘッダーをカスタマイズすることもできます。 このステップバイステップのガイドでは、Elementor を使用してスティッキーを減らす Elementor ヘッダーを構築し、CSS を微調整する方法についての詳細な指示を得ることができます。

Elementor にはさまざまなヘッダー テンプレートが含まれています。 それぞれが独特でエレガントであり、閲覧者が Web サイトをナビゲートするのに役立ちます。

Elementor を使用すると、Web サイトのヘッダーのスタイルを完全に制御できます。 amp、サイトのロゴをページの中央に配置し、その下にメイン メニューを配置できます。 メイン ヘッダーの上にヘッダーを追加して、電話番号、ソーシャル メディア リンク、その他の情報を表示できます。

ここでは、Elementor ユーザーが利用できる多数のヘッダー デザイン オプションのほんの一ampを示します。

結論

Web サイトにスティッキー ヘッダーを含めると、訪問者がサイトを簡単に閲覧できるようになり、サイトのすべての領域へのクリック数が増加します。

Elementor を使用すると、以前は必要であった Javascript と CSS を使用してスティッキー ヘッダーを手動で生成する必要がなくなります。 Elementor スティッキー ヘッダーのおかげで、Web サイトのスティッキー ヘッダーの作成がこれまで以上に簡単になりました。