スティッキー ヘッダーは、Web サイトのナビゲーション メニューを常に表示し、重要なリンクや情報に簡単にアクセスできるようにする優れた方法です。ただし、静的なヘッダーは時間の経過とともに単調になる可能性があるため、スクロール上の色を変更して、より動的で魅力的なユーザー エクスペリエンスを作成することが必要になる場合があります。このガイドでは、シンプルでわかりやすい手順を使用して、 Elementorのスクロール時に固定ヘッダーの色を変更する方法を説明します。初心者でも経験豊富な Elementor ユーザーでも、この効果を簡単に実装して、Web サイトに新鮮でモダンな外観を与えることができます。
設計手法
まだ作成していない場合は、テーマ ビルダーを使用してカスタム ヘッダー テンプレートを作成する必要があります。まず、ロゴを画像ウィジェットに配置し、2 列のヘッダー セクションにナビゲーション ウィジェットを配置します。
「詳細設定」タブ
セクションコントロールの「詳細」タブは、次の手順で使用されます。
余白設定
透明なヘッダーを作成する最も一般的な方法は、セクションにその高さに等しい負のマージンを与えることです。 [詳細設定] タブのマージン コントロールのロックを解除し、下端を負の値 (例: -125px) に設定します。これにより、ヘッダーの下のセクションがページの先頭に移動します。
素晴らしいウェブサイトを作成します
最高の無料ページビルダーElementor を使用
今すぐ始めるZインデックス
また、セクションが常にコンテンツの先頭に表示されるように、セクションの Z インデックスを増やす必要もあります。 Web サイトのコンテンツの残りの部分より大きい任意の数値を入力できますが、多くのデザイナーは 1,000 を使用します。
スティッキー設定
モーションエフェクトアコーディオンから「スティッキー」オプションを選択し、「トップ」に設定します。
効果を追加する
基本的な透明ヘッダー セクションを作成したので、スクロール効果を追加します。
スタイルタブ
セクション コントロールの [スタイル] タブは、次の手順で使用します。
最終的な色
カラーピッカーで最終的な背景またはグラデーションの色を設定します。
スクロール効果
コントロール パネルでスクロール効果セレクターを切り替えます。
値を設定する
目的の効果を実現するには、ビューポート スライダの値を調整する必要があります。ページ上の完全な不透明度にしたい場所までスクロールし、見出しが完全に不透明になるまで (例: 25%) 上部の値を減らします。 Bottom の値を増やすことができるようになりました。前の例では、効果をすぐに発生させたいので、値を非常に近い値に設定しました (例: 22%)。これにより、3% のページスクロールで効果が発生します。
まとめ
結論として、 Elementorのスクロール上のスティッキー ヘッダーの色を変更すると、Web サイトの視覚的な魅力とユーザー エクスペリエンスを向上させることができます。これは、Web サイトを目立たせ、訪問者に記憶に残る印象を与えるためのシンプルかつ効果的な方法です。ただし、ヘッダーの動作は画面サイズによって異なる場合があるため、モバイル デバイスやタブレット デバイスに合わせて調整または考慮する必要があることに注意してください。スイートスポットを見つけるには、いくつかのテストと調整が必要ですが、最終的な結果には、努力する価値があります。したがって、ウェブサイトに新鮮でモダンな外観を与えるために、このテクニックを試してみてください。
