CMS：新增及設定進度條

6 分鐘

新增進度條，以視覺化方式呈現目標達成進度。您可使用 Velo 程式碼或 CMS 集合欄位來表示進度值。目標值可設為不變的靜態值，也可透過 Velo 或連結集合欄位設為動態值。

進度條範例的螢幕截圖。

進度條使用範例：

顯示待辦清單中有多少任務標示為「完成」。
顯示新手引導流程中已完成步驟的百分比。
顯示募款目標目前已募集的金額。
顯示需要達到特定票數的連署目前有多少人簽署。

提示：

您可使用 Velo 更新進度條的值，無需連結 CMS。若要了解方法，請參閱使用進度條 API。

開始之前：

將 CMS 新增至網站，並建立集合，其中須包含「數字」欄位類型來表示進度值。若要使用動態目標值，另請新增一個表示目標的「數字」欄位。

新增及設定進度條：

Wix 編輯器

Studio 編輯器

前往編輯器。
確認已在編輯器中啟用 Velo：
1. 點擊頂端的「開發模式」。
2. 點擊「開啟開發模式」。
點擊編輯器左側的「新增元件」。
點擊「互動」。
點擊「進度條」（位於「指標」下方）。
點擊所需的進度條，並將其拖曳至頁面。
點擊進度條上的「設定」。
輸入標籤，讓訪客和螢幕助讀程式了解進度條所代表的內容（例如「目標達成進度」）。
選擇將目標值設為動態值或靜態值：

動態目標值

靜態目標值