在現(xiàn)代網(wǎng)站設(shè)計(jì)中，粘性頁(yè)眉和透明頁(yè)眉常被用于提升視覺(jué)效果和操作流暢度。使用 Kadence 主題中的高級(jí)頁(yè)眉功能，可以靈活實(shí)現(xiàn)這兩種樣式，也可以將它們結(jié)合使用，實(shí)現(xiàn)豐富的頁(yè)面設(shè)計(jì)。

添加高級(jí)頁(yè)眉模塊

首先，在頁(yè)面中添加 Header (Adv) 區(qū)塊。系統(tǒng)會(huì)提示創(chuàng)建一個(gè)新的頁(yè)眉，或從現(xiàn)有模板中選擇。Kadence 提供多種預(yù)設(shè)模板，包括：

• 單行或多行桌面頁(yè)眉
• 針對(duì)移動(dòng)端優(yōu)化的頁(yè)眉布局

選擇模板后，可以使用可視化編輯器添加內(nèi)容模塊，自由排列各個(gè)部分。

設(shè)置透明頁(yè)眉

透明頁(yè)眉常用于頁(yè)面頂部有大圖或背景內(nèi)容的設(shè)計(jì)中，使頁(yè)面更具層次感。

設(shè)置步驟如下：

• 選中 Header (Adv) 區(qū)塊
• 在右側(cè)的設(shè)置欄中進(jìn)入 General 選項(xiàng)
• 啟用 Transparent Header

啟用后會(huì)出現(xiàn) Auto Spacing Under 設(shè)置，用于在頁(yè)面首個(gè)容器頂部自動(dòng)添加間距，避免內(nèi)容被遮擋。

同時(shí)，Header 和 Navigation 塊會(huì)增加以下樣式選項(xiàng)：

• 透明背景與邊框設(shè)置

• 導(dǎo)航菜單透明樣式與鏈接樣式

可以根據(jù)頁(yè)面配色和排版需求，微調(diào)這些樣式。

設(shè)置粘性頁(yè)眉

粘性頁(yè)眉在頁(yè)面滾動(dòng)時(shí)始終保持在頁(yè)面頂部，方便訪(fǎng)問(wèn)導(dǎo)航或操作入口。

啟用方式如下：

• 選中 Header (Adv) 區(qū)塊
• 在 General 設(shè)置中啟用 Sticky Header

激活后可配置以下內(nèi)容：

• Sticky Section：選擇要固定的區(qū)域（整行、頂部、中部或底部）

• Reveal On Scroll Up：頁(yè)面向上滾動(dòng)時(shí)顯示，向下滾動(dòng)時(shí)隱藏

• Shrink Middle Row：粘性狀態(tài)下縮小中間行，并設(shè)定縮小高度

Header 和 Navigation 模塊中也會(huì)出現(xiàn)對(duì)應(yīng)的粘性樣式設(shè)置，包括背景顏色、邊框和文字顏色等選項(xiàng)。

同時(shí)啟用粘性與透明頁(yè)眉

若需同時(shí)使用透明和粘性效果，只需在 Header (Adv) 的 General 設(shè)置中同時(shí)開(kāi)啟這兩個(gè)選項(xiàng)。

之后進(jìn)入 Style 設(shè)置，展開(kāi) Sticky Background Settings，自定義粘性狀態(tài)下的背景顏色和透明度。

這種組合適合用于視覺(jué)要求較高的頁(yè)面頂部區(qū)域，例如展示大圖、品牌口號(hào)或首頁(yè)橫幅。

設(shè)置粘性頁(yè)眉為透明或半透明

即使沒(méi)有啟用透明頁(yè)眉，也可以讓粘性狀態(tài)下的頁(yè)眉呈現(xiàn)透明或半透明樣式。

只需進(jìn)入 Header (Adv) 的 Style 設(shè)置，打開(kāi) Sticky Background Settings，使用顏色選擇器調(diào)節(jié)透明度數(shù)值，調(diào)整至期望的視覺(jué)效果。

設(shè)置半透明的透明頁(yè)眉

如果不希望透明頁(yè)眉完全透明，也可以設(shè)置為略帶背景色的半透明樣式。在 Style 設(shè)置中展開(kāi) Transparent Background，使用顏色選擇器調(diào)節(jié)顏色不透明度，讓頁(yè)眉呈現(xiàn)更柔和的視覺(jué)表現(xiàn)。

小結(jié)

Kadence 提供的高級(jí)頁(yè)眉功能，支持粘性與透明樣式的獨(dú)立使用和組合使用，適配各種頁(yè)面設(shè)計(jì)需求。結(jié)合自定義樣式控制，可以打造出實(shí)用且美觀(guān)的頁(yè)眉區(qū)域，提升整體頁(yè)面質(zhì)量。

如需進(jìn)一步定制樣式，可結(jié)合 Kadence Blocks 實(shí)現(xiàn)更細(xì)致的排版設(shè)計(jì)。

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