Kadence Blocks是一個(gè)功能強(qiáng)大的頁面構(gòu)建工具，它為用戶提供了豐富的自定義區(qū)塊。其中，高級(jí)導(dǎo)航塊（Navigation Adv Block）是專為在WordPress編輯器中構(gòu)建靈活導(dǎo)航菜單而設(shè)計(jì)的一款重要模塊，不僅支持經(jīng)典網(wǎng)站架構(gòu)，也完美適配全站編輯（FSE）模式。

本文將帶你全面了解高級(jí)導(dǎo)航塊的功能、設(shè)置方式以及如何與高級(jí)頭部塊協(xié)同使用，幫助你在網(wǎng)站中實(shí)現(xiàn)自定義程度極高的導(dǎo)航菜單。

一、高級(jí)導(dǎo)航塊概覽

高級(jí)導(dǎo)航塊是Kadence高級(jí)頭部系統(tǒng)的一部分，與頭部（Adv）塊和導(dǎo)航鏈接塊一起協(xié)同工作。你可以在頁面或模板中任意位置添加導(dǎo)航，而不僅限于頭部區(qū)域。

導(dǎo)航可以：

• 直接在塊編輯器中添加和配置
• 從Kadence儀表板中集中管理
• 支持經(jīng)典菜單導(dǎo)入并轉(zhuǎn)換為高級(jí)導(dǎo)航結(jié)構(gòu)

二、如何添加和管理高級(jí)導(dǎo)航

在編輯器中創(chuàng)建導(dǎo)航

你可以在頁面編輯器中插入“Navigation (Adv)”塊，在彈出的選項(xiàng)中選擇現(xiàn)有導(dǎo)航或創(chuàng)建一個(gè)新導(dǎo)航。添加后可以立即進(jìn)入導(dǎo)航構(gòu)建器，添加頁面、分類或自定義鏈接。

在后臺(tái)管理導(dǎo)航

通過 WordPress儀表盤 → Kadence → Navigations，你可以集中管理所有已創(chuàng)建的導(dǎo)航。點(diǎn)擊“Add New Kadence Navigation”可新建導(dǎo)航。

導(dǎo)航構(gòu)建器支持：

• 添加文章、頁面、產(chǎn)品或其他自定義類型
• 使用分類（如文章分類、產(chǎn)品分類）生成菜單項(xiàng)
• 拖拽式排序和分層結(jié)構(gòu)

三、支持導(dǎo)入WordPress經(jīng)典菜單

Kadence可以將現(xiàn)有的經(jīng)典WordPress菜單導(dǎo)入為高級(jí)導(dǎo)航。導(dǎo)入后，原菜單不會(huì)被修改，但會(huì)自動(dòng)轉(zhuǎn)換為高級(jí)導(dǎo)航菜單，供進(jìn)一步視覺和交互上的增強(qiáng)設(shè)置。

四、導(dǎo)航設(shè)置詳解

常規(guī)設(shè)置

• 選擇導(dǎo)航：切換當(dāng)前顯示的導(dǎo)航內(nèi)容
• 創(chuàng)建新導(dǎo)航：直接在塊內(nèi)創(chuàng)建新導(dǎo)航并編輯

• 打開構(gòu)建器：點(diǎn)擊快速進(jìn)入導(dǎo)航構(gòu)建界面

• 菜單方向：支持橫向或縱向
• 菜單間距：可分別調(diào)整水平和垂直導(dǎo)航項(xiàng)間距

• 父級(jí)激活項(xiàng)高亮：當(dāng)訪問子頁面時(shí)，自動(dòng)高亮父級(jí)菜單項(xiàng)

布局選項(xiàng)

• 橫向布局：支持標(biāo)準(zhǔn)、拉伸、網(wǎng)格三種方式
• 縱向布局：可啟用展開/折疊行為，讓菜單項(xiàng)以手風(fēng)琴方式展開

水平布局設(shè)置

在使用水平布局時(shí)，你可以選擇標(biāo)準(zhǔn)、拉伸和網(wǎng)格三種布局方式，每種布局提供不同的展示效果和優(yōu)化設(shè)置：

標(biāo)準(zhǔn)布局

標(biāo)準(zhǔn)布局適用于傳統(tǒng)樣式的導(dǎo)航菜單，導(dǎo)航項(xiàng)之間會(huì)保持固定的間距，適合簡單的菜單布局。

拉伸布局

拉伸布局將導(dǎo)航項(xiàng)均勻地?cái)U(kuò)展到容器的整個(gè)寬度，使菜單項(xiàng)分布更加均勻。

拉伸行為：

• 標(biāo)準(zhǔn)：在導(dǎo)航鏈接之間添加空間，將菜單項(xiàng)均勻分布在可用的空間內(nèi)。

• 填充并居中：通過增加間距調(diào)整文本區(qū)域，使每個(gè)導(dǎo)航項(xiàng)的文本居中對(duì)齊。文本對(duì)齊設(shè)置可以在導(dǎo)航項(xiàng)樣式的樣式塊設(shè)置中進(jìn)一步自定義。

網(wǎng)格布局

網(wǎng)格布局將導(dǎo)航項(xiàng)按結(jié)構(gòu)化網(wǎng)格的方式排列，提供了一種更有組織的導(dǎo)航菜單形式。

• 水平網(wǎng)格列：指定網(wǎng)格中的列數(shù)，導(dǎo)航鏈接會(huì)在定義的列內(nèi)對(duì)齊，并按網(wǎng)格方式從左到右流動(dòng)。

這些布局選項(xiàng)使你能夠靈活調(diào)整導(dǎo)航菜單的外觀和行為，以適應(yīng)不同的設(shè)計(jì)需求。

垂直布局設(shè)置

在使用垂直布局時(shí)，Kadence 高級(jí)導(dǎo)航塊提供以下兩項(xiàng)實(shí)用功能，用于增強(qiáng)用戶交互體驗(yàn)：

整個(gè)項(xiàng)目展開垂直子菜單

啟用此選項(xiàng)后，用戶可以點(diǎn)擊垂直菜單項(xiàng)的整個(gè)寬度來展開子菜單，而不僅限于文字或圖標(biāo)區(qū)域。

折疊垂直子菜單

該選項(xiàng)會(huì)將垂直子菜單以“手風(fēng)琴”方式顯示。

這兩項(xiàng)設(shè)置可以獨(dú)立或組合使用，有效提升垂直導(dǎo)航的可用性和視覺層次感。

五、錨點(diǎn)鏈接激活功能

支持錨點(diǎn)鏈接在滾動(dòng)到目標(biāo)區(qū)域時(shí)自動(dòng)變?yōu)榧せ顮顟B(tài)。你可以設(shè)置激活偏移量（Offset），以配合不同的布局與固定頭部高度，讓激活更精準(zhǔn)。

六、外觀樣式設(shè)置

樣式模板

• 標(biāo)準(zhǔn)樣式

• 下劃線樣式

• 全高樣式

• 全高下劃線樣式

鏈接樣式

支持針對(duì)常規(guī)、懸停、激活三種狀態(tài)設(shè)置顏色、背景、邊框、圓角、陰影等樣式。

字體設(shè)置

全局設(shè)置菜單項(xiàng)字體大小、行高、字重、字間距、字母大小寫等。也可以針對(duì)單個(gè)導(dǎo)航鏈接進(jìn)行覆蓋。

分隔線設(shè)置

在菜單項(xiàng)之間插入分隔線，可調(diào)整顏色和寬度。

七、子菜單與Mega菜單樣式（Pro）

子菜單容器設(shè)置

• 選擇子菜單出現(xiàn)動(dòng)畫（淡入、向上淡入等）

• 設(shè)置下拉菜單對(duì)齊方式和寬度

• 自定義子菜單項(xiàng)的字體、顏色、間距、邊框、陰影等

子菜單鏈接設(shè)置

子菜單鏈接的樣式設(shè)置可以幫助你統(tǒng)一控制高級(jí)導(dǎo)航中所有下拉菜單項(xiàng)的外觀，具體包含以下幾個(gè)方面：

顏色

為子菜單中的導(dǎo)航鏈接設(shè)置顏色，支持以下三種狀態(tài)的獨(dú)立設(shè)置：

• 正常狀態(tài)
• 懸停狀態(tài)
• 活動(dòng)狀態(tài)

分隔線

在每個(gè)子菜單項(xiàng)之間添加一條分隔線，提升層次感和可讀性。你可以自定義分隔線的顏色和寬度。

鏈接填充和邊距

統(tǒng)一設(shè)置子菜單中導(dǎo)航鏈接的內(nèi)邊距和外邊距，確保內(nèi)容間距一致，使菜單看起來更整潔規(guī)整。

對(duì)齊方式

設(shè)置子菜單項(xiàng)的文本對(duì)齊方式，可選擇：

• 左對(duì)齊

• 居中對(duì)齊

• 右對(duì)齊

此設(shè)置可根據(jù)不同設(shè)備類型分別配置，以實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。

排版

細(xì)致調(diào)整子菜單項(xiàng)的文字樣式，包括：

• 字體大小
• 行高
• 字母大小寫（如全部大寫）
• 字體系列（如系統(tǒng)字體、自定義字體）
• 字體粗細(xì)
• 字母間距

這些設(shè)置幫助你構(gòu)建一個(gè)視覺統(tǒng)一、交互友好的子菜單系統(tǒng)，特別適用于多層級(jí)菜單或需要美觀展示子項(xiàng)目的網(wǎng)站導(dǎo)航設(shè)計(jì)。

子菜單描述樣式設(shè)置

子菜單描述的樣式設(shè)置允許你調(diào)整導(dǎo)航鏈接描述的外觀，以便與主菜單項(xiàng)內(nèi)容協(xié)調(diào)一致，提升用戶體驗(yàn)。具體設(shè)置包括：

標(biāo)簽間距

調(diào)整導(dǎo)航標(biāo)簽和描述文本之間的間距，使描述與標(biāo)簽之間的排版更加清晰和舒適。

顏色

設(shè)置子菜單描述在不同狀態(tài)下的顏色，支持以下三種狀態(tài)的獨(dú)立設(shè)置：

• 正常狀態(tài)
• 懸停狀態(tài)
• 活動(dòng)狀態(tài)

排版

調(diào)整子菜單描述的字體樣式，包括：

• 字體大小
• 行高
• 字母大小寫（例如，自動(dòng)大寫）
• 字體系列（如選擇自定義字體）
• 字體粗細(xì)
• 字母間距

頂層導(dǎo)航描述樣式設(shè)置

你也可以調(diào)整頂層導(dǎo)航塊（高級(jí)頭部塊）中的描述樣式，這同樣有助于提升網(wǎng)站的整體設(shè)計(jì)一致性和可讀性。

標(biāo)簽間距

設(shè)置頂層導(dǎo)航鏈接標(biāo)簽和描述文本之間的間距，確保它們?cè)谝曈X上保持適當(dāng)?shù)姆指簟?/p>

顏色

為頂層導(dǎo)航鏈接描述設(shè)置顏色，支持以下狀態(tài)：

• 正常狀態(tài)
• 懸停狀態(tài)
• 活動(dòng)狀態(tài)

排版

調(diào)整頂層導(dǎo)航描述的字體樣式：

• 字體大小
• 行高
• 字母大小寫
• 字體系列
• 字體粗細(xì)
• 字母間距

這些描述樣式設(shè)置幫助你更好地控制導(dǎo)航鏈接的文本外觀和間距，使整個(gè)導(dǎo)航系統(tǒng)更加整潔、可讀并且富有設(shè)計(jì)感。

八、高級(jí)自定義選項(xiàng)

• 為整個(gè)導(dǎo)航塊或單個(gè)鏈接項(xiàng)添加邊距與內(nèi)邊距

• 設(shè)置HTML錨點(diǎn)（#ID）

• 添加CSS類以支持自定義樣式

九、管理高級(jí)導(dǎo)航

你可以通過以下方式輕松管理你的網(wǎng)站上的所有高級(jí)導(dǎo)航：

• 進(jìn)入儀表板：在 WordPress 儀表板中，點(diǎn)擊 Kadence 菜單。
• 選擇導(dǎo)航頁面：在 Kadence 菜單下，選擇 導(dǎo)航 頁面。
• 編輯、創(chuàng)建或刪除導(dǎo)航：
  • 編輯導(dǎo)航：你可以選擇已有的高級(jí)導(dǎo)航進(jìn)行編輯和調(diào)整。
  • 創(chuàng)建新導(dǎo)航：點(diǎn)擊“添加新 Kadence 導(dǎo)航”按鈕來創(chuàng)建新的高級(jí)導(dǎo)航。
  • 刪除導(dǎo)航：如果不再需要某個(gè)導(dǎo)航，可以在導(dǎo)航列表中進(jìn)行刪除操作。

通過這個(gè)管理頁面，你可以集中管理所有高級(jí)導(dǎo)航，方便進(jìn)行修改和優(yōu)化。

總結(jié)

Kadence高級(jí)導(dǎo)航塊不僅增強(qiáng)了導(dǎo)航菜單的美觀性與功能性，更徹底擺脫了傳統(tǒng)菜單設(shè)置的局限。無論你是在創(chuàng)建單頁滾動(dòng)網(wǎng)站，還是復(fù)雜的多層級(jí)電商平臺(tái)，使用高級(jí)導(dǎo)航塊都能讓你的設(shè)計(jì)更加靈活，交互更順暢。

若需進(jìn)一步定制樣式，還可以結(jié)合Kadence Custom Fonts插件、自定義CSS等方式實(shí)現(xiàn)更高階的設(shè)計(jì)效果。

建議結(jié)合以下內(nèi)容深入學(xué)習(xí)：

聯(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é)假日休息