ウッドマート テーマと エレメンタ このビルダーは、強力なメニューデザイン機能をユーザーに提供します。これらのツールの助けを借りて、マルチレベル、アイコン、メガメニューなどのニーズを満たすメガメニューを簡単に作成し、ウェブサイトのナビゲーション構(gòu)造を最適化することができます。以下は、ElementorとWoodMartテーマを使ってメガメニューを作成する詳細な手順です。

ナビゲーション?メニューの作成

この寫真をもとに、手順を説明しよう：

• メニュー設(shè)定へのアクセス
  ある ワードプレス バックエンドで、外観 > メニューセクションに移動します。
• 新しいメニューの作成
  メニューページで、"Create new menu "ボタンをクリックし、メニューの名前を入力する（例："Demo menu"）。
• メニューの追加
  メニュー項目の追加」エリアでは、ページ、投稿、カテゴリー、タグなどの要素を選択することができます。新しいリンク項目を追加するには、"カスタムリンク "セクションにリンクアドレスを入力します。 #)とリンクテキスト(例："Home")を入力し、"Add to menu "ボタンをクリックします。
• メニュー位置の設(shè)定
  メニュー設(shè)定」では、このメニューの場所を選択することができます（例：メインメニューまたはモバイルサイドメニュー）。
• 保存メニュー
  設(shè)定が終わったら、ページ右上の「メニューを保存」ボタンをクリックして変更を保存します。

ドロップダウンメニューの設(shè)定

メニューの追加
メニュー項目の追加」では、ページ、記事、カテゴリーなどを選択し、メニューに追加することができます。例えば、「マイアカウント」ページ、チェックアウトページ、ショッピングカートページなどにチェックを入れ、「メニューに追加」ボタンをクリックします。

サブメニューの作成
特定のメニュー項目をドロップダウンサブメニューとして設(shè)定したい場合は、対象のメニュー項目の下にドラッグするだけです。例えば、「マイアカウント」ページを「ホーム」メニュー項目の下にドラッグすると、そのメニュー項目のサブメニューになります。

メニューの再構(gòu)築
右側(cè)の「メニュー構(gòu)成」では、追加されたメニュー項目を見ることができます。メニュー項目をドラッグすることで、順番を入れ替えたり、メニュー項目をさらにサブメニューにネストすることができます。

全幅スーパーメニュー

メニュー項目の選択とHTMLブロックの追加
ある ワードプレス バックエンドの「外観」>「メニュー」で、編集したいメニューを選択します。右側(cè)のメニュー項目の設(shè)定で、"新しいHTMLブロックを追加 "をクリックし、メニューにカスタムコンテンツを追加します。

メニュー項目のデザイン設(shè)定
デザイン」ドロップダウンメニューで、「全幅」オプションを選択します。メニュー項目はページ上で全幅に表示されます。

HTMLブロックの命名
ページ上部の入力ボックスに HTML ブロック名（例：「全幅メガメニュー」）。

Elementorエディタの使用
HTMLブロックに名前を付けたら、"Use "をクリックします。 エレメンタ Elementorエディターインターフェイスに入るには、"Edit "ボタンをクリックします。

メニューを追加する
elementorウィジェットをドラッグする追加メニューリストをクリックし、編集用コピーを作成する。

メニュー項目にカスタムHTMLブロックを追加する
カスタムフィールド（テーマ用）」セクションで、「ドロップダウン用HTMLブロック」オプションを選択します。以前に作成した HTML ブロック（例："Full width mega menu"）。

最後にフロントエンドに戻ってエフェクトをプレビューし、最終調(diào)整をして最終結(jié)果が出る。

デザインの保存
メニューのデザインと調(diào)整が終わったら、ページの右上にある「更新」ボタンをクリックして、すべての変更を保存することを忘れないでください。

スーパーメニュー項目のタブを追加する

全幅メガメニューを作成する際、各メニュー項目にラベルを追加することができます。例えば、"Hot Items"、"New Arrivals"、"Discounts "などのラベルを追加して、特定の重要なメニューを強調(diào)することができます。

これは次のようにして行うことができる。 エレメンタ エディターの「タグ」オプションは、訪問者が主要なコンテンツを素早く識別できるように設(shè)定されている。

カスタムサイズのメガメニュー

メニュー項目を選択し、デザインを設(shè)定する
ある ワードプレス バックエンドの「外観 > メニュー」ページで、編集したいメニュー項目を選択します。右側(cè)のメニュー項目の設(shè)定で、「デザイン」オプションを選択し、「サイズを設(shè)定する」に設(shè)定することができます。

カスタムHTMLブロックの追加
ドロップダウンメニューのHTMLブロック "セクションで、ドロップダウンボックスをクリックし、"新規(guī)追加 "オプションを選択します。メニュー項目にカスタムコンテンツや追加メニューリストを追加したい場合は、このオプションを選択し、新しいHTMLブロックを作成することができます。

Elementorエディタの使用
命名後 HTML ブロックの後、"Elementorで編集 "ボタンをクリックして、Elementorエディタインターフェイスに入ります。

メニューリストと商品の追加（グリッドとローテーション）
あるエレメンタウィジェットをドラッグする追加メニューリストをクリックし、編集用コピーを作成する。次に商品（グリッドまたはカルーセル）Elementorエディタで、まず編集したいウィジェットを選択します。

左側(cè)の設(shè)定パネルで レイアウト パート その 製品ホバー ドロップダウンメニューで、必要なレイアウトのタイプを選択します：グリッドそしてリスト もしかしたら カルーセル.ここでは、次のように選択する。カルーセル.

Elementor エディターで、編集したいリージョンまたはウィジェットを選択します。

左のパネルで カルーセル セットアップセクション。

ある スライド?パー?ビュー スライダーで、一度に表示するスライドの數(shù)を調(diào)整します。お好みで1以上に設(shè)定できます。

ページごとのスクロール: このオプションを有効にすると、各スクロールは単一の製品ではなく、ページ全體をスクロールします。このオプションは必要に応じてオンまたはオフにすることができます。

ページネーションコントロールを隠すページング?コントロールを表示したくない場合は、このオプションを有効にするとページング?ボタンを隠すことができます。

前へ/次へボタンを隠す前/次ボタンを表示させたくない場合は、このオプションを有効にします。

その他のオプション

センターモードスライドショーを中央に配置したい場合は、このオプションを有効にします。

スライダーループこのオプションを有効にすると、スライドショーはループし、ユーザーは無限にスライドすることができます。

スライダー自動再生スライドショーを自動的に再生したい場合は、このオプションを有効にします。

スクロールでカルーセルを初期化このオプションを有効にすると、ユーザーがページをスクロールしたときにのみ回転が始まります。

設(shè)定の保存

すべての設(shè)定が完了したら、ページ右下の 更新 ボタンをクリックして変更を保存します。

ドロップダウンメニューのサイズを設(shè)定する
ドロップダウンメニューの幅と高さを設(shè)定します。ドロップダウンメニューの幅 "と "ドロップダウンメニューの高さ "フィールドに、ドロップダウンメニューのサイズを変更するために必要な値を入力します。

設(shè)定後、フロントエンドのプレビューに戻り、ニーズに合わせて調(diào)整し、設(shè)定を保存することができます。

結(jié)語

を組み合わせることで エレメンタ ビルダーと ウッドマート テーマでは、様々なデバイスに適応するスーパーメニューを作成することができます。この種のメニューは美しいだけでなく、機能が豊富で、より多くのコンテンツやナビゲーションオプションを表示するのに適しており、効果的にサイトのナビゲーション効率を向上させます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業(yè)サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨詢：1025174874
三 Eメール：info@361sale.com
④ 勤務(wù)時間: 月～金、9:30～18:30、祝日休み