WordPress に Elementor メニュー項目を追加する方法

Want to Add a Menu to Your Elementor Site?

This guide will show you how to create, set up, and customize a navigation menu in Elementor using the ElementsKit Nav Menu Widget.

Navigation menus are key for any website, helping visitors quickly find what they need. Most site owners place menus in the header for easy access across all pages.

With the tips in this guide, you’ll have a functional, stylish menu ready in no time. Let’s get started!

What is an Elementor Mega Menu in WordPress?

Mega menus have become a popular way to improve website navigation, helping users easily browse your content and find what they need.

In WordPress, the default navigation menu allows you to include pages, posts, categories, and URLs, with the design typically controlled by your theme. However, upgrading to a mega menu offers more flexibility and customization to provide better site’s experience to users.

Why Use the ElementsKit Nav Menu Widget?

• You can create custom and advanced menus in the drag and drop style
• ElementsKit offers all-in-one solution along with the navigation menu

With the ElementsKit add-on for Elementor, you can build a feature-rich mega menu that enhances your website’s functionality and design effortlessly.

🔔 Did you know?
Using a WordPress theme or page builder often limits your control over the header and footer design.
What about getting full control in customization? Check this out to learn more ヘッダー フッターを作成およびカスタマイズする方法 – Elementor Page Builder

ElementsKit による Elementor の Mega Menu が提供するもの:

のように mega menu for ElementorElementsKit は、通常の WordPress メニューを「ハッキング」するためのさまざまな可能性も開きます。

より具体的に言うと、プラグインは次の点で役立ちます。

• Customize menus with tags, colors, hover effects, and icons
• Style top-level and submenu appearances
• Create vertical or horizontal menus
• Choose header layouts from the ElementsKit library
• Add animations for submenu displays
• Drag-and-drop the nav menu widget with one click
• Compatible with eCommerce platforms like WooCommerce
• Build content using Elementor widgets
• Fully responsive with off-canvas menus for tablets
• Display builder content or simple lists as submenus on tablets

そしてもちろん、最も良い点は、 ElementsKit Nav メニューは無料とプレミアムの両方で利用できます バージョン。したがって、有料サブスクリプションを購入しなくても、サイトでこの素晴らしい Elementor メニュー機能を体験することができます。

Elementor でメニュー項目を作成する方法

実際の事例をいくつか見て、WordPress メガ メニューのレッスンを確認してみましょう。これで、WordPress メガ メニュー、ヘッダーを作成し、そのコンテンツを追加できるようになります。

メニューを作成する

Elementor メニューを作成するには、次のことを行う必要があります。 オンにする ElementsKit 起動時のメガ メニュー オプション モジュール ページをオンにしてから、 変更内容を保存 ボタン。

Creating a menu in Elementor requires a few simple steps. Go to your WordPress ダッシュボード そして、 をクリックします メニュー。 その後、という名前のセクションが表示されます メニュー構成。次に、あなたのものを入力してください メニュー名 またはメニューヘッダーをクリックして メニューの作成.

今すぐ拡張してください カスタムリンク そしてあなたの URL 同様に リンクテキスト, then click on メニューに追加.

📝クイックノート
同じ方法を繰り返すことで、メガ メニュー項目を必要なだけ追加、削除、編集できます。

ElementsKit を介して Elementor にメニュー項目を追加します。しかしその前に、✅にチェックを入れる必要があります。 メガメニューコンテンツのメニューを有効にする section as shown in the image, underneath the Menu Name section. 

すると、メガメニュータグが表示されます。 リンクテキスト。をクリックした後、 メガメニュー タグを付けるとポップアップが開きます。

Mega Menu オプションを有効にするには、有効化をクリックする必要があります。 メガメニューのコンテンツを編集する ボタンを押して保存します。準備は完了です! 

🧐 Elementor メニューの詳細
ドキュメントもぜひご覧ください ElementsKit Elementor 用メガメニュービルダー

メニューのインポート (垂直メガメニュー)

垂直メニューを作成するには、まず次のことを行う必要があります。 オンにする の 垂直メニュー ウィジェット。次に、をクリックします 変更内容を保存.

次に、をクリックします テンプレート ダッシュボードの左側にあります。クリックしただけで テンプレートのインポート.

次に選択する必要があります ファイルを選ぶ デバイスから。次に、クリックするだけです 今すぐインポート。インポートされたすべてのデータが一度に表示されます。

さらに、データを使用して垂直メニューを作成するには、次の場所に移動する必要があります。 外観 次に、をクリックします メニュー。上記からメニューを作成することもできます。詳細については、垂直メニューのドキュメント サイトにアクセスしてください。

メニューのカスタマイズ 

コンテンツをカスタマイズします。そのためには、 メガメニューのコンテンツを編集する ボタン。ボタンをクリックするとすぐに、Elementor メニュー スタイル画面がポップアップ表示されることがわかります。 

クリックするだけです。 ElementsKit アイコン そしてどれを選択しますか 事前定義されたヘッダー あなたのウェブサイトに挿入したい。 

クリックした直後 ElementsKit ウィジェット ボタン、 ウィジェット ライブラリに移動します。この中には、大量の既製のページ、テンプレート、セクションが含まれています。ただし、メガ メニュー セクションを作成するには、 セクション

Elementor でメニュー項目を作成およびカスタマイズします。メガ メニューのアイテムのレイアウトを選択し、思う存分カスタマイズを開始する必要があります。

ここで見つかります 3部 (レイアウト、スタイル、詳細) ElementsKit を使用して Elementor メニューをカスタマイズする方法:

レイアウト：
このセクションでは、次のことを確認します。 複数のオプション Elementor メニューのレイアウトと構造を編集します。メガメニューの表示方法を完全に制御できます。

ElementsKit メガ メニュー ウィジェットを使用すると、 コンテンツの幅、 全画面メニューにすることも、好みのサイズにカスタマイズすることもできます 右または左にスライドして。 カラムギャップ メガメニュー間のメニューもお好みに合わせてカスタマイズできます。

ElementsKit Elementor メニューを使用すると、メニュー項目の高さを編集できます。編集するための複数のオプションもあります 垂直方向の整列, オーバーフロー, HTMLタグ それはあなたの要求に応じて変更できます。

スタイル：
ElementsKit メガ メニュー スタイル オプションを使用すると、メニュー全体の外観を変更できます。より具体的には、 背景, 背景オーバーレイ, 国境, シェイプディバイダー、 そしてもちろん タイポグラフィ.

ElementsKit の Elementor メガ メニュー ウィジェットは救世主です。メニュー項目を最大限に活用するのに役立つ、さまざまなメニュー スタイル要素が含まれています。 

高度な：
WordPress メニュー用のメニュースタイルの高度なオプションは、あなたが常に探していたものです。はい、ElementsKit Elementor メガ メニュー オプションは、高度なセクション全体にアクセスして編集するのにも役立ちます。 

新しいメニュー レイアウトを作成できます。 ElementsKit には より高度な代替手段 合計するような 効果, 粘着性のある, モーションエフェクト, ホバリング カスタマイズなど、編集エクスペリエンスをさらに向上させ、メガ メニューをよりスマートにする多くの機能が含まれています。 

Elementor のナビゲーション メニューのセットアップ

最後で最も重要な部分は、Elementor Web サイトでヘッダーを作成するために必要なメガ メニューを同期することです。 

次に、Elementor カスタム ヘッダー テンプレートを作成する方法を説明します。さて、ElementsKit ナビゲーション メニュー ウィジェットにはもう 1 つの良いニュースがあります。事前に構築された WordPress メニュー レイアウト オプションをクリックするだけで、ナビゲーション メニュー レイアウトを作成できます。 

始めましょう！ 

まず最初に、次の場所に行く必要があります。 ElementsKit WordPress ダッシュボードで、 ヘッダーフッター、Web サイト上のナビゲーション メニュー ウィジェットをアクティブにします。 

次に、をクリックします 新しく追加する テンプレートの直後に記載されています。 

をクリックした後、 新しく追加する ボタンA テンプレートの設定 ポップアップが表示されます。これは、Web サイトにメガ メニューを統合する最後の部分です。

このセクションでは、ナビゲーション メニューに「」という名前を付ける必要があります。 ヘッダーのタイトル。変更することもできます ヘッダーの状態 そして、「アクティベーション」をクリックします (準備が整い、メガ メニュー項目に満足している場合)。

最後の部分では、忘れずにクリックしてください。 エレメントで編集する 直前のボタン 変更内容を保存 ボタン。 

ここでは、ElementsKit のナビゲーション メニュー ウィジェットを使用してメガ メニューを追加する 2 つの方法を説明します。

方法 1: 

Web サイトにナビゲーション メニュー ウィジェットを追加するには、それをクリックした後に実行できる最初の方法 エレメントで編集する ボタンをクリックするだけです。ElementsKit をクリックするだけです。 ウィジェットアイコン それからに行きます セクション を選択し、 ヘッダースタイル どちらでもお好みで。 

その後、あなたのものが表示されます ヘッダ WordPress ダッシュボードから追加したタイトルが選択画面に表示されます。 メニューセクション。ヘッダー タイトルをクリックするだけで、すべてのメガ メニュー項目が表示されることがわかります。

方法 2:

ナビゲーション メニュー ウィジェットを埋め込むこともできます。 ドラッグドロップオプション また、その周囲のさまざまな要素 (画像、ビデオ、他のセクションなど) も追加します。

必要なのは、任意のタイプのセクションを選択することだけです (この例では 3 つのセクションを選択しました)。 Elementor ダッシュボードから追加したいウィジェットを検索します。

この例では、画像、ナビゲーション メニュー、およびビデオをドラッグしました。セクションとウィジェットは好きなだけ追加できます。 

その後、再度同じ方法を使用してアクティベートできます。 ナビメニュー: で メニューを選択 セクションに、WordPress ダッシュボードから追加したヘッダー タイトルが表示されます。ヘッダー タイトルをクリックするだけで、すべてのメガ メニュー項目が挿入されていることがわかります。 

これで、ナビ メニュー ウィジェットの使用が非常に簡単であることがわかり、ロックン ロールの準備は完了です。 ElementsKit ではオフキャンバス メニューも作成できることに注意してください。 

🛠 追加情報
について詳しく知るには、 ElementsKit のオフキャンバス メニュー、最新のビデオをチェックすることを忘れないでください。 ElementsKit を使用してオフキャンバス メニューを構築する

最終的な考え

メガ メニューは、Web サイトのナビゲーションを改善するための素晴らしいツールです。彼らはあなたを許可します 多数のカテゴリや商品をユーザーが使いやすいように整理するため コンテンツを閲覧するには。

Elementor 用の ElementsKit アドオンを使用してメガ メニューを作成すると、いつでも無料で最高のサポートが提供されます。自分で追加する場合は、ElementsKit アドオンの組み込み Nav Mega Menu オプションから始めることができます。

ElementsKit は簡単で、セットアップや調整にほとんど時間がかからず、使い方も簡単です。ただし、この記事がメガメニューの全体像の概要を説明するのに十分役立つことを願っています。

Mega Menu、Nav Menu、またはその機能に関してご質問がある場合は、以下にコメントを残してください。

この記事が気に入った場合は、私たちのブログに参加すると、さらに役立つヒントやブログがきっと見つかります。 WPmet コミュニティ フォローしてください フェイスブック/ツイッター。最後に、チャンネル登録も忘れずにお願いします YouTube 役立つチュートリアルをご覧ください。