Elementorナビゲーションメニュー– WordPressWebサイト用のすばらしいメニューを作成します

あなたのウェブサイトのUI / UXを改善するのに役立つ素晴らしいメニューを作成する方法を探していますか？ もしそうなら、あなたは正しい場所にいます。 ここでは、あなたを助けるための詳細なガイドをまとめました。

最初に、WordPressWebサイトのメニューを作成する方法を段階的に説明します。 そして、そのコツをつかんだら、Elementor NavigationMenuウィジェットを使用してWordPressメニューをカスタマイズおよびスーパーチャージする方法について説明します。

目次：

• なぜカスタムナビゲーションメニューが必要なのですか？
• Elementorを使用して基本的なWordPressメニューを作成する
• 1. WordPressウェブサイト用のシンプルなメニューを作成する
• 2.ナビゲーションメニュー項目を選択してカスタマイズします
• 3.サブメニューの作成–親と子のメニュー項目（オプション）
• 4.メニューの場所を管理し、公開します
• Elementor pro nav 'ウィジェットを使用してナビゲーションメニューを作成する方法
• Elementor Nav-Menuウィジェットの主な機能
• nav-menu proウィジェットでメニューを作成する
• モバイルレスポンシブメニュー
• まとめ

なぜカスタムナビゲーションメニューが必要なのですか？

ナビゲーションメニューは、サイトにトラフィックをもたらすだけでなく、SEOランキングを向上させるためにも重要であることを理解することが重要です。

実際、ナビゲーションメニューは主にユーザーエンゲージメントのために設計されていますが、これが唯一の目的ではありません。

2番目に重要な要素は、「WebCrawler」またはWebサイトをクロールしてコンテンツを関連するレベルにインデックス付けし、検索エンジンにレポートして適切な場所にコンテンツをランク付けするように設計されたボットの役割を監視することです。

したがって、あまりに複雑なメニューを作成している場合、ボットがコンテンツをランク付けすることは難しくなりますが、訪問者も失われます。

要するに、「ナビゲーションのしやすさ」は、より良いユーザーエクスペリエンスを向上させるための極めて重要な貢献者であるだけでなく、サイトのランキングとトラフィックの向上にも不可欠な役割を果たします。

多くのビジネスWebサイトが複雑なメニューバーの代わりに単一のナビゲーションアイコンを保持することは、クリックしたときに全画面メニューにロードされるという優れた理由です。

100％レスポンシブなナビゲーションメニューを備えたElementor proウィジェットのおかげで、コードを使用せずに、ピクセルパーフェクトで非常に柔軟なメニューバーを作成できます。

このチュートリアルでは、 Elementorナビゲーションメニューウィジェットを使用して、カスタマイズされた高度なWordPressメニューを取得する方法を示します。

Elementor Navigationウィジェットを始める前に、Elementorの無料バージョンを使用して簡単なWordPressメニューを作成する方法を見てみましょう。

Elementorを使用して基本的なWordPressメニューを作成する

これで、WordPressメニューを作成するために、特別なpluginをインストールする必要はありません。 デフォルトでは、WordPressには使いやすいメニュービルダーが付属しており、Webサイトのシンプルなナビゲーションメニューを作成するのに役立ちます。

そうは言っても、メニューのカスタマイズオプションにアクセスすることはできません。 現在アクティブなWordPressテーマのデザインを引き継ぎます。 しかし、それだけが必要な場合は、これがWordPressWebサイトのナビゲーションメニューを設定するための優れた方法です。

1. WordPressウェブサイト用のシンプルなメニューを作成する

まず最初に、WordPressバックエンドダッシュボードにログインする必要があります。

次に、左側のサイドバーから[外観]>[メニューます。 ここでは、左側に「メニュー項目の追加」、右側に「メニュー構造」がある2列のレイアウトがあります。

メニュー構造の下に、「メニュー名」のフィールドがあります。 これが、今作成するメニューの名前になります。 それをメニュー1と呼びましょう。

注：心配しないでください。 読者はメニュー名を見ることができなくなります。 これは、さまざまなメニューをすべて整理するのに役立つ機能です。

メニューに名前を付けたら、「メニューの作成」ボタンをクリックして利用できるようにします。 次に、さまざまなメニュー項目を追加する必要があります。

2.ナビゲーションメニュー項目を選択してカスタマイズします

次に、新しいメニューにメニュー項目を入力する部分があります。 左側の[メニュー項目の追加]セクションの下に、メニューに追加できるものの整理されたリストがあります。

デフォルトでは、これにはページ、投稿、ランディングページ、カスタムリンク、およびカテゴリのいずれかが含まれます。

チェックボックスを使用して追加するメニュー項目を選択し、「メニューに追加」ボタンをクリックするだけです。 これにより、選択したすべてのメニュー項目がメニューに表示されます。

注最新 、 [すべて表示] 、 検索]を切り替えるオプションがあることに。 アイテムが多い場合は、これらのオプションを使用することを忘れないでください。

すべてのメニュー項目の追加が完了したら、[メニューの保存]ボタンを押して、次の手順に進みます。

3.サブメニューの作成–親と子のメニュー項目（オプション）

デフォルトでWordPressでサブメニューも作成できることをご存知ですか？ サブメニュー構造を作成するときは、親メニュー項目と子メニュー項目があります。

ユーザーが親メニュー項目にカーソルを合わせると、その下に隠されているすべての子メニュー項目が表示されます。

かっこいいでしょ？

サブメニュー構造を作成するには、親メニューに表示するメニュー項目を選択するだけです。 次に、子メニュー項目として必要なすべてのメニュー項目をその下にドラッグアンドドロップします。 右にドラッグするだけで完了です。

4.メニューの場所を管理し、公開します

新しいメニューを作成し、サブメニューを追加したので、次はその場所を管理します。

メニューエディタの上部に、「場所の管理」というオプションが表示されます。 それをクリックすると、次の画面のようなものが表示されます。

これで、使用可能なメニューの場所は、インストールしたテーマによって異なります。 この例ではampル、我々は3つのメニューをサポートテーマを持っています。

利用可能な各メニューの場所にメニューを割り当てたら、「変更を保存」をクリックします。それだけです。

これで、WordPressがデフォルトで提供するすべての基本的なメニュー機能を理解できました。 ただし、さらにカスタマイズや機能が必要な場合は、Elementor ProNavメニューウィジェットについて学習してください。

Elementor pro nav 'ウィジェットを使用してナビゲーションメニューを作成する方法

カスタマイズされたナビゲーションメニューをWordPressサイトに追加する場合は、ElementorProバージョンが必要です。 Elementor Proバージョンには、300以上のテンプレート、テーマビルダー、ポップアップウィジェット、WooCommerceウィジェット、その他多くの興味深い機能など、他の多くの特別な機能とともにElementornavウィジェット

ナビゲーションメニューウィジェット自体の主な機能は何ですか？ ここでは簡単な紹介です。

Elementor Nav-Menuウィジェットの主な機能

• ナビゲーションメニューウィジェットを使用すると、メニューを好きな場所に自由に配置できます。 ヘッダーまたはページの上部または任意の場所。
• サイトに複数のメニューを追加したり、ページに個別またはグローバルに追加したりできます。
• アニメーション、ホバリング効果、アクティブステータスを使用して、メニューに眩しい印象を与えます
• サイトのモバイル対応メニューを作成し、モバイル画面でのサイトの外観を制御します
• メニューバーの色、タイポグラフィ、パディングまたはその他の調整をカスタマイズする
• 配置、間隔、およびパディングの適切な精度でピクセルパーフェクトなメニューを作成します。

nav-menu proウィジェットでメニューを作成する

上記で説明したように、基本的なWordPressメニューを作成する必要があります。その後、pro-nav-menuウィジェットを使用してデフォルトのWordPressメニューをカスタマイズします。 プライマリリストを作成したら、次のステップはそれを希望の場所、つまりヘッダーセクションに追加することです。

基本設定が完了したら、nav-menuウィジェットを使用してメニューをカスタマイズしましょう。

設定セクションの一番上の隅には、3つのオプションがあります。 コンテンツ、スタイル、高度。

レイアウトセクション：水平、垂直、または非表示のドロップダウンアコーディオンの3つのオプションがあります。

• 水平：水平レイアウトは、サイトで使用される最も一般的なレイアウトです。 画面全体に左から右に広がります。
• 垂直：多くのサイト、特にクリエイティブサービスを提供するサイトにも垂直レイアウトがあります。 垂直レイアウトの場合、ナビゲーションバーの広がりは上から下になります。
• ドロップダウン：ドロップダウンメニューもかなり一般的です。 ドロップダウンは垂直レイアウトであり、表示するにはユーザーとの対話が必要です。 それらは主にすっきりとしたデザインを作成するために使用されます。

セクションの整列：このセクションは、メニューテキスト項目の整列に役立ちます。 中央、右、または左。

アニメーションセクション：このセクションでは、アニメーション効果の下、上、または二重線のアニメーション効果を追加できます。 フレーム、背景、微妙なテキストアニメーションを選択することもできます。

下線付きのアニメーションは次のとおりです。

• フェード：フェードアニメーションは、メニュー項目の下にフェードアニメーションを提供します。
• スライド：スライドアニメーションは、メニュー項目の下のバーをスライドさせます。
• 成長：成長アニメーションは中央から外側に向かって成長し、成長の感覚を与えます。
• ドロップイン：ドロップインアニメーションは下から上に流れます。
• ドロップアウト：ドロップアウトアニメーションは上から下に流れます。

同様に、フレーム、オーバーライン、二重線、背景、およびテキストアニメーションがあります。 それぞれが独自のアニメーションのセットを提供しており、自分でチェックして、何が得られるかを学ぶことができます。

ポインタセクション：ドロップダウンメニューからポインタの種類を選択します。

サブメニューインジケーターセクション：Elementorウィジェットには多くのサブメニュースタイリングオプションが満載です。 メニューの色、スタイル、背景を制御できるだけではありません。

パディングとメニュー間隔：パディングはすばやく調整できます。 メニューとサブメニューの水平方向のパディング、垂直方向のパディング、中間スペース、右、左、および中央揃えを変更できます。

Elementorは、メニューの間隔とパディングに非常によく近づいています。 彼らはドアの後ろで一生懸命働いて、彼らが考えているデザインを簡単に作成できるように、開発者にツールを持ってくることができるようにしました。

メニュー間隔には、次のような多くのオプションがあります。

• メニュー項目間のスペース
• メニューおよびサブメニュー要素の水平および垂直パディング
• 中央、左、右、および両端揃え。

色の背景とタイポグラフィ：希望の配色と背景色を使用して、カスタマイズされたブランドの外観を得ることができます。 また、透明または半透明のメニューオプションを選択することもできます。

デザイナーは、これらのオプションを可能な限り試して、好みに応じて背景をデザインすることができます。

モバイルレスポンシブメニュー

モバイルはWebの重要な部分であるため、Elementor開発者は、モバイル用のナビゲーションバーも作成できるツールも提供しています。

Elementorウィジェットを使用すると、WordPressのモバイルメニューオプションを完全に制御できます。 Elementor設定セクションの下部にモバイル画面設定のオプションがあり、モバイル画面オプションを表示できます。

つまり、Elementorのモバイルメニュー機能は次のとおりです。

• モバイルでの全幅：全幅または制限付き幅を設定するオプションもあります。
• タブレットまたはモバイルブレークポイント：ブレークポイント設定を使用して、モバイルまたはタブレットのモバイルメニューを設定できます。
• 垂直メニューとアコーディオンメニュー： Elementorには、折りたたみ可能なハンバーガーアイコンを表示するオプションもあります。
• 整列の切り替え：ハンバーガーアイコンは、中央、左、または右に整列できます。
• 脇/中央の配置：モバイルメニューの配置を選択します。

レスポンシブナビゲーション：メニューのレスポンシブポジショニングを提供します。

まとめ

メニューは、どのWebサイトでも最も重要な機能の1つです。 それは訪問者があなたのウェブサイトをウォークスルーするのを助けます、そしてあなたが賢くリストを作成したならばそれはあなたの訪問者をあなたのサイトに長い間保つのに役立ちます。 メニューは、ウェブサイトのレイアウト全体、ヘッダー、フッターセクションと同じくらい重要です。

したがって、メニューウィジェットは、すべての重要な機能を備えた独自のブランドルックを提供できる必要があります。 Elementor Navigationウィジェットは、顧客がブランドの声に合うようにメニューセクションをカスタマイズできる豊富な機能が付属しています。 これで、Webサイト全体、ランディングページ、ヘッダー、またはその他の表示したいセクションで、カスタムメイドのスタイリッシュなメニューを使用できます。