Elementor でスティッキーヘッダーを作成する方法

ヘッダーとフッターは、Web サイトの最も重要な部分の 1 つです。 Web サイトのヘッダーは、訪問者がサイトにアクセスしたときに最初に目に入るものです。ヘッダーとは、ビジネスのロゴ、すべての重要なページへのリンク、CTA、および電話番号または電子メールアドレスを介した連絡方法を表示するナビゲーションバーを指します。

適切に構造化されたヘッダーは Web サイトにとって非常に重要であり、メッセージやプロモーションを宣伝するために使用できます。これにより、潜在的な顧客が Web サイトを探索しやすくなります。優れたヘッダーは、優れたセールスマンのように機能します。たとえば、今日だけ 20% オフという行動喚起を使用すると、ユーザーに製品の購入を促すことができます。

ヘッダーには、スティッキーまたは固定などの特定のタイプを使用できます。スティッキーヘッダーは固定ヘッダーとも呼ばれます。これは、訪問者が下にスクロールすると、ページの上部にメインメニューが固定されるスマートナビゲーションツールです。

スティッキーヘッダーの重要性

スティッキーヘッダーは、ユーザーがページの先頭に移動せずに、検索やすべての重要なページにすばやくアクセスできるようにする固定ヘッダーです。調査によると、<i>インターネットユーザーの 22% は、固定ヘッダーのある Web サイトの方がナビゲートしやすいと述べています。別の調査では、電子商取引 Web サイトでスティッキーヘッダーを使用すると、コンバージョンが 3% 増加したことがわかりました。

Elementor でスティッキーヘッダーを作成するのは、特に初めて Web サイトを作成する場合には簡単ではありません。そこで、コードを 1 行も書かずに Elementor を使用してスティッキーヘッダーをデザインできるように、ステップバイステップのガイドを作成しました。

始めましょう！

1.Elementor Proを使用してスティッキーヘッダーを作成する方法

スティッキーヘッダーは、Web サイトユーザーの利便性を高める非常に効率的な方法です。 Elementor Pro のプレミアム機能として提供される Elementor テーマビルダーを使用して、スティッキーヘッダーをすばやくデザインする方法を見てみましょう。

ステップ 1: メインメニューを作成する

ウェブサイトのスティッキーヘッダーを作成する前に、まず、wp-admin > 外観 > メニューでメインメニューを作成する必要があります。ヘッダーに表示するすべての重要なページをここにリストする必要があります。

ステップ 2: テーマビルダーを開く

メインメニューを作成したら、「Elementor Templates」>「Theme Builder」に移動します。テーマビルダーページで、「ヘッダー」セクションをクリックし、「新しいヘッダーを追加」を選択します。」

その後、ポップアップが表示されます。ヘッダーテンプレートの名前を入力し、「テンプレートの作成」をクリックします。」

Elementor Editor ページにリダイレクトされます。このページでは、事前に構築されたヘッダーテンプレートを選択することも、独自のヘッダーテンプレートを作成することもできます。ここでは、スティッキーヘッダーを最初から作成します。

ヘッダーの作成を開始する前に、Elementor がヘッダーの作成に利用できる 7 つ以上のウィジェットを提供していることを強調することが重要です。

ステップ 3: Elementor でヘッダーテンプレートを構築する

ここで 2 列構造を選択します (1 列はロゴ用、もう 1 列は水平メニュー用)。

次に、レイアウトに移動し、コンテンツの幅でボックス内のオプションを選択します。

「列の編集」で列幅を 20% に選択します。」

次に、Web サイトのロゴを左側の列に追加し、左揃えを選択します。次に、右側の列にナビゲーションメニューを追加し、手順 1 で作成したメニューを選択します。次に、メインメニューを右側に揃えます。

このチュートリアルでは、基本的なヘッダーを作成します。ホバーアニメーション効果や背景色、ボタンを追加することで、よりスタイリッシュなヘッダーを作成できます。

ステップ 4: Elementor ヘッダーをスティッキーにする

基本的なヘッダーをデザインしたので、今度はそれをスティッキーにします。これを修正するには、[編集] セクションをクリックし、[詳細] > [モーションエフェクト] に移動します。

詳細セクションで、ドロップダウンから「上部」に固定を選択し、固定ヘッダーを表示するデバイスを選択して、公開ボタンをクリックします。

公開されると、ヘッダーに「条件を追加」するように求める新しいポップアップ画面が表示されます。条件を設定すると、Web サイト全体でヘッダーが使用される場所が決まります。たとえば、サイト全体に表示するには、「サイト全体」を選択します。

これで、Elementor でスティッキーヘッダーをいくつかの手順で作成する方法がわかりました。

カスタムCSSでスタイルを追加

カスタム CSS クラスを使用して、Elementor スティッキーヘッダーをよりスタイリッシュにすることができます。背景色、高さ、スティッキー効果、トランジション効果を追加できます。どうすればそれを達成できるかを見てみましょう。

「編集セクション」に戻り、「詳細設定」>「モーションエフェクト」に移動します。

[モーションエフェクト] の [エフェクトオフセット] に移動し、値 100 を入力します。これは、ユーザーが Web サイトにアクセスするたびにスクロール効果が表示されるスクロール距離です。

下にスクロールして「カスタム CSS 」ドロップダウンを開きます。以下の CSS クラスを貼り付けます。この CSS を編集して、好みに合わせてデザインすることもできます。

カスタムCSS:

selector.elementor-sticky–-effects {
  background-color: rgb(255, 220, 168) !important;
}

selector {
  transition: background-color 3s ease !important;
}

selector.elementor-sticky–-effects > .elementor-container {
  min-height: 80px;
}

selector > .elementor-container {
  transition: min-height 1s ease !important;
}

2. Xpro Elementor テーマビルダーを使用して無料のスティッキーヘッダーメニューを作成する

無料の Xpro Elementor テーマビルダーを使用して、完全にクリエイティブなデザイン体験を備えたスティッキーヘッダーを作成することもできます。これは、プレミアムヘッダーテンプレートとテーマビルダーウィジェットを使用してスティッキーヘッダーを作成する機能を提供する無料の Elementor アドオンです。

このテーマビルダープラグインを使用して、Elementor でスティッキーヘッダーを作成する方法を見てみましょう。

ステップ 1: Xpro テーマビルダープラグインをインストールする

WordPress ダッシュボード > プラグイン > 新規追加に移動します。

次に、Xpro Elementor テーマビルダーを検索し、「今すぐインストール」ボタンをクリックし、インストールしたら「アクティブ化」します。

プラグインを有効にすると、ダッシュボードのサイドバーに「Xpro Addons」オプションが表示されます。

ステップ 2: スティッキーヘッダーを作成する

スティッキーを作成するには、[Xpro アドオン] > [テーマビルダー] > [新規追加] に移動します。

スティッキーヘッダーのタイトルを追加します。「テンプレートのタイプ」ドロップダウンから「ヘッダー」オプションを選択します。

「Header Sticky」オプションから「Enable」を選択し、設定を保存した後「Edit with Elementor」ボタンをクリックします。選択に応じて他の設定を微調整することもできます。

Elementor エディターページにリダイレクトされます。このページでは、最新の事前構築済みテンプレートのいずれかを選択するか、独自のテンプレートを作成できます。ここでは、スティッキーヘッダーを最初から作成します。

1 つはロゴ用、もう 1 つはメニュー用の 2 列構造を選択します。

次に、「レイアウト」オプションから、コンテンツの幅を「ボックス化」に設定します。

「構造」ドロップダウンから「33,66 」比率の構造を設定します。

Web サイトの「サイトロゴ」を左側の列に追加し、[一般] ドロップダウンで左揃えオプションを選択します。次に、右側の列にナビゲーションメニューを追加し、「メインメニュー」を選択します。次に、メインメニューを右側に揃えます。

ここで、「更新」をクリックすると、ヘッダーがサイト上で公開されます。

3. myStickymenu を使用してスティッキーヘッダーメニューを作成する

myStickymenu は、Elementor ウェブサイト用に美しくカスタマイズされたヘッダーを作成するために使用できるもう 1 つの WordPress プラグインです。お知らせ用のウェルカムバーを作成したり、プロモーション用のカウントダウンを追加したりできます。

myStickymenu を使用してスティッキーメニューを作成しましょう。

ステップ 1: プラグインをインストールする

プラグインをインストールするには、WP ダッシュボード > プラグイン > 新規追加に移動します。

次に、myStickymenu を検索し、「今すぐインストール」をクリックし、「アクティブ化」をクリックします。

ステップ 2: スティッキー設定を有効にする

[設定] > [myStickymenu] に移動します。スティッキーメニューボタンを切り替えて、スティッキークラスの下のドロップダウンから「Other Class or ID」を選択します。

Web デザインの目標に応じて、不透明度や背景色などの他の設定を変更します。次に、下にスクロールして「保存ボタン」をクリックします。 Web サイトを更新して、スティッキーヘッダーが動作していることを確認します。

myStickymenu はスティッキーヘッダーを作成するための優れたプラグインですが、欠点もあります。基本的なスティッキーヘッダーのみを作成できます。さらに多くのカスタマイズオプションを利用するには、年間 25 ドルからプランをアップグレードする必要があります。

4. WordPress で CSS Sticky Navbar を作成する

Elementor でスティッキーヘッダーを作成するためのブログの最後のオプションは、WordPress テーマでカスタム CSS を使用することです。 CSS を使用してスティッキーナビゲーションバーを作成するには、WordPress ダッシュボードにログインし、以下の手順に従います。

ステップ 1: WordPress カスタマイザーを開く

[外観] > [カスタマイズ] > [追加 CSS] に移動します。

ステップ 2: CSS コードを追加する

次の CSS コードを追加します。

ヘッダーを好みに合わせてカスタマイズできるようになりましたが、これには HTML と CSS に関する十分な知識が必要です。ほとんどのテーマでは、この機能がプレミアム機能として提供されています。ただし、例として Xpro 無料テーマを使用しました。

サイトで長い形式のコンテンツが提供されている場合は、スティッキーナビゲーションヘッダーを追加すると、ユーザーエクスペリエンスが向上する可能性があります。 Elementor Pro および Xpro Elementor テーマビルダーを使用してスティッキーヘッダーを作成するのは、このブログで取り上げている他の方法と比べて非常に簡単です。 Xpro が提供するものには、無料の Xpro アドオンも付属しています。最終的には、Elementor Web サイトに適した方法を選択するのはあなたの選択です。

Elementor でスティッキーヘッダーを作成する方法に関する質問がある場合は、コメントセクションでお知らせください。喜んでお手伝いさせていただきます。