の ElementsKit ナビメニュー widget allows you to create fully customizable navigation menus in Elementor, including dropdowns, responsive mobile menus, and styling options. It works inside a header/footer template built with ElementsKit.
How It Works #
- Enable Header/Footer module in ElementsKit → Modules.
- Create a Header template で ヘッダー フッター and edit with Elementor.
- Drag & drop the Nav Menu widget into the header.
- Select your WordPress menu in Menu Settings.
- Configure dropdown & mobile behavior (hover/click, breakpoints, hamburger menu).
- Style your menu (fonts, colors, spacing, icons).
主な特長 #
- 使用 existing WordPress menus.
- Dropdown & mega menu support.
- 完全に 応答性の高い with mobile hamburger control.
- Custom styling for desktop and mobile menus.
Check the details here:
A navigation menu widget helps to navigate menu items. It creates drop down and gives the header a nice sorted look. ElementsKit consists of many comprehensive modules and ナビメニュー is one of them. It is rich in features, and easy to use.
- 使用 existing WordPress menus.
- Dropdown & mega menu support.
- 完全に 応答性の高い with mobile hamburger control.
どのように機能するか見てみましょう-
ElementsKit ナビメニュー #
まず、次のことを行う必要があります。 ヘッダーフッタービルダーモジュールをオンにする.
モジュールをオンにする #
ダッシュボードへのアクセス: 1. ElementsKit を見つける -> 2. モジュールをクリック -> 3. ヘッダー フッター ビルダーを見つける -> 4. 変更を保存
ヘッダー フッター #
1. ElementsKitからヘッダーフッターをクリック -> 2. ヘッダーをクリック -> 3. 新規追加
Tテンプレート設定 #
- 設定
- タイトル- テンプレートの名前を入力してください
- タイプ- ヘッダ
- 条件- サイト全体
- Activate/Deactivate- オンに切り替える
- Click Edit with ElementsKit
カスタマイズ #
ElementsKit ナビメニューを見つけてドラッグ アンド ドロップします。
コンテンツ- の中に コンテンツ部分には、以下の設定オプションがあります。
メニュー設定 #
- メニューを選択- メニューを選択すると、Web サイトの既存のメニューが表示されます。
- 水平メニュー位置- メニュー位置オプションは 左揃え、中央揃え、右揃え、両端揃え.
- ドロップダウンを開くと、 そのままにしておく マウスを移動またはクリックします。
- サブメニューインジケーター– ドロップダウンインジケーターアイコンを選択します（直線矢印、塗りつぶし矢印、プラス) that appears with the parent menu and works as a navigation key for the submenu.
- Enable one page?: Toggle this option to “Yes” to enable smooth scrolling for a single-page website layout. Ensure your menu links are set to anchor tags that point to specific sections on the same page.
- Response Breakpoint: Select the screen size where the menu collapses into a mobile toggle. Choose between Tablet or Mobile to trigger the responsive layout.
- 上の写真に示すように、サイドバー設定のアイコンをクリックします。
2. ポップアップでアイコンライブラリが開くので、それをクリックします。
3. 次に、「入れる” ボタンをクリックしてアイコンを追加します。
4. 「アップロード”ボタンをクリックすると、 Elementorカスタムアイコン 設定。
- 1 ページを有効にしますか?– 見出しを 1 ページ (現在のページ) に表示する場合は [YES] を切り替え、それ以外の場合は [NO] を切り替えます。
- レスポンシブブレークポイント オプションは タブレットとモバイル。
モバイルとタブレットのレスポンシブブレークポイントを選択した場合の動作は次のようになります。
モバイルメニュー設定 #
- モバイルメニューロゴ - モバイルビュー用のロゴを設定します。
- メニューリンク- ホームのデフォルトのままにするか、カスタム URL フィールドに任意のリンクを挿入します。ユーザーがロゴをクリックすると、指定されたリンクにリダイレクトされます。
- ハンバーガーアイコン（オプション）- ライブラリからアイコンを選択するか、SVG をアップロードします。
- サブメニュークリックエリア- メニューにサブメニューがある場合は、その領域のアイコンを設定できます。
スタイル #
- メニューラッパー- このセクションでは、メニューの高さ、背景の種類、パディング、幅、メニューの境界線の半径、メニュー アイコンの間隔などを調整できます。
- メニュー項目のスタイル - メニュー項目は、背景の種類、色、境界線の間隔、項目の余白などを使用してここでスタイル設定できます。
- サブメニュー項目のスタイル- メニュー項目と同様に、このセクションではサブメニュー項目をカスタマイズできます。
- サブメニューパネルのスタイル - この部分を展開すると、多くのオプションを使用してサブメニュー パネルをカスタマイズできるようになります。
- ハンバーガースタイル- このセクションでは、さまざまなアイコンの色、サイズ、位置、オプションなどを使用してハンバーガーのスタイルを設定できます。
- モバイルメニューロゴ - この部分はカスタマイズ用です。この部分は、モバイル メニュー ロゴを好みに応じてカスタマイズするためのものです。
ここでは、デスクトップビューのナビゲーションメニューの例を用意しました。
ElementsKit の効果的なナビゲーション メニュー ウィジェットを使用して、顧客に必要なものを見つけるための優れたシステムを提供します。今すぐウィジェットを使用して、魅力的なデザインを作成し、時間を節約しましょう。
