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

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

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

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

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

スティッキーヘッダーを使用すると、ユーザーは、スクロールダウンの距離に関係なく、ページのヘッダーとメニューセクションを表示できます。

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

今すぐHoldersing価格でElementorProを入手

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

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

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

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

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

その後、Elementor編集ページに移動します。事前に作成されたヘッダーテンプレートの1つを使用するか、独自のヘッダーテンプレートを最初から設計することができます。

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

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

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

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

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

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

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

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

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

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

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

今すぐHoldersing価格でElementorProを入手

モーションエフェクトの下の「スティッキートゥザトップ選択スティッキーヘッダーを表示するデバイス

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

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

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

このヘッダーをサイト全体に表示し、404ページを省略したかったのです。その結果、404ページを省略して、サイト全体を選択に含めました。

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

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

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

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

、「エフェクトオフセット」を100に設定します。訪問者がWebサイトを使用する場合、これはスクロール効果が発生するスクロール距離です。

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

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

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

ここで、WebサイトにカスタムCSSを含める必要があります。カスタムCSSは非常に柔軟性があり、その操作に精通している場合は、必要なものを含めることができます。

今すぐHoldersing価格でElementorProを入手

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

以下に概説する手順に従って、カスタムCSSを含めます。

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

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

header.sticky-header {--header-height：90px; -不透明度：0.90; --shrink-me：0.80; --sticky-background-color：＃0e41e5; -トランジション：.3sイーズインアウト; 遷移：background-color var（-transition）、background-image var（-transition）、background-filter var（-transition）、opacity var（-transition）; } header.sticky-header.elementor-sticky--effects {background-color：var（-sticky-background-color）！important; 背景画像：なし！重要; 不透明度：var（-opacity）！important; -webkit-背景-フィルター：blur（10px）; 背景フィルター：blur（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））！important; 高さ：calc（var（-header-height）* var（-shrink-me））; } header.sticky-header .elementor-nav-menu .elementor-item {transition：padding var（-transition）; } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {padding-bottom：10px！important; padding-top：10px！important; } 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つの異なる方法で使用できます。すべての変数をカスタマイズする必要はありませんが、必要に応じてカスタマイズすることもできます。変更する変数を決定するとすぐに、それらの変数のみを変更し、残りのパラメーターは変更しないでおくことができます。

今すぐHoldersing価格でElementorProを入手

これが5つのCSS変数で、各変数のデフォルト値は赤で示されています。

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

「 - 」カスタムプロパティは、ダブルダッシュの後に表示される要素であり、私たちの元でampルコード、そしてあなたは彼らが私たちのの上部に記載されている見つけることができますampルコード。必要なのは、文のコロンの後とセミコロンの前に表示される値を調整することだけです。

以下のための元ampル、あなたはここでそれを前にして高さを変更した後にどのように見えるかだ、100ピクセルのヘッダの高さを増加させたい場合は：

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

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

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

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

ここでは元ほんの一部ですamp Elementorのユーザーが利用できる数多くのヘッダ設計オプションのレ。