Japanese 
English 
German 
Spanish 
Italian 
French 
Danish 
Portuguese 
Swedish 
Polish 
Korean 
ナビゲーション メニューのない大規模な Web サイトを想像できますか?
とんでもない！
人々はオンラインで過ごす時間をより重視するようになっています。最近の研究によると、 Web ユーザーの 94% 簡単なナビゲーションが Web サイトの最も便利な機能だと言います。
ほぼ全員ですよね？
メガ メニューは、使いやすさとユーザーを引き付ける能力を兼ね備えており、Web サイトに最適なナビゲーション メニューです。シンプルでありながら機能的なメガ メニューにより、ユーザーは Web サイトのさらに多くの領域を探索し、即座にアクションを起こすようになります。
Amazon や eBay のような最大規模の e コマース ウェブサイトでも、メガ メニューを使用して、ユーザーがウェブサイトのナビゲーション全体を 1 つのメニューで参照できるようにしています。
電子商取引 Web サイトだけでなく、メガ メニューは、ニュース Web サイト、雑誌、コンテンツ出版社、企業などにとっても優れたオプションです。
複数のカテゴリとサブカテゴリを持つ大規模な Web サイトを構築する場合、Megamenu は、すべてが一度に表示される大きな複数列の拡張可能なメニューです。
きっと、たくさんの疑問が思い浮かぶでしょう。右？
心配しないでください...ここでは、あなたの質問に対するすべての答えを得るお手伝いをします。この記事の最後では、独自のメガメニューを簡単に作成する方法を学びます。
ElementsKit Mega Menu Builder の紹介
豊富な機能を使用する ElementsKit メガ メニュー ビルダー Elementor ライブ コンテンツ インターフェイスを使用して、あらゆるタイプの Megamenu を作成およびカスタマイズできます。
ナビゲーション メニューや垂直メガ メニューなどのメガ メニューのバリエーションと、多くのカスタマイズ オプションが提供されます。
全体的に、ElementsKit Elementorメガメニューは、プロフェッショナルなサイト向けのフル機能のモジュールであり、 Elementor 向けの最高の WordPress メガ メニュー ビルダー.
Elementor でメガメニューを作成するには?
Elementor は、メガ メニューをデザインするための多くの機能を提供しますが、追加の機能を取得するには、サードパーティのプラグインを使用できます。
まさに、必要です ElementsKit。メガ メニューを作成するためのプラグインは数多くありますが、ElementsKit は垂直メガ メニュー、水平メガ メニュー、その他多くのカスタマイズ オプションを含むさまざまなタイプのメガ メニューをサポートしています。
ここでは、完全に機能するメガ メニューを作成するためのプロセスを段階的に詳しく説明します。
Elementor でメガメニューを作成するために必要なもの
このチュートリアル ブログに従うには、2 つのことが必要です –>
または、次の手順に従ってください。
確認する メガメニュー モジュールは の上 から ElementsKit → モジュール.
ステップ #1: メニューの追加
Elementorでメガメニューを作成するには、WordPressダッシュボードからメニューを作成する必要があります。そのためには、
- 案内する 外観 > メニュー.
- クリック 新しいメニューを作成する.
- 提供する メニュー名 > チェック チェックボックス > メニューの作成.
- クリック カスタムリンク > 提供 リンク そして メニュー項目の追加 同じやり方で。
ステップ #2: メガメニューのコンテンツをカスタマイズする
このステップでは、 メガメニュー項目を追加する 作成した WordPress メニューから。
チェックボックスにチェックを入れます 「メガメニュー コンテンツに対してこのメニューを有効にする」 > をクリックしてください 設定アイコン付きメガメニュー メガメニューを追加したいメニュー項目。
- ポップアップが開くので、 メガメニュー オプション、そして 保存。その後、 をクリックしますe メガメニューコンテンツの編集 ボタン。
テンプレートの選択
- クリック エレメントキット テンプレート ライブラリ アイコンをクリックし、次の場所に移動します ヘッダー.
- クリック ヘッダ > メガメニューの内容 > 任意の メガメニュー.
コントロールレイアウト
- 内部セクションを編集する 点線のセクションをクリックします。
- コンテンツ幅ボックス: 右または左にドラッグして、コンテンツの幅をカスタマイズします。
- コンテンツ全幅： 選択する 全幅.
列間隔を選択
- カラムギャップ=> カラムギャップを次から選択してください 落ちる。
ポジションを選択してください
- 高さ: 左から右にドラッグして高さを選択します。
- 垂直配置: ドロップダウンから垂直配置を選択します。
- オーバーフロー: [オーバーフローのデフォルト] または [非表示] を選択します。
選択する HTMLタグ
- を選択してください HTMLタグ から 落ちる.
メガメニューの見出しテキストをカスタマイズする
- アイコンの種類を選択.
- アイコンの追加を有効にする.
- ヘッダーアイコンをアップロード.
- タイトルの追加または編集.
- 編集の説明を追加.
テキストのカスタマイズ
- テキストの追加または編集.
- サブタイトルの追加または編集.
- ラベルの表示を有効にする.
- ラベルの追加または編集.
- 背景色、タイポグラフィ、パディング、配置、半径をカスタマイズします.
ステップ #3: アイコンをカスタマイズする
- クリック 'アップデート' をクリックしてメニューを保存し、エディターを閉じます。
- 次に、[アイコン] タブに移動し、カラー パレットから任意の色を選択します。
- アイコンライブラリからアイコンを選択します。
- 次にサイトに移動し、選択したアイコンと色が表示されます。
ステップ #4: バッジをカスタマイズする
- テキストの追加または編集.
- 選ぶ バッジの色.
- 選ぶ バッジの背景色.
- クリック 保存.
ステップ#5: 設定
デフォルトの幅
- メガ メニューの幅を選択します: デフォルト.
- メガ メニューの位置を選択します: デフォルト.
- ウィンドウを保存します。
- サイトビュー: デフォルトの幅とデフォルトの位置を表示します。
デフォルトの相対
- メガ メニューの幅を選択します: デフォルト.
- メガ メニューの位置を選択します: 相対的.
- クリック 保存.
- サイトビュー: デフォルトの幅と相対位置を表示します。
デフォルトの全幅
- メガ メニューの幅を選択します: 全幅.
- メガ メニューの位置を選択します: デフォルト.
- クリック 保存.
- サイトビュー: デフォルトの位置で全幅を表示します。
全幅の相対位置
- メガ メニューの幅を選択します: 全幅.
- メガ メニューの位置を選択します: 相対的.
- クリック 保存.
- サイトビュー: 表示中 全幅と相対位置.
カスタムのデフォルト幅
- メガ メニューの幅を選択します: カスタム幅.
- 任意のカスタム幅を指定しますが、デフォルトでは 750ピクセル.
- メガ メニューの位置を選択します: デフォルト.
- クリック 保存.
- サイトビュー: 表示中 デフォルトの位置でのカスタム幅.
カスタムのデフォルト幅 相対的
- メガ メニューの幅を選択します: カスタム幅.
- 任意のカスタム幅を指定しますが、デフォルトでは 750ピクセル.
- メガ メニューの位置を選択します: 相対的.
- クリック 保存.
- サイトビュー: 表示中 相対位置を使用したカスタム幅.
ステップ #6: ヘッダーテンプレートを作成する
ここで使用できるのは、 Elementor ヘッダー テンプレート または、 ElementsKit ヘッダー テンプレート。
- 今すぐ検索 ナビメニュー > ドラッグして 駅ナビメニュー そして 落とす 選択した領域で。 ElementsKit Nav メニューを必ずドラッグしてください。ドラッグしないと、作成した Megmenu が表示されません。
- に行く メニュー設定 > 作成したものを選択 ヘッダーメニュー ドロップダウンから。
- ここから任意のタイプのウィジェットを追加して、ヘッダー テンプレートをカスタマイズできます。
Gutenberg を使ってメガメニューを作成する
WordPressブロックエディタでウェブサイトを構築した場合は、 Gutenbergでメガメニューを作成する スムーズに。GutenKit ブロック エディター プラグインには、Gutenberg で WordPress メガ メニューを作成する最も簡単な方法が付属しています。
GutenKit を使用すると、エディターでメニュー全体を作成し、垂直方向と水平方向の両方でメガメニューを設計できます。
必要なのは、GutenKit Pro プラグインをインストールして、Gutenberg で美しいサイトの構築を開始することだけです。
最終出力
- 完了したら、 アップデート ボタンを押してメニューを保存します。
- サイトにアクセスすると、選択したメガメニューがそれに応じて表示されていることがわかります。
WordPressでメガメニューを作成する方法の詳細については、ElementsKitのドキュメントを参照してください。 Elementor のメガメニューウィジェット.
まとめ
ついに、無事に最後までやり遂げることができました。このチュートリアルがお役に立てば幸いです。そして、次を使用してカスタム Elementor メガ メニューを構築できるようになりました。 ElementsKit!
ここでは、これらすべての手順を 1 つのビデオで見ることができます。
さらに懸念がある場合、または他の問題が発生した場合は、コメント欄でお知らせください。
コメントを残す