Elementor を使って WordPress でメガメニューを構築する方法

ナビゲーション メニューのない大規模な Web サイトを想像できますか? 
とんでもない！

94% of users say it’s the most important feature of a website. So, easy navigation matters! That’s why mega menus are so effective. They organize categories and subcategories into a single, clear layout, making it easy for visitors to find what they need.

Sites like アマゾン そして eBay use mega menu to give the best user experience. Mega menus are ideal for e-commerce, news, blogs, and businesses with lots of content.

This article will show you how to create a functional and stylish mega menu Elementor を使用。

What do you need to create the mega menu with Elementor?

The only thing you need to create the mega menu using Elementor is ElementsKit.

を使用して、 ElementsKit メガ メニュー ビルダー Elementor ライブ コンテンツ インターフェイスを使用して、あらゆるタイプの Megamenu を作成およびカスタマイズできます。

You will get variations in the mega menu such as the Nav menu そして 縦型メガメニュー along with many customization options. 

Overall, ElementsKit Elementor Mega Menu is a full featured-packed module for your professional site that easily ranks top among the best WordPress Mega Menu builders for Elementor.

このチュートリアル ブログに従うには、2 つのことが必要です –>

• エレメンター
• ElementsKit

または、次の手順に従ってください。

確認する メガメニュー モジュールは の上 から ElementsKit → モジュール.

ステップ #1: メニューの追加

Elementorでメガメニューを作成するには、WordPressダッシュボードからメニューを作成する必要があります。そのためには、

• 案内する 外観 > メニュー.
• クリック 新しいメニューを作成する.
• 提供する メニュー名 > チェック チェックボックス > メニューの作成.
• クリック カスタムリンク > 提供 リンク そして メニュー項目の追加 同じやり方で。

ステップ #2: メガメニューのコンテンツをカスタマイズする

In this step, you can add mega menu items from the WordPress menu you have created.

チェックボックスにチェックを入れます 「メガメニュー コンテンツに対してこのメニューを有効にする」 > をクリックしてください 設定アイコン付きメガメニュー メガメニューを追加したいメニュー項目。

• ポップアップが開くので、 メガメニュー オプション、そして 保存。その後、 をクリックしますe メガメニューコンテンツの編集 ボタン。

テンプレートの選択

• クリック エレメントキット テンプレート ライブラリ アイコンをクリックし、次の場所に移動します ヘッダー.
• クリック ヘッダ > メガメニューの内容 > 任意の メガメニュー.

コントロールレイアウト

• 内部セクションを編集する 点線のセクションをクリックします。
• コンテンツ幅ボックス: 右または左にドラッグして、コンテンツの幅をカスタマイズします。
• コンテンツ全幅： 選択する 全幅.

列間隔を選択

• カラムギャップ=> カラムギャップを次から選択してください 落ちる。

ポジションを選択してください

• 身長： 左から右にドラッグして高さを選択します。
• 垂直方向の配置: Select Vertical Align from the Drop Down.
• オーバーフロー： オーバーフローのデフォルトまたは非表示を選択します。

選択する HTMLタグ

• を選択してください HTMLタグ から 落ちる.

メガメニューの見出しテキストをカスタマイズする

• アイコンの種類を選択.
• アイコンの追加を有効にする.
• ヘッダーアイコンをアップロード.
• タイトルの追加または編集.
• 編集の説明を追加.

テキストのカスタマイズ

• テキストの追加または編集.
• サブタイトルの追加または編集.
• ラベルの表示を有効にする.
• ラベルの追加または編集.
• 背景色、タイポグラフィ、パディング、配置、半径をカスタマイズします.

ステップ #3: アイコンをカスタマイズする

1. クリック 'アップデート' をクリックしてメニューを保存し、エディターを閉じます。
2. 次に、[アイコン] タブに移動し、カラー パレットから任意の色を選択します。
3. アイコンライブラリからアイコンを選択します。
4. 次にサイトに移動し、選択したアイコンと色が表示されます。

ステップ #4: バッジをカスタマイズする

• テキストの追加または編集.
• 選ぶ バッジの色.
• 選ぶ バッジの背景色.
• クリック 保存.

ステップ#5: 設定

デフォルトの幅

• メガ メニューの幅を選択します: デフォルト.
• メガ メニューの位置を選択します: デフォルト.
• ウィンドウを保存します。
• サイトビュー: デフォルトの幅とデフォルトの位置を表示します。

デフォルトの相対 

• メガ メニューの幅を選択します: デフォルト.
• メガ メニューの位置を選択します: 相対的.
• クリック 保存.
• サイトビュー: デフォルトの幅と相対位置を表示します。

デフォルトの全幅

• メガ メニューの幅を選択します: 全幅.
• メガ メニューの位置を選択します: デフォルト.
• クリック 保存.
• サイトビュー: デフォルトの位置で全幅を表示します。

全幅の相対位置

• メガ メニューの幅を選択します: 全幅.
• メガ メニューの位置を選択します: 相対的.
• クリック 保存.
• サイトビュー: 表示中 全幅と相対位置.

カスタムのデフォルト幅

• メガ メニューの幅を選択します: カスタム幅.
• 任意のカスタム幅を指定しますが、デフォルトでは 750ピクセル.
• メガ メニューの位置を選択します: デフォルト.
• クリック 保存.
• サイトビュー: 表示中 デフォルトの位置でのカスタム幅.

カスタムのデフォルト幅 相対的

• メガ メニューの幅を選択します: カスタム幅.
• 任意のカスタム幅を指定しますが、デフォルトでは 750ピクセル.
• メガ メニューの位置を選択します: 相対的.
• クリック 保存.
• サイトビュー: 表示中 相対位置を使用したカスタム幅.

ステップ #6: ヘッダーテンプレートを作成する

ここで使用できるのは、 Elementor ヘッダー テンプレート または、 ElementsKit ヘッダー テンプレート。

• 今すぐ検索 ナビメニュー > ドラッグして 駅ナビメニュー そして 落とす 選択した領域で。 ElementsKit Nav メニューを必ずドラッグしてください。ドラッグしないと、作成した Megmenu が表示されません。
• に行く メニュー設定 > 作成したものを選択 ヘッダーメニュー ドロップダウンから。
• ここから任意のタイプのウィジェットを追加して、ヘッダー テンプレートをカスタマイズできます。

• 完了したら、 アップデート ボタンを押してメニューを保存します。
• サイトにアクセスすると、選択したメガメニューがそれに応じて表示されていることがわかります。

WordPressでメガメニューを作成する方法の詳細については、ElementsKitのドキュメントを参照してください。 Elementor のメガメニューウィジェット.

次は何ですか？

Once you’ve finished creating the mega menu in Elementor, make sure to preview it. If you’re satisfied with the style, finalize and publish it. However, if you later find that it isn’t as attractive as you initially thought, you can change it at any time.

To understand how users interact with the style, consider integrating a heatmap tool like Clarity.

Gutenberg を使ってメガメニューを作成する

WordPressブロックエディタでウェブサイトを構築した場合は、 Gutenbergでメガメニューを作成する スムーズに。GutenKit ブロック エディター プラグインには、Gutenberg で WordPress メガ メニューを作成する最も簡単な方法が付属しています。

With GutenKit, you can create the entire menu in the editor and design mega menu in both vertical and horizontal orientation.

All you need is to install GutenKit Pro plugin and start building your beautiful site in Gutenberg.

まとめ

ついに、無事に最後までやり遂げることができました。このチュートリアルがお役に立てば幸いです。そして、次を使用してカスタム Elementor メガ メニューを構築できるようになりました。 ElementsKit!

ここでは、これらすべての手順を 1 つのビデオで見ることができます。

さらに懸念がある場合、または他の問題が発生した場合は、コメント欄でお知らせください。