fbpx
黑色星期五 (Black Friday) 優惠整理

Astra 佈景主題教學 | 如何變更網站背景色彩 [進階技巧]

這篇是進階教學,你將會學習得到設定不同區域的背景色彩,包含主網站背景區域、頁首區域頁尾區域資訊欄區域 和內容區域,Astra 佈景主題提供超高的彈性和擴展性,你可以「客制化」不同的區域的背景色彩。

📌 請注意,部分色彩設定只適用於「特定的版面配置」,Astra 對此有一些嚴謹的限制,下方我們會為逐步示範如果達成這系列的操作。

快速進入 Astra 全域色彩的捷徑:
請前往 [網站後台] → [外觀] → [自訂] → [Astra] → [全域] → [色彩]

相關網站連結:
Astra 全域色彩 (Global Colors) 控制和操作應用
Astra 官方教學 | 如何變更網站背景色彩?
Astra 官方教學 | 如何變更網站 [頁尾] 背景色彩?
Astra 官方教學 | 色彩與背景圖片模組設定


瀏覽 Astra 佈景主題
完整教學系列指南目錄

你將會學習得到以下知識和技能:

  • 如何啟用 Astra 全域色彩 (Global Colors)?
  • 色彩設定和細節調整 | 管理色彩介面
  • 表層色彩 (Surface Color) | 管理色彩介面
  • 網站背景和內容背景色彩 | 管理色彩介面
  • 調整網站頁首 (Header) 背景色彩
  • 調整網站頁尾 (Footer) 背景色彩
  • 調整網站資訊欄 / 側邊欄 (Sidebars) 背景色彩

如何啟用 Astra 全域色彩 (Global Colors)?

如何啟用 Astra 全域色彩 (Global Colors)?
如何啟用 Astra 版面配置 (Layouts)?
如何啟用 Astra 全域色彩 (Global Colors)?
如何啟用 Astra 版面配置 (Layouts)?

區域一:
前往 [網站後台] → [Astra],介面外觀可能會隨版本更新出現略有差異。

區域二:
點擊 [Dashboard / 控制台] 就能進入設定區域。


啟用全域色彩 (Global Colors) 功能

啟用全域色彩 (Global Colors) 功能
啟用網站版面配置 (Layouts) 功能
啟用全域色彩 (Global Colors) 功能
啟用全域色彩 (Global Colors) 功能

版面配置 (Layouts) 功能在 Astra 佈景主題 (免費版) 可能會有不少 [限制],但基礎的功能是足夠應付大部分初學者的需要

各版本的差異:
Astra 佈景主題 (免費版)
Astra Pro 佈景主題 (付費版)
Essential Bundle (付費版)
Growth Bundles (付費版)


如何從 Astra 控制台前往 Astra 全域色彩設定?

如何從 Astra 控制台前往 Astra 全域色彩設定?
如何從 Astra 控制台前往 Astra 全域色彩設定?
如何從 Astra 控制台前往 Astra 全域色彩設定?
如何從 Astra 控制台前往 Astra 全域色彩設定?

快速進入 Astra 全域色彩的捷徑常見有 3 個方法,其實都是大同小異,選擇一個最方便自己的即可,條條大路通羅馬。

✅ [ 方法一]:傳統式:
請前往 [網站後台] → [外觀] → [Astra] → [全域] → [色彩]

✅ [ 方法二]:Astra 專屬控制台:
前往 [網站後台] → [Astra],[Dashboard / 控制台] → [色彩]

✅ [ 方法三]:管理工具列:
在最上方的黑色工具列,點擊 [自訂] → [Astra] → [全域] → [色彩]


如何從網站 [外觀] 控制台前往 Astra 全域色彩設定?

如何從網站 [外觀] 控制台前往 Astra 全域色彩設定?
如何從網站 [外觀] 控制台前往 Astra 全域色彩設定?
如何從網站 [外觀] 控制台前往 Astra 全域色彩設定?
如何從網站 [外觀] 控制台前往 Astra 全域色彩設定?

管理工具列:
在最上方的黑色工具列,點擊 [自訂] → [Astra] → [全域] → [色彩]


色彩設定和細節調整 | 管理色彩介面

色彩設定和細節調整 | 管理色彩介面
色彩設定和細節調整 | 管理色彩介面
色彩設定和細節調整 | 管理色彩介面
色彩設定和細節調整 | 管理色彩介面

區域一:自訂屬於自己的全域調色盤
總共有 9 個色彩配置。你可以自訂屬於自己的全域調色盤。

區域二:Hex 調色盤
左上方是白色,代表明度值,而最右下方會呈現黑色。

區域三:Hex 調色盤
上方是調色盤,下方是調整透明度的設定。

區域四:色彩模式
總共有 3 種色彩模式,分別是 RGB、HSL 和 Hex。

區域五:清除按鈕
點擊 [Clear / 清除] 按鈕,可以還原預設值。

區域六:複制色碼
點擊 [複制按鈕],複制色碼。

區域七:填寫色彩代碼
支援直接輸入熟悉的色彩編號。


表層色彩 (Surface Color) | 管理色彩介面

表層色彩 (Surface Color)  | 管理色彩介面
表層色彩 (Surface Color) / 網站背景色彩 | 管理色彩介面
表層色彩 (Surface Color)  | 管理色彩介面
表層色彩 (Surface Color) / 網站背景色彩 | 管理色彩介面

區域一:網站背景 (Site Background)
網站背景支援 3 種選擇,包括是單色背景、漸層色背景和圖片背景。

區域二:內容背景 (Content Background)
影響內容容器,例如部落格文章的區域和資訊欄等等。


網站背景和內容背景色彩 | 管理色彩介面

網站背景和內容背景色彩  | 管理色彩介面
網站背景和內容背景色彩 | 管理色彩介面

WordPress 初學者可能對 [網站背景色彩] 和 [內容背景色彩] 較容易混淆,由其當兩者都是「白色背景」時會重疊在一起。

為方便解釋,上方圖片分別以 [綠色代表網站背景色彩] 和 [藍色代表內容背景色彩],前者是網站的整個背景區域,後者是指不同的版面容器,例如頁首區域、頁尾區域、資訊欄區域和內容區域的背景區域。


調整網站頁首 (Header) 背景色彩 | 管理色彩介面

調整網站頁首 (Header) 背景色彩  | 管理色彩介面
調整網站頁首 (Header) 背景色彩 | 管理色彩介面
調整網站頁首 (Header) 背景色彩  | 管理色彩介面
調整網站頁首 (Header) 背景色彩 | 管理色彩介面

區域一:頁首編輯器的設定
前往 [頁首編輯器] 的三層設定,點擊左方的 [齒輪圖示] 去控制獨立的背景設定。

區域二:前往設計 (Design) 分頁
預設是基礎 (General) 分頁,請點擊 [設計 (Design) 分頁]。

區域三:設定背景色彩
網站背景支援 3 種選擇,包括是單色背景、漸層色背景和圖片背景。


調整網站頁尾 (Footer) 背景色彩 | 管理色彩介面

調整網站頁尾 (Footer) 背景色彩  | 管理色彩介面
調整網站頁尾 (Footer) 背景色彩 | 管理色彩介面
調整網站頁尾 (Footer) 背景色彩  | 管理色彩介面
調整網站頁尾 (Footer) 背景色彩 | 管理色彩介面

區域一:頁尾編輯器的設定
前往 [頁尾編輯器] 的三層設定,點擊左方的 [齒輪圖示] 去控制獨立的背景設定。

區域二:設定背景色彩
網站背景支援 3 種選擇,包括是單色背景、漸層色背景和圖片背景。


調整網站資訊欄 / 側邊欄 (Sidebars) 背景色彩 | 管理色彩介面

調整網站資訊欄 / 側邊欄 (Sidebars) 背景色彩  | 管理色彩介面
調整網站資訊欄 / 側邊欄 (Sidebars) 背景色彩 | 管理色彩介面
調整網站資訊欄 / 側邊欄 (Sidebars) 背景色彩  | 管理色彩介面
調整網站資訊欄 / 側邊欄 (Sidebars) 背景色彩 | 管理色彩介面

區域一:前往設計 (Design) 分頁
預設是基礎 (General) 分頁,請點擊 [設計 (Design) 分頁]。

區域二:點擊背景的設定
當你點擊設定色彩的按鈕,跟上方和過往的操作方式相同。

區域三:設定背景色彩
網站背景支援 3 種選擇,包括是單色背景、漸層色背景和圖片背景。


瀏覽 Astra 佈景主題
完整教學系列指南目錄

常見問題 FAQ

閱讀完以上教學,你將會學習得到以下知識和技能:

1. 如何啟用 Astra 全域色彩 (Global Colors)?
2. 色彩設定和細節調整 | 管理色彩介面
3. 表層色彩 (Surface Color) | 管理色彩介面
4. 網站背景和內容背景色彩 | 管理色彩介面
5. 調整網站頁首 (Header) 背景色彩
6. 調整網站頁尾 (Footer) 背景色彩
7. 調整網站資訊欄 / 側邊欄 (Sidebars) 背景色彩

如何進入 Astra 全域色彩 (Global Colors) 的流程?

快速進入 Astra 全域色彩的捷徑:
✅ [方法一]:傳統式:
請前往 [網站後台] → [外觀] → [Astra] → [全域] → [色彩]

✅ [方法二]:Astra 專屬控制台:
前往 [網站後台] → [Astra],[Dashboard / 控制台] → [色彩]

✅ [方法三]:管理工具列:
在最上方的黑色工具列,點擊 [自訂] → [Astra] → [全域] → [色彩]

參考資料和引用文獻:

我們提供市場上最新的網站架設
新聞、教學和相關知識,我們不會向用戶
發送垃圾和推廣內容,而你可以隨時「取消訂閱」。

WordPress 學員人數
12,000+ 人 (持續增加之中)

前往免費的學習社團
中文語系的 WordPress - Facebook 社團列表

發表您的留言