Elementorでスティッキーヘッダーを作成する方法：徹底ガイド

見出しは、ユーザーがウェブサイトを訪れたときに最初に目にする要素のひとつであり、サイトをナビゲートするための重要なナビゲーションツールです。しかしスティッキーヘッダーそのため、ウェブデザインの大きなトレンドにもなっている。ページスクロール中も見出しを表示し続ける機能これにより、ユーザーエクスペリエンスとサイトの操作性が大幅に向上しました。

この記事では エレメンタ WordPressでスティッキーヘッダーを作成するプラグインまた、CSSのカスタマイズなど、スティッキーヘッダーの外観や動作をさらに最適化するための高度なテクニックについても見ていきます。また、スティッキーヘッダーの外観や動作をさらに最適化するためのCSSのカスタマイズなど、いくつかの高度なテクニックについても見ていきます。

なぜElementorを使ってスティッキータイトルを作るのか？

ElementorはWordPressで最も人気のあるページビルダーの1つで、直感的なドラッグ＆ドロップのインターフェイスと強力な機能で人気があります。Elementorを使用してスティッキーヘッダーを作成することにはいくつかの利点があります：

1. コードを書く必要なしElementor : Elementorを使えば、ユーザーはコードを一行も書くことなく、簡単なドラッグ＆ドロップ操作で複雑なウェブレイアウトを作ることができます。これは特に初心者に優しい。
2. 柔軟な設計オプション: Elementorは、ユーザーが見出しのレイアウト、色、フォント、背景などを簡単に調整できる豊富なデザインツールを提供します。
3. 内蔵の粘着オプション: Elementorにはスティッキーオプションが組み込まれており、ユーザーが設定するだけで、ページがスクロールしても見出しを表示し続けることができます。
4. 他のツールとの互換性: Elementor vs. アストラ・プロ などのプレミアムテーマとの互換性は、ウェブサイトのデザインの可能性をさらに広げることができます。

Elementorでスティッキータイトルを作成する手順

ステップ1：メインメニューの作成

付箋見出しを作成する前に、まずウェブサイトのメインメニューを設定する必要があります。メインメニューはユーザーナビゲーションの中心で、サイトの主要ページへのリンクが含まれています。

1. WordPressの管理画面にログインし、"外装状態">"メニュー".

2. 新しいメニューを作成し、ヘッダーに表示したいページやカスタムリンクを追加します。

3. メニューを保存し、メインメニューとして設定されていることを確認します。

ステップ2：Elementorでタイトルを作成する

メニューを設定したら、次はElementorでタイトルテンプレートを作成します。

1. ワードプレスのバックエンドで、"テンプレート">"テーマビルダー".

2. 選択 "新しいテンプレートの追加"を選択し、ポップアップウィンドウで"キャプション"と入力し、テンプレートに名前を付ける。

3. オプションで、プリセットのタイトルテンプレートから選択するか、ゼロからまったく新しいタイトルテンプレートを作成することができます。

ステップ3：ヘッダーレイアウトのデザイン

Elementorエディタで、タイトルレイアウトのデザインを開始します。タイトルをデザインする簡単なフローを示します：

1. 構造の追加: まず、2カラム構造を追加する。コンテンツの幅を「boxed」に設定する。
2. ロゴの追加サイトのロゴを最初のカラムに追加し、左に揃える。

3. ナビゲーションメニューの追加2列目にナビゲーションメニューを追加し、先ほど作成したメインメニューを選択します。ナビゲーション・メニューを右に揃える。

カラム幅、背景色、フォントスタイルなどを調整することで、ヘッダーの外観をさらに最適化できます。ボタン、検索ボックス、ソーシャルメディアアイコンなどのデザイン要素を追加したい場合は、Elementorが提供する他のウィジェットを使用できます。

ステップ4：タイトルに付箋をつける

見出しをデザインしたら、次のステップは、それを粘着性のある見出しに設定することだ。

1. タイトルセクションの編集」（タイトルセクション全体）をクリックし、「詳細設定」＞「モーションエフェクト」と進みます。

2. モーションエフェクト "の下にある"くっつける"オプションをオンに設定する。
3. 付箋タイトルを表示するデバイスを選択できるオプション（デスクトップ、タブレット、モバイルなど）。

4. クリック "ポスト"ボタンをクリックし、プロンプトに従って、サイト全体に表示するか、特定のページを除外するかなど、タイトルの表示条件を設定します。

カスタムCSSで付箋見出しを最適化する

Elementorに付属するデザインツールはすでに非常に強力ですが、スティッキーヘッダーの外観をさらにカスタマイズしたい場合は、カスタムCSSを使用してより洗練された効果を得ることができます。

以下は、付箋タイトルの高さ、背景色、トランジション効果を調整するカスタムCSSの例です：

cssCopyコード
selector.elementor-sticky--effects {
    background-color: rgb(255, 220, 168) !important；
}
セレクタ {
    transition: background-color 3s ease !important; }.
}
セレクタ.elementor-sticky--effects >.elementor-container { } } セレクタ.elementor-sticky--effects
    min-height: 80px；
}
selector > .elementor-container { } } selector.
    transition: min-height 1s ease !important; }.
}
cssCopyコード
selector.elementor-sticky--effects {
    background-color: rgb(255, 220, 168) !important；
}
セレクタ {
    transition: background-color 3s ease !important; }.
}
セレクタ.elementor-sticky--effects >.elementor-container { } } セレクタ.elementor-sticky--effects
    min-height: 80px；
}
selector > .elementor-container { } } selector.
    transition: min-height 1s ease !important; }.
}
cssCopyコード
selector.elementor-sticky--effects {
    background-color: rgb(255, 220, 168) !important；
}
セレクタ {
    transition: background-color 3s ease !important; }.
}
セレクタ.elementor-sticky--effects >.elementor-container { } } セレクタ.elementor-sticky--effects
    min-height: 80px；
}
selector > .elementor-container { } } selector.
    transition: min-height 1s ease !important; }.
}

これらのCSSルールを使用すると、次のような場合に、見出しのスクロールをどのように粘着させるかを制御することができます。背景色の変更、タイトルの高さのトランジション効果など。このCSSを適用するには、Elementorエディタでヘッダーセクションを選択し、"高いレベル">"カスタムCSS"オプションで、コードを貼り付けるだけだ。

はんけつをくだす

スティッキーヘッダー特にコンテンツが長かったり、頻繁にナビゲーションが必要な場合、ウェブサイトのユーザーエクスペリエンスを大幅に向上させることができます。Elementorを使えば、付箋見出しを簡単に作成でき、初心者でもすぐに始められます。