ページスクロール時にヘッダーを変更する必要があります Elementor ?
で達成できるヘッダーの動作はたくさんあります Elementorプロ. それらのXNUMXつは、ページをスクロールするときにXNUMXつのヘッダーを別のヘッダーに変更することです。 この記事ではその方法を説明します。
Elementor ご存知のように、Proには機能が付属しています テーマビルダー でカスタム ヘッダーを作成できるようにします。 ウェブサイト ワードプレス。 この機能のおかげで、提供されているものに頼る必要がなくなりました。 ワードプレスのテーマ ヘッダーのカスタマイズに関しては、通常は制限されています。
必要な要素を追加したり、必要なタイポグラフィ設定を使用したり、任意の動作を設定したりできます。
Elementor Pro には、調整オプションが組み込まれており、 スティッキーヘッダー。 この機能を使用して、ページのスクロールに応じて変化するヘッダーを作成します。 このタイプのヘッダー動作には、カスタムCSSも必要になります。
また読みます： Elementorを使用してWordPressでカスタムヘッダーを作成する方法
これは、ページがスクロールするにつれて変化するヘッダーの例です。
ステップ1：カスタムヘッダーを作成する
テーマビルダーはElementorProでのみ使用できるため、開始する前に、Elementorをプロバージョンにアップグレードしたことを確認してください。 ElementorProのプロバージョンを入手できます 公式ウェブサイト.
準備ができたら、 テンプレート->テーマビルダー メインのWordPressダッシュボード。 テーマビルダーダッシュボードで、ポインターをタブに合わせます ヘッダ アイコンをクリックします さらに 新しいヘッダーテンプレートを作成します。
表示されるテンプレートライブラリで、必要な定義済みのヘッダーテンプレートを選択できます。 または、ヘッダーを最初から作成する場合は、テンプレートライブラリを閉じてElementorエディターを開くことができます。
また発見： Elementorでカスタムシェイプを作成する方法
この記事では、ヘッダーテンプレートを最初から作成します。
セクションを追加してヘッダーの作成を開始し、次に必要な要素を追加して、それに応じてスタイルを作成します。
必要な要素を追加してスタイルを作成したら、タブに移動します 高度。 ブロックの下 高度な、 Zインデックスを100に設定し、CSSクラスを追加します。header-1
次に、上で作成したヘッダーセクションを複製します。 複製されたセクションがXNUMX番目のヘッダーになり、ページを下にスクロールすると表示されます。
重複するヘッダーを編集します。 さらにアイテムを追加したり、既存のアイテムを削除したりできます。 背景を変更することもできます。 あなたが望むすべて。 編集が完了したら、タブに移動します 高度。 ブロックの下 高度な設定、 CSSクラスの名前をheader-2に変更します。
次に、ブロックを開きます 動きの効果。 ドロップダウンリスト ねばねば、 に設定 トップ。 フィールドで効果のオフセットを定義できます エフェクトオフセット。 ここで設定した値は、エフェクト（この場合はスティッキー）が発生する前のスクロールの深さを決定します。
両方のヘッダーセクションの編集が完了したら、それらの順序を変更します。
下のセクションを編集し、負のマージンを上のセクションの上に設定します。 これを行うには、に移動します [詳細設定]タブ 上マージンを約-65に設定します。
ボタンをクリックしてヘッダーを公開します PUBLISH Elementorの設定パネルの下部にあります。 ボタンをクリックして表示条件を追加します 条件を追加します。 ボタンをクリックします 保存して閉じます 表示条件の設定が完了したら。
ステップ2：カスタムCSSを追加する
以下のCSSは、遷移効果を制御するために使用されます。 テーマカスタマイザーでCSSを追加できます。 に移動 外観->カスタマイズ メインのWordPressダッシュボード。 テーマカスタマイザーダッシュボードで、ブロックを開きます 追加のCSS 次のCSSを貼り付けます。
CSSスニペット：
.header-2 {変換：変換（-80px）; -moz-transition：すべての.3が簡単になります！重要です。 -webkit-transition：すべての.3が簡単になります！重要です。 移行：すべての.3が簡単になります！重要です。 } .elementor-sticky --effects.header-2 {高さ：自動！重要; 変換：変換（0px）; } .elementor-sticky --effects.header-1 {表示：なし！重要; }
ボタンをクリックします PUBLISH 変更を適用します。
手短に
Elementor Proには、ヘッダーなどのテーマの部分のカスタムテンプレートを作成できるテーマビルダー機能が付属しています。 Elementor Theme Builderを使用してカスタムヘッダーを作成する場合、カスタムCSSを追加する機能を使用して、任意の動作を設定できます。 カスタムCSSを追加しなくても、効果をスティッキーで透明に設定できます。
また読みます： Elementorを使用してWordPressで404ページを作成する方法
スクロールページ自体のヘッダーを変更すると、いくつかの利点があります。
たとえば、セカンダリヘッダー（ページを下にスクロールした後に表示されるヘッダー）を使用して、ソーシャルメディアの共有ボタンのみを表示することでページが共有される可能性を高めることができます。
Elementor Proを今すぐ入手！
まとめ
そう ！ Elementorのページスクロールヘッダーを変更する方法を示すこのチュートリアルは以上です。 そこへの行き方について懸念がある場合は、 commentaires.
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
