WoodMartヘッダーレイアウトとナビゲーションメニューの完全セットアップ

ウッドマートのテーマEコマースサイトのための非常に柔軟なヘッダーデザインシステムです。ミニマリストナビゲーション、ロゴセンター、トップパススルー、検索ボックスやショッピングカートを統合した複雑なレイアウトなど、あらゆるレイアウトが可能です。このチュートリアルでは、WoodMartをインストールしたばかりの方や、サイトのトップを再構築したい方に向けて、ヘッダーレイアウトの設定からカスタマイズまでを順を追って説明します!ナビゲーションメニューのコンフィギュレーション

图片[1]-完整设置 WoodMart 头部布局与导航菜单的方法

I. ヘッドレイアウトの入り口はどこですか?

WordPressのバックエンドに入ったら、順番にクリックしてください:

ウッドマート > ヘッダービルダー

图片[2]-完整设置 WoodMart 头部布局与导航菜单的方法

この中でビジュアライゼーション・エディターインターフェイスを見ると、ヘッド構造全体がゾーンに分かれていることがわかる:

  • トップ・バー
  • ヘッダー メイン
  • ヘッダー下部

各エリアには、ロゴ、メニュー、検索ボックス、ボタンなどのコンポーネントを追加することができます、アイコンその他

图片[3]-完整设置 WoodMart 头部布局与导航菜单的方法

II.ロゴとバナーの設定

をクリックしてください。 ロゴ モジュールの左側に設定パネルがポップアップ表示されます:

图片[4]-完整设置 WoodMart 头部布局与导航菜单的方法
  • メインロゴ画像のアップロード
  • Retina HDバージョンをアップロードするオプション
  • ロゴの幅、余白の設定
  • ロゴの下にスローガン」のテキストを設定可能(例:ブランドスローガン)

ロゴは各ページの最初に目に入る部分であり、背景の衝突を避けるために透過PNGフォーマットを使用することをお勧めします。

ナビゲーション・メニューの追加とカスタマイズ

メニューヘッダーの最も重要な機能部分であり、セットアップの手順は以下の通り:

WordPressのバックエンドに移動します:

外観 > メニュー

  • メインメニュー」という名前で新しいメニューを作る。
图片[5]-完整设置 WoodMart 头部布局与导航菜单的方法
  • メニューにページ、カテゴリー、リンク、その他の項目を追加する
图片[6]-完整设置 WoodMart 头部布局与导航菜单的方法
  • ドラッグで順序を調整し、複数レベルのドロップダウンを設定することができます。
图片[7]-完整设置 WoodMart 头部布局与导航菜单的方法
  • ページ下部の "Show location "ボックスにチェックを入れる。 メインメニュー
图片[8]-完整设置 WoodMart 头部布局与导航菜单的方法

ヘッダー・ビルダーに戻り、「メニュー・コンポーネント」をヘッダー・メイン・エリアにドラッグして、ページにメニューを表示する。

IV.モバイルメニューの設定

ウッドマートは個別設定に対応モバイルモバイルからのアクセス時にメニューをすっきりと表示するのに最適なヘッダー構造。

入り込む テーマ設定 > ヘッダービルダー > モバイルヘッダー

あなたはそれを設定することができる:

  • モバイルメニューボタン(ハンバーガーアイコン)を表示するかどうか
  • 拡張メニューの内容(メニュー項目、アイコン、検索など)の移動
  • ロゴの中央寄せまたは左寄せ
  • その他の要素の非表示・表示(ショッピングカート、言語切り替えなど)
图片[9]-完整设置 WoodMart 头部布局与导航菜单的方法

モバイルはシンプルであることに重点を置き、あまり多くのコンテンツを積み重ねないことを推奨する。

V. 複数のヘッダーレイアウトのサポート(オプション)

また、WoodMartは、例えば、ページごとに異なるヘッダーを使用することもサポートしています:

  • ホームページは白地に白のヘッダーを使用
  • 製品詳細ページの使用オープン
  • 特別なアイコンを使ったイベントページのナビゲーション

概要

ウッドマート ヘッダーシステムはとても柔軟なので、コーディングなしでブランドのポジショニングに適したナビゲーションエリアを素早く構築することができます。Header Builderのモジュール式アプローチでは、ロゴ、メニュー、検索バー、ショッピングカート、言語切り替えなどのコンポーネントを自由に組み合わせることができ、デスクトップとモバイルそれぞれに最適化されています。組み合わせる ワードプレス 独自のメニュー管理システムにより、ナビゲーション構造も簡単に維持できる。


お問い合わせ
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
客服微信
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨询:1025174874
Eメール:[email protected]
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
本文作者:托尼屎大颗
終わり
好きなら応援してください。
クドス1874 分かち合う
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし