# (12) Rakosell 導覽列 (Navbar) 功能介紹與應用指南

在網站設計中，導覽列 (Navbar) 是訪客快速瀏覽和探索網站內容的關鍵工具。Rakosell 提供靈活多樣的導覽列設定選項，讓創作者能輕鬆設計符合品牌風格的網站導覽，提升訪客體驗和轉化率。本文將介紹 Rakosell 導覽列的功能、應用方式及其好處，幫助您更好地設計和優化網站。

## 一、網站導覽的用處及重要性

導覽列是網站的重要組成部分，幫助訪客快速找到他們需要的內容或服務。良好的導覽列設計可以：

* **提高訪客留存率**：幫助訪客輕鬆找到所需資訊，提升使用者體驗。
* **增強網站結構清晰度**：良好的導覽列有助於網站內容的組織，使網站更具邏輯性。
* **提高 SEO 效果**：有條理的內部連結結構有助於搜索引擎的索引和排名，提升網站的可見度。

## 二、如何設定導覽列

<figure><img src="/files/T3VLaIS39a2T73roLWD2" alt=""><figcaption></figcaption></figure>

在 Rakosell 平台上，您可以輕鬆設定和自定義導覽列。步驟如下：

1. 進入網站後台管理。
2. 點擊「網站設定」->「導覽 Navbar 及頁尾」。
3. 根據需求新增或編輯內部連結、外部連結和選項單，並進行設計。

以下是 Rakosell 導覽列功能的詳細介紹：

## 三、Rakosell 導覽列支援的功能

**新增內部連結 (Internal Link)**

<figure><img src="/files/1eys0XjUid1rRFsEQzmW" alt=""><figcaption></figcaption></figure>

* **介紹**：內部連結可以連結到網站上的任何頁面，包括已上架的產品、課程、會員文章、網誌等。
* **用途與好處**：
  * **提升訪客體驗**：幫助訪客快速找到想要瀏覽的內容，提高網站的便利性。
  * **增強 SEO 效果**：內部連結有助於搜索引擎更好地索引網站頁面，提升網站排名。

**新增外部連結 (External Link)**

<figure><img src="/files/imF6vGK7Sv3NnapqgExa" alt=""><figcaption></figcaption></figure>

* **介紹**：外部連結可以將訪客導向其他網站，如社交媒體或相關資源。
* **用途與好處**：
  * **增加網站價值**：透過分享外部資源或合作夥伴頁面，增強網站的專業性和信賴度。
  * **擴大合作機會**：方便分享合作夥伴的內容，促進商業合作和互動。

**新增選項單 (Dropdown Menu)**

<figure><img src="/files/CKsebUjzL5x8L5DuIHSY" alt=""><figcaption></figcaption></figure>

* **介紹**：選項單可用於內部或外部連結的分類，幫助整理網站結構並展示多個選項。
* **用途與好處**：
  * **提高導覽靈活性**：讓訪客可以快速找到不同類別的內容或服務。
  * **增強網站組織感**：選項單能清楚呈現網站的主要分類和次分類，提升網站的專業性。

**Navbar 顏色變化**

<figure><img src="/files/8tFYs2BsJ3pCTWwIXwzc" alt=""><figcaption></figcaption></figure>

* **介紹**：您可以自定義導覽列顏色，系統自動根據顏色深淺調整文字顏色（深色背景使用白色字，淺色背景使用黑色字）。此外，Navbar 也可以設定為透明效果。
* **用途與好處**：
  * **彈性設計**：可以自由選擇顏色，使網站與品牌形象保持一致。
  * **增強視覺效果**：透明導覽列能夠創造出更具吸引力的設計，突出網站的背景圖或內容。

<div><figure><img src="/files/xMoptHZh1EaCdDavZ4C6" alt=""><figcaption></figcaption></figure> <figure><img src="/files/v6UyhcXxmdj04ThI3Jj4" alt=""><figcaption></figcaption></figure></div>

**更改字型**

<figure><img src="/files/xkW6kdA6DX5vKM3gvYtF" alt=""><figcaption></figcaption></figure>

* **介紹**：在「主題設定 -> 字體風格」中，您可以選擇多達 20 多種字型，讓您的網站更具個性化。
* **用途與好處**：
  * **統一品牌形象**：選擇與品牌風格一致的字型，提升網站的專業感。
  * **提升設計美感**：靈活的字型選擇讓網站設計更具吸引力，增強用戶體驗。

**個性化 Navbar 的進階設計**

<figure><img src="/files/OwVo5k3AaGOOmDBtMOZJ" alt=""><figcaption></figcaption></figure>

* **介紹**：如需更個性化的設計，您可以在「Advanced 客製化代碼」的 \<head> 區域使用 HTML 進行深度自訂。
* **用途與好處**：
  * **深度自訂**：創作者可依需求進行設計，實現獨特的網站外觀。
  * **滿足各類需求**：無論是特定風格的排版還是複雜的功能需求，都能通過客製化達成。

#### 四、總結

Rakosell 提供豐富且靈活的導覽列設計選項，不論是內部連結、外部連結還是選項單，都能滿足創作者的各種需求。透過靈活應用這些功能，您可以輕鬆打造符合品牌形象的網站導覽，提升訪客的瀏覽體驗。同時，透過自訂字型、顏色及透明效果，您可以讓網站設計更具吸引力。如果需要更多客製化選項，Rakosell 也提供了 HTML 編碼區域，讓您能創造出真正專屬的網站風格。

現在就開始使用 Rakosell 的導覽列設計工具，為您的網站增添更多價值和魅力吧！


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://rakosell.gitbook.io/rakosell-tutorials-zh/12-rakosell-dao-lan-lie-navbar-gong-neng-jie-shao-yu-ying-yong-zhi-nan.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
