Elementor と ElementsKit を使用してメガメニューを構築する方法

elementor と elementkit を使ってメガメニューを構築する方法

メガメニューのない大規模な Web サイトを想像できますか? 
とんでもない!

人々はオンラインで過ごす時間をより重視するようになっています。最近の研究によると、  Web ユーザーの 94% 簡単なナビゲーションが Web サイトの最も便利な機能だと言います。
ほぼ全員ですよね?

ユーザーの使いやすさとエンゲージメントを高めるために、メガメニューは人を高める上で重要な役割を果たします。シンプルだが機能的なメガ メニューにより、ユーザーは Web サイトのさらに多くの領域を探索し、すぐにアクションを起こすことができます。

Amazon や eBay などの最大の電子商取引 Web サイトでさえ、ユーザーが Web サイトのナビゲーション全体を 1 つのメニューにまとめて参照できるようにするためにメガ メニューを使用しています。 

電子商取引 Web サイトだけでなく、メガ メニューは、ニュース Web サイト、雑誌、コンテンツ出版社、企業などにとっても優れたオプションです。 

複数のカテゴリとサブカテゴリを持つ大規模な Web サイトを構築する場合、Megamenu は、すべてが一度に表示される大きな複数列の拡張可能なメニューです。
きっと、たくさんの疑問が思い浮かぶでしょう。右? 

心配はいりません…ここでは、あなたの質問に対するすべての答えを得るお手伝いをします。そして、この記事の最後では、独自のメガメニューを簡単に作成する方法を学びます。 

ElementsKit Mega Menu Builder の紹介

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

ナビゲーション メニューや垂直メガ メニューなどのメガ メニューのバリエーションと、多くのカスタマイズ オプションが提供されます。 

全体として、ElementsKit Elementor Mega Menu は、プロフェッショナル サイト向けのフル機能が満載のメニュー ビルダーです。 

Elementor でメガメニューを作成するには? 

Elementor は、メガ メニューをデザインするための多くの機能を提供しますが、追加の機能を取得するには、サードパーティのプラグインを使用できます。

まさに、必要です ElementsKit。メガ メニューを作成するためのプラグインは数多くありますが、ElementsKit は垂直メガ メニュー、水平メガ メニュー、その他多くのカスタマイズ オプションを含むさまざまなタイプのメガ メニューをサポートしています。

ここでは、完全に機能するメガ メニューを作成するためのプロセスを段階的に詳しく説明します。

Elementor でメガメニューを作成するために必要なもの

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

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

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

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

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

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

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

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

テンプレートの選択

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

コントロール レイアウト

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

選択する カラムギャップ

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

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

  • 高さ: 左から右にドラッグして高さを選択します。
  • 垂直配置: ドロップダウンから垂直配置を選択します。
  • オーバーフロー: [オーバーフローのデフォルト] または [非表示] を選択します。

選択する HTMLタグ

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

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

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

テキストのカスタマイズ

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

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

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

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

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

ステップ #5: 設定

デフォルトの幅

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

デフォルトの相対 

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

デフォルトの全幅

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

全幅の相対位置

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

カスタムのデフォルト幅

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

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

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

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

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

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

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

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

GutenKit を使用すると、エディターでメニュー全体を作成し、垂直方向と水平方向の両方でメガメニューを設計できます。

必要なのは、GutenKit Pro プラグインをインストールして、Gutenberg で美しいサイトの構築を開始することだけです。

最終出力

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

まとめ

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

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

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


コメント

  1. ピーターノアバター
    ピーター

    こんにちは、
    素晴らしいチュートリアルです!
    メガメニューについてまだ質問があります。
    カーソルを合わせるのではなく、クリックしてメガ メニューを開くことはできますか?
    ご回答いただければ幸いです。
    ごきげんよう、
    ピーター

    1. タンジャナ・サブリンのアバター
      タンジャナ・サブリン

      こんにちは、ピーターさん

      ご評価いただき誠にありがとうございます。これは私たちにとって大きな意味があります。現在、この機能は利用できません。ただし、そのための機能をリクエストすることはできます。私たちはお客様のニーズに応じて新しい機能を継続的に追加しています。

      ここにリンクがあります – https://wpmet.com/plugin/elementskit/roadmaps/#ideas。あなたの素晴らしいアイデアを共有し、送信ボタンをクリックしてください。 😍

      ご安全に😃

  2. アンドリューノアバター
    アンドリュー

    こんにちは、
    メガ メニュー ビルダーは気に入っていますが、小さな問題があります。
    私のメガ メニューの 1 つはヘッダーの右端にあり、メガ メニューの一部が右側に消えています。
    メガメニューを右、左、または中央に揃えるオプションはありますか?

    ありがとう

    1. アユブ・アリのアバター

      こんにちは、アンドリューさん

      サイトを確認しない限り、この問題の正確な原因を知ることはできません。したがって、問題を明確に理解するために、ライブ Web サイトのリンクまたは関連するスクリーンショットを提供してください。ただし、このスクリーンショットに従って、メガメニューの位置をデフォルトに変更してみることができます(https://d.pr/i/ccf6RC)。サポート チケットを開いていただける場合は、ここで更新情報をお知らせください。 https://help.wpmet.com/

  3. ファルザンのアバター

    こんにちは、素晴らしいチュートリアルをありがとう!些細な問題が 1 つだけあれば、何でも当てはまります。ヘッダーには 4 ページあり、そのうちの 1 つにカーソルを置くとメガ メニューが表示されます。ただし、ヘッダーでは親ページ (personlijk という名前) をクリックできず、メガ ヘッダー内の項目をクリックすることしかできません。私に何が欠けているのかわかりますか? (サイトはまだ開発中ですが、ヘッダーは https://insight.nl/home URL。 「PERSOONLIJK」ボタンをクリックできるオプションも欲しいと思っています。そこで私が何を間違えたのかを見つけるのを手伝ってもらえますか?
    よろしくお願いします。

    1. アユブ・アリのアバター

      こんにちは、Farzan。これは技術的な問題であり、個別のサポートが必要になる可能性があるため、次のサイトからサポート チケットを開くことをお勧めします。 https://help.wpmet.com/

      私たちのサポートチームは非常に親切なので、できるだけ早く問題を解決するために最善を尽くすと言えます。

      幸運をお祈りしています。

  4. マニのアバター

    この素晴らしい記事をありがとうございます。非常に役に立ちます。Youtube でたくさんのビデオを見ているよりも誰でも簡単に理解できます。

  5. メリッサのアバター
    メリサ

    おい、
    素晴らしいチュートリアル。あなたはそれを明確かつ簡単に説明しました。優れたメガ メニューを作成することは、項目間の関係を視覚的に強調し、ユーザーが選択肢について理解しやすくなり、アイコンや画像を簡単に使用できるようにするために不可欠です。

  6. デビッドノアバター
    デビッド

    このチュートリアルに正確に従ったのですが、メニューが表示されません。
    上にリンクしたページにアクセスすると、メニューが表示されます。これが WordPress のデフォルトのメニューです。そのすぐ下でナビゲーション メニュー ウィジェットを使用しましたが、メニューは表示されません。

    何かご意見は?

  7. コリンのアバター
    コリン

    メガメニューがすごい!ちょっとしたこと:メニュー名をクリックすると対応するページが開き、ロールオーバーするとメガメニューが表示されるようにしたいです。それ、どうやったら出来るの?現在、クリックするとメガメニューのみが表示されます。助けてくれてありがとう。

  8. マーガレットのアバター
    マーガレット

    この素晴らしいチュートリアルをありがとう!編集切り替えの下のメガメニュー内のタイトルと説明にハイパーリンクを設定することはできますか?メガメニューに州と都市のリストがありますが、段落セクションでハイパーリンクを作成するには、州を 2 回リストする必要があるという問題があります。この冗長性を排除する方法はありますか?

  9. マーガレットのアバター
    マーガレット

    タイトルの上にカーソルを置くと都市がポップアップ表示され、その下で選択できるようにするオプションも可能かどうか追加するのを忘れていました。ありがとう。

  10. サミ・アザムのアバター
    サミ・アザム

    メニュー項目の代わりにハンバーガーのアイコンにメガメニューを表示するにはどうすればよいですか?

    1. ディパ・シャハのアバター
      ディパ・シャハ

      親愛なるサミ様
      残念ながら、ご希望の機能は利用できません。ただし、この機能をリクエストすることはできます。 ElementsKit チームは、機能に関する提案をいつでも喜んで受け付けています。
      このリンクを使用して機能をリクエストできます https://wpmet.com/plugin/elementskit/roadmaps/#ideas
      ありがとう

  11. アジェイのアバター
    アジャイ

    このチュートリアルに正確に従ったのですが、メニューが表示されません。
    上にリンクしたページにアクセスすると、メニューが表示されます。これが WordPress のデフォルトのメニューです。そのすぐ下で、ナビゲーション メニュー ウィジェットを使用しましたが、メニューは表示されません。

    メガメニューにバグがあると思いますが、現在は機能しません

    1. ハシブのアバター
      ハシブ

      こんにちは、Ajay さん。メガ メニューを作成する前に、バックエンドでメニューを作成していることを確認してください。ナビ メニューを選択した後、メガ メニューでどのメニューを共有するかを選択する必要があります。

  12. ジェイノアバター

    こんにちは、

    すべてのプラグインを更新するまで、メガメニューは非常にうまく機能しました。一部のメガメニューは機能するのに、一部は機能せず、「コンテンツが見つかりません」と表示されるのは奇妙です。プラグインのバージョンをロールバックしましたが、問題は解決できません。この問題の原因について何か心当たりはありますか?

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です