Creating a WordPress mega menu in Elementor is easy with ElementsKit, and it doesn’t require Elementor Pro. ElementsKit offers a dedicated Mega Menu module that lets you design rich, multi-column menus using Elementor’s visual editor.

Watch the video guide on Elementor Mega Menu Building:

または、Elementor でメガメニューを作成する方法についてのステップバイステップの指示に従ってください。

前提条件: #

• Elementor, a page builder plugin (Free version is enough)
• ElementsKit プロ, a WordPress mega menu plugin for Elementor

ElementorでWordPressメガメニューを作成する方法 #

まず、 WordPressでElementorメガメニューを作成する ElementsKitを有効にしてください メガメニュー モジュール。

• 案内する ElementsKit on your WordPress dashboard
• に行く モジュール
• Find and turn ON Header Footer and Mega Menu
• 保存 変更

Step 1: Configure WordPress Menu #

に WordPressメガメニューを作成する on your website –

• 案内する 外観 > メニュー WordPress ダッシュボードから。

• 入力します メニュー名.
• クリックしてください メニューの作成 ボタン。

WordPress lets you add menu by selecting pages, custom links, categories, etc. according to your needs.

Lets add pages to the mega menu そして変更を保存します。

あなたもすることができます メガメニューにアイテムを追加する. For that –

• 拡大する カスタムリンク on the “Add menu item” on the right column.
• 入力します URL そして リンクテキスト。
• クリック メニューに追加.

Then add other menu items in the same way with this WordPress menu customizer, ElementsKit.

その後、 make sure you’ve checked the checkbox for “メガメニューコンテンツにこのメニューを有効にする”. When the mega menu is enabled, you will click the メガメニュー設定アイコン メニュー項目にマウスを移動したとき。

Step 2: Customize Elementor Megamenu Content With ElementsKit #

メガメニューの設定アイコンをクリックすると、ポップアップが開きます。ポップアップで、

• メガメニューを有効にするにはボタンを切り替えます。
• クリックしてください 保存 ボタン。
• その後、 メガメニューコンテンツの編集 ボタン。Elementor エディター ボタンに移動します。

In the next step, a window will appear where you need to click on the ElementsKit テンプレート ライブラリ アイコン.

• に行く セクション
• Search mega menu
• を選択 メガメニュー template from the list and insert

You’ll see that your inserted pre-designed mega menu template item will display. 内部セクションを編集する 点線のセクションをクリックします。

容器

• Container Layout: Select the structural system, like Flexbox or Grid, to organize your elements.
• Content Width: Choose between 全幅 または 箱入り for your horizontal boundaries.
• 幅： Set the specific horizontal percentage or pixel size.
• Min Height: Set the minimum vertical space the container must fill.
• Items Management
• 方向： Stack items vertically in a column or horizontally in a row.
• コンテンツを正当化する: Distribute items along the main axis, such as center or spaced out.
• アイテムを揃える: Control how items align along the cross axis, using start, 中心, 終わり、 または stretch for consistent vertical or horizontal positioning.
• Gaps: Define the exact pixel spacing between individual items.
• Wrap: Control whether items stay on a single line (no-wrap) or break into multiple lines (wrap).

追加オプション #

• オーバーフロー： の オーバーフロー property manages content that exceeds its container by using デフォルト, Auto、 または 隠れた 設定。
• HTML タグ: の HTMLタグ defines the element’s structural role as a Div, ヘッダ, Main、 または Nav.

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

The template contains a 見出しウィジェット. Let’s see how you can personalize the widget.

コンテンツ #

• タイトル： の タイトル オプション allows you to enter your primary 見出しタイトル, add a custom リンク, and assign a specific タイトルHTMLタグ のように H2, for better SEO.
• 字幕： Here you can toggle the visibility of the subtitle, a border subtitle, a header subtitle, and choose if the text appears 前に または タイトル後.
• タイトル説明： This provides a toggle to show description, enabling an extra block of text to explain your heading in more detail.
• シャドウテキスト: Enable it and add a decorative, large background text layer behind your main title for a stylized look.
• 区切り文字: The separator control lets you show separator to insert a visual dividing line between the header elements and the rest of your page content.

スタイル #

• 一般的な： The General section provides an Alignment control to position your content to the left, center, or right.
• タイトル： The Title settings allow you to customize the Color, Hover Color, and Typography, while also managing the Text Shadow and Margin for proper spacing.
• Focused Title: The Focused Title options offer advanced styling for highlighted text, including Text decoration color, Padding, and toggles for background color on text or text fill.
• 字幕： The Subtitle section lets you set the Color and Typography, adjust the Margin, and configure a Subtitle Border Left with a custom Background Type or Image.

テキストのカスタマイズ #

The template contains a ページ一覧 widget under the Heading widget.

コンテンツ #

• リスト： ここでできます テキストの追加または編集 そして 字幕 for each entry, while also providing options to ラベルの表示を有効にする, ラベルの追加または編集 text and more.
• 設定： The option lets you choose a レイアウト style, set the link 目標 に Blank, and toggle the visibility of the 関係 属性。

スタイル #

• リスト: You can adjust the padding, margin, border type, box shadow, etc. of the texts.
• アイコン: It lets you customize the icon position, vertical alignment, background type, size, etc. of the icons associated with each list item.
• 文章: You can change the texts with color, margin, typography, etc., of the main item titles.
• 字幕: To style subtitles, adjust their color, typography, padding, and more from here.
• ラベル: The label style options enable you to customize the typography, margin, padding, border radius, alignmnets, etc.

Step 3: Create a Header Template #

Next, you have to create a header and preview it.

• Go to the ElementsKit Header Footer from your dashboard
• Create a header or open the existing one

To learn how to create a header, check this detailed documentation on the ヘッダーとフッタービルダー

Here you go, your WordPress mega menu has been successfully created.

However, if you want to personalize the icon, badge, and other settings of the mega menu, then follow the next step.

Step 4: Customize Icon, Badge & Settings #

Go to menus and personalize icons, badges, and settings if you like.

アイコン #

• クリック アイコンタブ
• Choose any color from the カラーパレット

1. クリック アイコンを選択
2. を検索してください icon you want to set
3. Select the icon

バッジ #

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

設定 #

1. Mega Menu Width
Choose how you want the width of the mega menu to appear:

• デフォルトの幅 – Uses the standard width.
• 全幅 – Expands the menu to cover the full width of the screen.
• カスタム幅 – Allows you to set a specific width (750px by default).

2. Mega Menu Width Position
Select how the width will be aligned:

• デフォルト – Applies the standard positioning.
• 相対的 – Positions the menu relative to its parent element.

3. Enable Ajax Load: Controls how the mega menu content is loaded. Set to はい to load content dynamically without a page refresh, or いいえ to load it normally with the page.

Now you’re ready to build and customize your own Elementor mega menu simply with ElementsKit.