使用樣式變更網站的顏色

你選擇的顏色配置會在網站設計扮演重要腳色。本指引會說明如何管理網站的調色盤。

在此指南中

1. 影片概覽
2. 尋找顏色設定
3. 定義調色盤
   1. 佈景主題顏色
   2. 自訂顏色
4. 自訂元素的顏色

影片概覽

尋找顏色設定

如果網站使用的是支援網站編輯器的佈景主題，你就可以透過「樣式」變更網站顏色。若想快速確認網站是否使用網站編輯器，請查看儀表板中的「外觀」。如果你可在這裡看到編輯器，請依照下列步驟變更網站顏色：

1. 前往儀表板中的「外觀」→「編輯器」。
2. 按一下左側的「樣式」，或選取右圖的「樣式」圖示此圖示看起來像黑白圓圈。
3. 選取「顏色」。
4. 只要選取「調色盤」，即可選擇網站的預設顏色，或從下列網站元素加以選擇：
   • 文字
   • 背景
   • 連結
   • 說明文字
   • 按鈕
   • 標題

本指引會在其餘部分詳細說明各項資訊。

定義調色盤

網站調色盤會決定整個網站所採用的預設顏色配置。設定調色盤能確保將整個網站的顏色配置維持一致，不過你仍可控制特定元素的個別顏色。

你可以在此處編輯「佈景主題」、「預設」和「自訂」顏色：

• 佈景主題：佈景主題設計師在建立佈景主題時設定的顏色配置，整個佈景主題的設計都會用到這些顏色。
• 預設：編輯頁面和文章時，區塊顏色設定中顯示的顏色。
• 自訂：定義與命名要在調色盤中使用的其他顏色。

佈景主題顏色

若要更新佈景主題顏色，請按照下列指示操作：

1. 在「調色盤」下方，按一下方塊中的任何位置。

2. 按一下「佈景主題」旁的三點圖示，然後選取「顯示詳細資料」，即可展開調色盤中的顏色區域清單。
3. 每個佈景主題都會定義自己的顏色區域。若要編輯該顏色，我們可在範例中從「主要」、「次要」、「前景、背景」或「第三順位」加以選擇：

在網站編輯器「樣式」區段更新「佈景主題」和「預設」顏色的步驟

4. 使用彈出的顏色挑選器選取想要的顏色。
5. 按一下「完成」，即可設定你選擇的顏色。
6. 按一下右上角的「儲存」，即可儲存變更。

自訂顏色

你也可以將幾種「自訂」顏色新增到網站的調色盤。系統會儲存這些顏色，供你從區塊的顏色設定中加以選擇。

若要新增自訂顏色，請按照以下額外步驟操作：

1. 在「自訂」下方按一下「+」按鈕。
2. 從顏色挑選器選擇顏色，或輸入 HEX、RGB 或 HSL 顏色值。
3. 對顏色的名稱 (預設為「顏色 1」) 按一下，然後輸入新顏色的名稱。
4. 按一下「完成」。

以下影片會示範這些步驟：

自訂元素的顏色

你會在顏色設定的「調色盤」正下方，看到網站各種元素的顏色編輯選項。這些元素包括：

• 文字：選擇用於整個網站一般基本文字的顏色，但不包括連結、說明文字、按鈕文字或標題。
• 背景：選擇將單色或漸層色彩用為網站背景。若想深入了解，可參閱自訂網站背景指引。
• 連結：選擇網站上所有連結的顏色。你可以在此選擇所有連結的「預設」顯示顏色，以及當使用者將游標懸置於連結上方時的「暫留」顯示顏色：

• 說明文字：選擇圖片區塊說明文字中使用的文字顏色。
• 按鈕：設定按鈕區塊中使用的顏色。你可以選擇文字顏色，並為按鈕背景設定單色或漸層色彩。
  • 目前無法控制按鈕的暫留顏色。你可以使用 CSS 程式碼，將暫留顏色套用至按鈕。
• 標題：設定整個網站標題區塊的顏色。你可以選擇文字顏色，並設定標題背景要用單色或漸層色彩。
  • 若要為各個標題層級 (H1 到 H6) 選擇不同的顏色，請按一下「顏色」旁的三點圖示展開選項，然後按一下所需的標題層級。標題層級旁會顯示核取記號，接著你就能關閉選項以存取該標題層級的顏色設定。

若你只想覆蓋特定文字 (而非所有元素) 的顏色，可以在特定文章或頁面中的個別區塊顏色設定中設定不同的顏色。