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

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

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

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

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

## 二、如何設定導覽列

<figure><img src="https://1384852102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcFiCFl7pbcst5HTRNHLH%2Fuploads%2FWTKACr6srPtuKSUxGMA4%2F1.png?alt=media&#x26;token=a502ba2a-db9b-40c7-8e20-1182e634d6f8" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

<figure><img src="https://1384852102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcFiCFl7pbcst5HTRNHLH%2Fuploads%2Fvti6JxfuspwKZCoZZsWt%2F2.png?alt=media&#x26;token=8c9d7553-6252-4f6e-b2ba-cf7ae534e36b" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1384852102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcFiCFl7pbcst5HTRNHLH%2Fuploads%2FLsuflhP6K5XYlLXBs0RH%2F3.png?alt=media&#x26;token=38327c5b-1d6f-4403-b401-f4a3170158d6" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1384852102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcFiCFl7pbcst5HTRNHLH%2Fuploads%2F6lhzW60HJvHGHZAnflMu%2F4.png?alt=media&#x26;token=095a2fcf-14f3-43c1-af8c-6ca042866515" alt=""><figcaption></figcaption></figure>

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

**Navbar 顏色變化**

<figure><img src="https://1384852102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcFiCFl7pbcst5HTRNHLH%2Fuploads%2Fd6CqDuPXMPY29XCS8w7J%2F5.png?alt=media&#x26;token=ddad1a28-e2cc-4ef0-98cc-12434dc1839d" alt=""><figcaption></figcaption></figure>

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

<div><figure><img src="https://1384852102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcFiCFl7pbcst5HTRNHLH%2Fuploads%2F6DssXChrHZCM9elpdxy7%2Fdarkcolor.png?alt=media&#x26;token=be5bf072-3f5b-4fd7-b188-a43fadc6bf42" alt=""><figcaption></figcaption></figure> <figure><img src="https://1384852102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcFiCFl7pbcst5HTRNHLH%2Fuploads%2FHNeKJskkqoC3FzwOSZ3S%2Flightcolor.png?alt=media&#x26;token=0e84a7aa-da27-4583-b267-56f11bfac5e8" alt=""><figcaption></figcaption></figure></div>

**更改字型**

<figure><img src="https://1384852102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcFiCFl7pbcst5HTRNHLH%2Fuploads%2F3rgx16d995oLPdzzAoAY%2F6.png?alt=media&#x26;token=4166e71a-b739-4c02-9d40-6d9131419c21" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://1384852102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcFiCFl7pbcst5HTRNHLH%2Fuploads%2FKPL0CEXnwZMa4R33FF7q%2F7.png?alt=media&#x26;token=c08c3a6c-caa1-47fa-9511-747681bb2253" alt=""><figcaption></figcaption></figure>

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

#### 四、總結

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

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