ElementorでWordPressにトップバーを追加する方法

トップバーは、WordPressで重要なメッセージ、プロモーション、および行動を促す効果的な方法を提供します。ユーザーのブラウジングエクスペリエンスを妨げることなく、訪問者の注意を引くことを目的として、Webページの上部に配置されています。

適切に設計されたトップバーは、訪問者の注意を即座につかみ、ニュースレターにサインアップしたり、限られた時間のオファーを手に入れたり、新しいコンテンツを探索したりするなどのアクションに向けて導くことができるため、コンバージョンを大幅に向上させることができます。 ユーザーを邪魔することなく、永続的なリマインダーとして機能します。

WordPressにトップバーを追加するのは、Elementorで非常に簡単です。この記事では、WordPressのトップバーをElementorで追加する方法に関するステップバイステップガイドについて説明します。最後まで私たちと一緒にいてください。

トップバーとは何ですか？

トップバーは、メインヘッダーの上のウェブサイトの上部に狭い水平セクションです。ポップアップやバナーとは異なり、連絡先の詳細、リンクの説明、重要な発表、プロモーションオファー、メッセージを表示するために使用されます。色、フォント、ブランド固有のボタンなどの広範なカスタマイズにより、ユーザーエンゲージメントを強化できます。

トップバーは、24時間年中無休でウェブサイトの上部に常に表示されるとは限りません。代わりに、プロモーション目的でキャンペーン期間中に通常表示されます。ユースケースに応じて、異なる名前で定義されます。次のセクションで説明します。読み続けてください。

ウェブサイトで呼ばれるトップバーは何ですか？

ちょうど1分前にあるように、ウェブサイトのトップバーは、その目的と機能に基づいて異なる名前で定義されています。以下にリストされている上のバーに使用されるいくつかの一般的な用語を見てください。

• アナウンスバー -発表、イベント通知、および重要な更新を共有するために使用されます。

• 通知バー -限られた時間のオファー、システムメンテナンスニュース、緊急のメッセージを表示します。

• プロモーションバー -特別なプロモーション、排他的割引、販売を促進するキャンペーンを強調しています。

• 情報バー -連絡先番号、ショッピングの詳細、地元の住所、営業時間を展示します。

• スティッキーバー -ユーザーが投稿やページをスクロールしても、ウェブサイトの上部に固定されたままです。

• フローティングバー -投稿やページをスクロールするときに並んで移動して、顕著な存在感を確保します。

ElementorでWordPressにトップバーを追加する方法

理論的な部分は終わりました。次に、このセクションのチュートリアルパートについて説明し、Elementorを使用してWordPressにトップバーを追加する方法に関するステップバイステップガイドを説明します。

前提条件：ElementorまたはHappyAddonsをインストールします

Webサイト全体にトップバーを作成するには、プレミアム機能であるElementor Theme Builderにアクセスできる必要があります。プラグインのプレミアムバージョンを使用し、無料オプションを探している場合は、HappyAddonsプラグインを試してみる必要があります。

HappyAddonsは、実際にはElementorプラグインへのアドオンであり、通常はElementorでプレミアムな多くの無料機能があります。たとえば、HappyAddonsにはテーマビルダーもあります。これはElementorに非常に似ていますが、完全に使用できます。

したがって、このセクションでは、HappyAddonsプラグインを使用してチュートリアルを説明します。サイトの次のプラグインをインストールしてアクティブにします。

• Elementor
• HappyAddons

それらがサイトにインストールされてアクティブ化されたら、以下で説明するチュートリアルに従ってください。下の画像で見ることができるように、WordPressにトップバーを作成する方法を紹介します。

ステップ01：HappyAddonsのテーマビルダーに移動します

HappyAddons>テーマビルダーに移動します。 Elementorプラグインと同様に、HappyAddonsプラグインのテーマビルダーを使用して、ヘッダー、フッター、ブログ投稿テンプレート、およびアーカイブページを作成できます。

ステップ02：ヘッダーセクションに移動します

トップバーがWebヘッダーの上に表示されるため、ヘッダーセクションからカスタマイズする必要があります。したがって、Elementorオプションを使用して編集でヘッダーを開きます。

Elementorでオフキャンバスコンテンツを作成する方法を学びます。

ステップ03：ヘッダーの上に新しいコンテナを追加します

ヘッダーにカーソルをホバリングするには、プラス（+）アイコンが表示されます。このアイコンをクリックすると、上記のヘッダーに新しいコンテナを追加できます。それをしてください。

ステップ04：トップバーをカスタマイズしてコンテンツを追加します

トップバーの背景に対照的な色を追加する必要があります。これを行うには、コンテナの6倍のアイコンをクリック> [スタイル]タブ> [色]オプション> [色]を選択します。

テキストエディターウィジェットをトップバーセクションに追加します。これにより、テキストコンテンツをセクションに追加できます。

右側のサイドバーのテキストエディターの下に、上部バーにリアルタイムで表示される希望のテキストコンテンツを書くことができます。

テキストエディターセクションの下にあるマークされたオプションから、トップバーに追加したテキストの色と大胆さを変更できます。

単語の間にスペースを追加して、特定の単語を下線にすることもできます。このチュートリアルのために、これをテキストにしました。以下で見ることができます。

HappyAddonsを使用すると、トップバーの背景に粒子効果を追加できます。幸せな粒子効果は、小さな輝く粒子がウェブページで動的に動き、活気のある魅力的なユーザーエクスペリエンスを作成する視覚的なアニメーション技術です。

これを追加するには、スタイル>ハッピーパーティクルエフェクトに移動します。その後、粒子のバックグラウンドを有効にするために切り替えます。

次に、粒子スタイル、粒子の色、不透明度、粒子数、粒子サイズ、および移動速度を選択できます。自分でできることを願っています。

短いクリップを追加して、Happy Particle機能がどのように機能するかを確認できます。これは本当にトップバーをとても見栄えが良いです。

ボーダーセクションを展開します。必要に応じて境界幅と色を設定できます。ただし、ボーダーを追加することはトップバーにとって重要ではないと考えています。だから、あなたはそれを避けることができます。

次に、 Shape Dividerセクションを展開します。 Shape Dividerオプションを使用すると、セクションの上部または下部にカスタマイズ可能な動的な形状を追加できます。

ただし、このオプションはトップバーにとっても重要ではありません。だから、あなたがそれを避ける方が良いです。しかし、この機能をトップバーに追加したい場合は、それを行うことができます。

Elementorを使用してインフォグラフィックWebページを作成する方法に関するガイドを次に示します。

ステップ05：トップバーの高度な設定を構成します

最後に、 [Advancedタブ]にご覧ください。ここでは、マージン、パディング、アライメント、順序、位置、高さ、モーション効果、応答性などをカスタマイズするための多くのオプションが得られます。必要なカスタマイズを自分で行います。

ステップ06：デバイスタイプのトップバーを非表示

必要なデバイスの上部バーを隠すことができます。たとえば、タブレットデバイスの上部バーを非表示にしたいと考えています。これを行うには、レスポンシブセクションを展開します。次に、トップバーを非表示にするデバイスモードのオプションを切り替えます。

ステップ07：トップバーモバイルのレスポンシブにします

Elementorパネルのフッターにある応答モードオプションをクリックします。次に、モバイルポートレートモードを選択します。

デスクトップモードでどのように表示されるかとは異なり、トップバーのコンテンツが3行に表示され、完全に揃っていないことがわかります。

画面サイズに合わせてテキストを良く見せるために、モバイルポートレートモードにとどまることで、必要なカスタマイズを行います。

テキストを中央に揃えました。今は良く見えませんか？必要な方法でさらにカスタマイズできます。

ステップ08：変更を公開/更新します

すべてのカスタマイズが完了したら、Elementorパネルの下部にあるパブリッシュ/更新ボタンをクリックして、すべての変更を保持します。

Elementorを使用してWordPressでライトボックスを作成する方法を調べます。

ステップ09：ウェブサイトのトップバーをプレビューします

さて、あなたのウェブサイトのフロントエンドに来てください。トップバーがサイトの上によく表示されていることがわかります。

したがって、Elementorプラグインを無料で使用して、WordPressの上部バーを簡単に作成できます。

最終的な考え

このチュートリアルを楽しんだことを願っています。しかし、トップバーから最高のものを得るには、注意深く従わなければならないいくつかの重要なことがあります。あなたのウェブサイトのブランディングと一致する、清潔で視覚的に魅力的なデザインの維持に焦点を当てます。読みやすさのために対照的な色を選択し、明確で簡潔なテキストを使用し、視聴者に関連するメッセージを保持します。

さらに、モバイルの応答性を最適化して、ユーザーエクスペリエンスを妨害することなく、すべてのデバイスでトップバーが機能し続けるようにします。訪問者を圧倒する可能性があるため、あまりにも多くの情報でトップバーを過負荷にすることは避けてください。アニメーションやエフェクトを使用する場合は、プロフェッショナリズムを維持するために微妙に保ちます。

混乱や質問を念頭に置いている場合は、以下のコメントボックスを使用してそれらについてお知らせください。