WoodMart 主題為電商網(wǎng)站提供了非常靈活的頭部設(shè)計(jì)系統(tǒng)，不管你想要一個(gè)極簡(jiǎn)導(dǎo)航、Logo 居中、頂部通欄，還是搜索框與購(gòu)物車(chē)集成的復(fù)雜布局，它都能實(shí)現(xiàn)。如果你剛安裝 WoodMart，或想重新調(diào)整網(wǎng)站的頂部結(jié)構(gòu)，這篇教程會(huì)一步步帶你設(shè)置頭部布局，并完成自定義導(dǎo)航菜單的配置。

一、頭部布局入口在哪？

進(jìn)入 WordPress 后臺(tái)后，依次點(diǎn)擊：

WoodMart > Header Builder

在這個(gè)可視化編輯界面中，你會(huì)看到整個(gè)頭部結(jié)構(gòu)被劃分為多個(gè)區(qū)域：

• Top Bar（頂部條）
• Header Main（主頭部區(qū)域）
• Header Bottom （底部頭部）

每個(gè)區(qū)域都可以加入組件，比如 Logo、菜單、搜索框、按鈕、圖標(biāo)等。

二、設(shè)置 Logo 與標(biāo)語(yǔ)

點(diǎn)擊 Header Builder 中的 Logo 模塊，左側(cè)會(huì)彈出設(shè)置面板：

• 上傳主 Logo 圖片
• 可選上傳 Retina 高清版本
• 設(shè)置 Logo 寬度、邊距
• 可設(shè)置“Logo 下標(biāo)語(yǔ)”文字（如品牌口號(hào)）

Logo 是每個(gè)頁(yè)面第一眼能看到的區(qū)域，建議使用透明 PNG 格式，避免背景沖突。

三、添加與自定義導(dǎo)航菜單

菜單是頭部中最關(guān)鍵的功能部分，設(shè)置路徑如下：

進(jìn)入 WordPress 后臺(tái)：

外觀 > 菜單

• 創(chuàng)建一個(gè)新菜單，命名如“主菜單”

• 添加頁(yè)面、分類(lèi)、鏈接等項(xiàng)目到菜單

• 拖動(dòng)調(diào)整順序，可設(shè)置多級(jí)下拉

• 在頁(yè)面下方“顯示位置”處勾選 Main Menu

返回 Header Builder，把“菜單組件”拖入 Header Main 區(qū)域中，即可在頁(yè)面中顯示該菜單。

四、移動(dòng)端菜單設(shè)置

WoodMart 支持單獨(dú)設(shè)置移動(dòng)端頭部結(jié)構(gòu)，非常適合移動(dòng)訪客訪問(wèn)時(shí)展示更簡(jiǎn)潔的菜單。

進(jìn)入 Theme Settings > Header Builder > Mobile Header

你可以設(shè)置：

• 是否顯示移動(dòng)菜單按鈕（漢堡圖標(biāo)）
• 移動(dòng)菜單展開(kāi)后的內(nèi)容（菜單項(xiàng)、圖標(biāo)、搜索等）
• Logo 居中或左對(duì)齊
• 隱藏或顯示其他元素（如購(gòu)物車(chē)、語(yǔ)言切換等）

建議移動(dòng)端簡(jiǎn)潔為主，避免堆疊太多內(nèi)容。

五、多頭部布局支持（可選）

WoodMart 還支持為不同頁(yè)面使用不同頭部，比如：

• 首頁(yè)使用通欄白底頭部
• 商品詳情頁(yè)使用透明頭部
• 活動(dòng)頁(yè)使用特殊圖標(biāo)導(dǎo)航

總結(jié)

WoodMart 的頭部系統(tǒng)非常靈活，無(wú)需編碼，就能快速搭建一個(gè)適合品牌定位的導(dǎo)航區(qū)。通過(guò) Header Builder 的模塊化方式，你可以自由組合 Logo、菜單、搜索欄、購(gòu)物車(chē)、語(yǔ)言切換器等組件，并分別針對(duì)桌面與移動(dòng)端進(jìn)行優(yōu)化。結(jié)合 WordPress 自帶的菜單管理系統(tǒng)，導(dǎo)航結(jié)構(gòu)也能輕松維護(hù)。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個(gè)人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時(shí)間：周一至周五，9:30-18:30，節(jié)假日休息