Elementorで豊かな構造と美しいデザインのメガメニューを作成する方法

スーパーメニューは、ウェブサイトにナビゲーションオプションやビジュアル要素を追加するのに最適な、スタイリッシュでパワフルなメニューを柔軟に作成できるツールです。ウェブサイトのナビゲーションシステムに創造性と個性を加えたいなら、メガメニューは最適な選択です。この記事では、elementorのメガメニューを使って、大きく豊かな構造と美しいデザインのメニューを作成する方法を説明します。メニューはパン・ベーカリーこのウェブサイトテンプレートは、ウェブサイトのヘッダーにメガメニューを作成する方法を示す例として使用されます。

I. メガメニューの起動に必要な実験的機能

メガメニューの作成を始める前に、以下の実験的機能が有効になっていることを確認する必要がある：

1. フレキシブルボックス容器より柔軟なレイアウト設計が可能。
2. 入れ子要素コンテナ内に複数の要素を入れ子にすることができる。
3. メニューメガメニューを構築するために設計された機能。

銘記これらの機能が有効になると、既存のナビゲーション・メニュー・ウィジェットは新しいWordPressメニュー・ウィジェットとメニュー・ウィジェットに置き換わります。新しいウィジェットはより強力で、より多くのカスタマイズオプションをサポートします。

II.スーパーメニューの作成

スーパーメニューは通常ウェブサイトのヘッダーやフッターに配置されますが、必要に応じて他の場所に配置することもできます。このチュートリアルでは、ヘッダーを例にとり、メガメニューの作成方法を詳しく説明します。

1.テーマビルダーを使ってヘッダーを作成する

まず、新しいページを作成する：

テーマビルダーを使用して、新しいヘッダータイトルを作成します。

テーマビルダーは豊富なカスタマイズオプションを提供し、あなたのウェブサイトのスタイルに合ったヘッダーを簡単にデザインすることができます。

2.メニューウィジェットの追加

ヘッダーにコンテナを作成したら、メニューウィジェットをそのコンテナにドラッグ＆ドロップします。

また、必要に応じてメニュー専用の新しいコンテナを追加することも可能です。これにより、メニューがヘッダーに表示されるのに十分なスペースが確保され、他の要素と衝突することがなくなります。

3.トップレベルメニュー項目の作成

私たちはまず パン・ベーカリー 例えば、ウェブサイトのテンプレートでは、メニューには3つのトップレベルメニュー項目が含まれます：ホーム, 私たちのパン, 私たちの物語.

手順は以下の通り：

• メニューの［コンテンツ］タブで、［アイテム #1］をクリックします。

• タイトルのテキストボックスに「ホーム」と入力する。

4.メニュー項目にリンクを追加する

各メニュー項目には、対応するページへのリンクが必要です。Home "にリンクを追加する場合、ホームページのURLを手入力することもできますが、以下の方法をお勧めします。ダイナミック・リンクの使用こうすることで、ページのURLを変更すると、メニューリンクも変更されます。自動更新.

メニューとホームページのリンク手順は以下の通り：

• タイトル・テキスト・ボックスの隣にあるダイナミック・ラベルのアイコンをクリックする。
• Site > Internal URLを選択します。

• 内部リンク」をクリックする。

• Typeドロップダウンメニューで、Contentを選択します。

• 検索と選択」ボックスで、リンクしたいページの名前（例：「ホーム」）を入力し、検索を入力し、選択する。

私たちのパン」と「私たちの物語」のページについても、上記の手順を繰り返します。このようにして、メニュー項目はそれぞれのページにリンクされます。

5.メニュー構成の表示と調整

メニュー項目の作成が完了すると、ヘッダー構造は以下のようになるはずだ：

• ホーム
• 私たちのパン
• ストーリー

この時点で、メニューの外観をプレビューし、必要に応じてメニュー項目の位置と順序を調整することができます。

III.メガメニューにデザイン要素を追加する

メガメニューは単なるナビゲーションツールではなく、様々なデザイン要素を追加してメニューをより生き生きとしたインタラクティブなものにすることができます。このセクションでは、以下のようなメニューアイテムにデザイン要素を追加する方法について説明します。画像またはアイコンその結果、メニューの視覚的なインパクトを高めることができる。

1.メニュー項目にドロップダウンコンテンツを追加する

コンテンツ」タブでメニューを選択する。

ドロップダウンのコンテンツスイッチをクリックします。

このスイッチは、メニュー項目をスーパーメニューに変換し、メニュー項目に画像、テキスト、ボタンなどのリッチコンテンツを追加できるようにします。

2.画像ウィジェットの追加

ドロップダウンコンテンツエリアが開いているときは、そこに画像ウィジェットをドラッグすることができます。

ユーザーがこのメニュー項目にマウスを合わせると、設定した画像が表示されます。

手順は以下の通り：

• コンテンツエリアに画像ウィジェットをドラッグする。
• ユーザーがメニュー項目にカーソルを合わせたときに表示される画像を選択します。
• コンテンツエリアを閉じ、設定を保存する。

これをメニューの他の項目にも繰り返し、各メニュー項目に異なる画像やその他のデザイン要素を追加することができます。こうすることで、メガメニューが強力になるだけでなく、視覚的にも魅力的なものになります。

3.プレビューと調整

編集モードでは、これらの画像は実際には表示されないかもしれないので、メガメニューが実際にどのように表示されるかを見るためにプレビューページが必要です。プレビューでは、各メニューアイテムのデザインが期待通りであること、すべてのドロップダウンコンテンツが適切に表示されていることを確認できます。

概要

メガメニューは、あなたのウェブサイトに創造性とパーソナライズされたナビゲーションを追加するための素晴らしいツールです。詳細な手順とデザインの提案により、Elementorを使用して、訪問者により良いブラウジング体験を提供する、大きく構造化された視覚的に魅力的なメニューを簡単に作成できます。これらの効果をより良く実現し、より高度な機能をアンロックするにはエレメンタル・プロより多くのカスタマイズオプションと強力なツールを提供し、プロ級のメガメニューを作成できます。