使用導覽列區塊

「導覽列」區塊會顯示網站的選單，協助訪客瀏覽頁面。在這個指引中，你會學習到如何新增及自訂「導覽列」區塊。

「導覽列」區塊通常會新增至網站範本 (最常見於頁首或頁尾)。

若要新增「導覽列」區塊，請依照下列步驟操作：

1. 造訪網站的儀表板。
2. 前往「外觀」→「編輯器」。
3. 按一下右側的首頁預覽以編輯首頁，或選取想要顯示導覽選單的範本或範本組件 (例如頁首)。
4. 按一下「+ 區塊插入工具」，然後搜尋「導覽列」。
5. 按一下「導覽列」區塊，將該區塊新增至網站。

此處有新增區塊的詳細說明。 

第一次新增「導覽列」區塊時，會顯示網站選單。如果尚未建立自訂選單，系統會自動包含「頁面清單」區塊，顯示所有已發表的頁面，並在發表新頁面時自動更新。

若要自訂顯示的頁面、新增自訂連結或變更選單項目的順序，系統會先要求將「頁面清單」區塊轉換為個別連結。

依照下列步驟轉換「頁面清單」區塊：

1. 使用「清單檢視」前往「導覽列」區塊內的「頁面清單」區塊。

2. 按一下區塊工具列中的「編輯」按鈕：

3. 系統會顯示警告訊息，表示頁面清單不會再自動更新。按一下「編輯」以確認。

現在可以新增新的連結和頁面、移除選單項目，以及重新排序選單中的連結。

若要修改「導覽列」區塊中的特定連結，請按照下列步驟操作：

1. 使用「清單檢視」前往要在「導覽列」區塊中自訂的個別連結。
2. 在區塊設定側邊欄中，可以修改：
   • 文字：變更導覽選單中顯示的文字標籤。
   • 連結：更新目的地頁面或 URL。
   • 在新分頁中開啟：勾選方塊以設定在新分頁中開啟連結。
   • 說明：新增佈景主題支援連結說明時所顯示的文字。
   • Rel 屬性：為 SEO 目的設定「nofollow」等關係。
   • 樣式：按一下「樣式」分頁，變更字型大小和其他字型設定。

3. 在區塊工具列中，你可以：
   • 變更連結：按一下連結圖示以修改 URL，或設為在新分頁中開啟。
   • 新增格式：使用粗體、斜體或其他文字格式選項。
   • 新增子選單：按一下子選單圖示以建立下拉式選單。
   • 移動連結：使用向左/向右鍵在選單中調整連結的位置。

如需更多關於管理選單項目的詳細資料，請參閱編輯選單項目。

如果已建立超過一個選單，可以為「導覽列」區塊選擇不同的選單。

依照下列步驟來選擇不同的選單：

1. 使用「清單檢視」以選取「導覽列」區塊。
2. 在區塊設定側邊欄中，按一下「選單」旁的 (⋮)。

3. 在下列選項中選擇：
   • 選單：從已建立的現有選單中挑選。
   • 匯入傳統選單：轉換傳統 WordPress 選單以搭配區塊編輯器使用。只有當你要轉換傳統 WordPress 選單時，才會看到此選項。
   • 建立新選單：使用全新選單重新開始。

如需詳細的選單管理，請參閱我們的指引，了解如何新增連結、建立下拉式選單，以及調整項目的位置。

若要自訂「導覽列」區塊對訪客的顯示方式，請依照下列步驟操作：

1. 使用「清單檢視」以選取「導覽列」區塊。
2. 在區塊設定側邊欄中，按一下「設定」圖示。

3. 調整「版面配置」設定：
   • 對齊方式：選擇靠左、置中、靠右或選單項目之間分散對齊。
   • 方向：選取水平 (預設) 或垂直的選單版面配置。
   • 允許斷行：可關閉以保持單行導覽。
4. 設定「顯示」設定：
   • 顯示圖示按鈕：開啟以顯示「漢堡」圖示，或關閉以顯示「選單」文字。
   • 圖示：選擇兩行或三行水平線作為「漢堡」圖示。
   • 覆疊選單：選取「關閉」、「行動裝置」(預設) 或「一律」，以控制選單收合至覆疊的時間點。設計覆疊範本，以自訂行動選單覆疊的外觀。
5. 如果有子選單，請調整「子選單」行為：
   • 按一下開啟：開啟即可透過按一下來開啟子選單，或關閉即可透過移動游標來開啟子選單。
   • 顯示箭頭：開啟以顯示箭頭，指示子選單的存在。

如需更多選單自訂選項，請參閱自訂選單設計。

若要自訂「導覽列」區塊的視覺外觀，請依照下列步驟操作：

1. 使用「清單檢視」以選取「導覽列」區塊。
2. 在區塊設定側邊欄中，按一下「樣式」圖示。

3. 使用以下設定自訂外觀：
   • 顏色設定：變更文字、背景和連結顏色。
   • 文字設計設定：調整字型系列、大小和粗細。
   • 尺寸設定：控制邊框間距、邊界和空格間距。

如需更多選單樣式選項，請參閱自訂選單設計。