Japanese 
English 
German 
Spanish 
Italian 
French 
Danish 
Portuguese 
Swedish 
Polish 
Korean 
メガメニューのない大規模な Web サイトを想像できますか?
とんでもない！
人々はオンラインで過ごす時間をより重視するようになっています。最近の研究によると、 Web ユーザーの 94% 簡単なナビゲーションが Web サイトの最も便利な機能だと言います。
ほぼ全員ですよね？
ユーザーの使いやすさとエンゲージメントを高めるために、メガメニューは人を高める上で重要な役割を果たします。シンプルだが機能的なメガ メニューにより、ユーザーは Web サイトのさらに多くの領域を探索し、すぐにアクションを起こすことができます。
Amazon や eBay のような最大規模の e コマース ウェブサイトでも、メガ メニューを使用して、ユーザーがウェブサイトのナビゲーション全体を 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: カスタマイズ アイコン
- クリック 'アップデート' メニューを保存するには => エディタを閉じます。
- 次に、「アイコン」タブに移動し、カラーパレットから任意の色を選択します。
- アイコンライブラリからアイコンを選択します。
- サイトに移動=>選択したアイコンと色が表示されます。
ステップ #4: カスタマイズ バッジ
- テキストの追加または編集.
- 選ぶ バッジの色.
- 選ぶ バッジの背景色.
- クリック 保存.
ステップ #5: 設定
デフォルトの幅
- メガ メニューの幅を選択します: デフォルト.
- メガ メニューの位置を選択します: デフォルト.
- ウィンドウを保存します。
- サイトビュー: デフォルトの幅とデフォルトの位置を表示します。
デフォルトの相対
- メガ メニューの幅を選択します: デフォルト.
- メガ メニューの位置を選択します: 相対的.
- クリック 保存.
- サイトビュー: デフォルトの幅と相対位置を表示します。
デフォルトの全幅
- メガ メニューの幅を選択します: 全幅.
- メガ メニューの位置を選択します: デフォルト.
- クリック 保存.
- サイトビュー: デフォルトの位置で全幅を表示します。
全幅の相対位置
- メガ メニューの幅を選択します: 全幅.
- メガ メニューの位置を選択します: 相対的.
- クリック 保存.
- サイトビュー: 表示中 全幅と相対位置.
カスタムのデフォルト幅
- メガ メニューの幅を選択します: カスタム幅.
- 任意のカスタム幅を指定しますが、デフォルトでは 750ピクセル.
- メガ メニューの位置を選択します: デフォルト.
- クリック 保存.
- サイトビュー: 表示中 デフォルトの位置でのカスタム幅.
カスタムのデフォルト幅 相対的
- メガ メニューの幅を選択します: カスタム幅.
- 任意のカスタム幅を指定しますが、デフォルトでは 750ピクセル.
- メガ メニューの位置を選択します: 相対的.
- クリック 保存.
- サイトビュー: 表示中 相対位置を使用したカスタム幅.
ステップ #6: ヘッダーテンプレートを作成する
ここで使用できるのは、 Elementor ヘッダー テンプレート または、 ElementsKit ヘッダー テンプレート。
- 今すぐ検索 ナビメニュー=> をドラッグします。 駅ナビメニュー そして 落とす 選択した領域で。 ElementsKit Nav メニューを必ずドラッグしてください。ドラッグしないと、作成した Megmenu が表示されません。
- に行く メニュー設定=> 作成したものを選択します ヘッダーメニュー ドロップダウンから。
- ここから任意のタイプのウィジェットを追加して、ヘッダー テンプレートをカスタマイズできます。
Gutenberg を使ってメガメニューを作成する
WordPressブロックエディターでウェブサイトを構築している場合は、メガメニューを簡単かつスムーズに作成することもできます。GutenKitブロックエディタープラグインには、最も簡単な方法が付属しています。 Gutenberg で WordPress メガメニューを作成する.
GutenKit を使用すると、エディターでメニュー全体を作成し、垂直方向と水平方向の両方でメガメニューを設計できます。
必要なのは、GutenKit Pro プラグインをインストールして、Gutenberg で美しいサイトの構築を開始することだけです。
最終出力
- 完了したら、 アップデート ボタンを押してメニューを保存します。
- サイトにアクセスすると、選択したメガメニューがそれに応じて表示されていることがわかります。
まとめ
ついに、無事に最後までやり遂げることができました。このチュートリアルがお役に立てば幸いです。そして、次を使用してカスタム Elementor メガ メニューを構築できるようになりました。 ElementsKit!
ここでは、これらすべての手順を 1 つのビデオで見ることができます。
さらに懸念がある場合、または他の問題が発生した場合は、コメント欄でお知らせください。
コメントを残す