在 WordPress 主題中，Blocksy 以靈活、輕量和高度自定義而受到喜愛。在移動端設(shè)計中，Blocksy 的移動端頁眉（Mobile Header）功能表現(xiàn)出色，具備結(jié)構(gòu)清晰的界面，支持 Off Canvas 滑出菜單、多樣化元素管理和多種視覺控制能力。本文介紹移動端頁眉的設(shè)置方法、Off Canvas 區(qū)域的應(yīng)用方式，以及高級功能細(xì)節(jié)。

一、進(jìn)入移動端頁眉設(shè)置

要開始設(shè)置移動端頁眉：

• 進(jìn)入 WordPress 后臺，打開外觀 > 自定義；
• 進(jìn)入 Header 區(qū)域；
• 在底部切換至 Tablet / Mobile View；
• 默認(rèn)顯示為平板視圖，在相對寬闊的界面中更便于操作。

整體結(jié)構(gòu)與桌面端一致，仍然采用三行布局。

二、移動端可用元素與布局邏輯

移動端頁面在元素配置方面進(jìn)行了優(yōu)化。例如，一些桌面端常用但對小屏無意義的組件會被隱藏或替換。其中最關(guān)鍵的變化是引入：

• Trigger（觸發(fā)器）元素：點擊后展開 Off Canvas 區(qū)域，是導(dǎo)航入口。

對于 Blocksy Premium 用戶，還可在頁眉中直接插入菜單，跳過觸發(fā)器結(jié)構(gòu)，提升操作效率。

三、Off Canvas 區(qū)域功能詳解

Off Canvas 是點擊菜單按鈕后從屏幕邊緣滑出的區(qū)域，可顯示菜單與自定義內(nèi)容。

支持的組件包括：

• HTML 區(qū)塊
• 社交圖標(biāo)
• 自定義按鈕
• 移動菜單

設(shè)置內(nèi)容包括：

• 顯示模式：支持全屏遮罩或側(cè)滑展示；
• 內(nèi)容對齊：可選頂部、居中或底部；
• 樣式設(shè)置：可調(diào)整顏色、漸變或圖案背景等參數(shù)。

內(nèi)容垂直排列，契合手機(jī)端瀏覽方式。

四、移動菜單配置（Mobile Menu）

菜單既可以放置在 Off Canvas 區(qū)域中，也可以直接插入頁眉。

提供樣式：

• 常規(guī)樣式；

• 分隔樣式（帶邊框與留白）；

支持折疊子菜單功能，初始狀態(tài)下子項隱藏，點擊父項后展開。也可設(shè)置為始終展開狀態(tài)。

Blocksy Premium 提供精簡菜單功能，可插入頁眉行中，適合展示少量核心頁面入口。

五、Trigger（觸發(fā)器按鈕）設(shè)置

觸發(fā)器是控制 Off Canvas 區(qū)域顯示的開關(guān)，必須添加至移動頁眉某一行。

其功能包括：

• 三種圖標(biāo)選擇；
• 自定義按鈕樣式；
• 標(biāo)簽文字是否展示；
• 字體與顏色樣式調(diào)整；

是移動頁面中的核心交互組件之一。

六、桌面端 Off Canvas 功能（Premium）

高級版本還支持在桌面端調(diào)用 Off Canvas 區(qū)域。布局邏輯與移動端一致，但適配更大屏幕的顯示方式。

可放置輔助菜單、社交鏈接或信息模塊，適合整潔頁面布局。

七、透明與粘性頁眉設(shè)置

移動端頁眉具備獨立的透明和粘性控制：

• 粘性頁眉：頁面滾動時固定在頂部；
• 透明頁眉：適合頁面頂部為圖片或視頻背景的情況；

這兩項功能與桌面端無關(guān)聯(lián)，可獨立啟用。

總結(jié)

Blocksy 的移動端頁眉設(shè)計，結(jié)構(gòu)清晰、靈活易調(diào)，能夠適應(yīng)各種場景下的移動端展示需求。無論是構(gòu)建簡單導(dǎo)航欄還是高級滑出菜單，Blocksy 提供了足夠的模塊和配置選項，為移動端站點的布局打下堅實基礎(chǔ)。

如正在構(gòu)建移動站點導(dǎo)航，不妨嘗試 Blocksy 的移動頁眉模塊，實現(xiàn)清爽、實用又美觀的前端效果。

最近更新

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