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

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

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

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

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

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

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

今すぐ Elementor Pro をHoldersing価格で入手しましょう

ステップ 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 ヘッダーに変換します。

編集セクションに移動します。ドロップダウンメニューから[詳細設定] > [モーションエフェクト]を選択します

今すぐ Elementor Pro をHoldersing価格で入手しましょう

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

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

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

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

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

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

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

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

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

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

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

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

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

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

今すぐ Elementor Pro をHoldersing価格で入手しましょう

掃除は完了しました。次に、カスタム 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))! important;高さ: 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 つの異なる方法で利用できます。すべての変数をカスタマイズする必要があるわけではありませんが、必要に応じてカスタマイズすることができます。どの変数を変更するかを決定したら、それらの変数のみを変更し、残りのパラメーターは変更しないでください。

今すぐ Elementor Pro をHoldersing価格で入手しましょう

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

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

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

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

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

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

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

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

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