這篇完成:改前台全站顏色、字體與按鈕圓角。
這不是後台深淺色(那是頂欄「後台樣式」或 基本設定的後台預設外觀)。
後台路徑:網站 → 網站樣式(/admin/settings/appearance)。預設僅擁有者。底欄 儲存設定 才會寫入;畫布上的變化多半是預覽(短暫延遲自動套用),重新整理會回到上次儲存的外觀。
和「頁首頁尾」差在哪?
| 設定 | 管什麼 |
|---|---|
| 網站樣式(本頁) | 油漆:顏色、字、圓角、密度與陰影 |
| 頁首頁尾 | 門口怎麼擺:組件、選單。見 頁首頁尾概覽 |
1. 色彩組合
區塊標題 色彩組合。選一套預設會一次帶入五色:品牌主色、輔助色、頁面背景、主要文字、強調色。
預設組合名稱例如:極簡灰、清透藍灰、暖紙米、珊瑚墨白、薄荷清新、玫瑰灰粉、霧藍紙白。
選 自訂色彩 後,可點色塊開色盤或輸入 #RRGGBB。留白則沿用主題包/預設。
預設色票的頁面背景是白色;色偏走輔助色/強調色。若要深色底,請用自訂色彩自己調背景(並確認文字對比足夠)。
品牌主色和強調色各用在哪裡?
| 顏色 | 前台用在 |
|---|---|
| 品牌主色 | 按鈕、連結、勾選圖示等可以點的地方 |
| 強調色 | 裝飾用的重點:區塊標題上方的小標(一般區塊;疊在照片上時改跟隨該區塊的淺色/深色文字,才看得清楚)、價格方案的推薦標籤與方案名稱、數據與倒數計時的數字、步驟編號與時間軸節點、引言左側線條、特色卡等的圖示框 |
沒有設定強調色時,這些地方會跟品牌主色同色。強調色會用在小字上,請挑在白底上看得清楚的深色;Logo 上偏淺的顏色(例如淺青、淺黃)比較適合放在輔助色。
暖紙米與薄荷清新的強調色已調深,小字比較清楚。早先套用這兩組的網站不會自動改色;想換成新的強調色,請再點一次該色彩組合(會一併帶回該組其他四色),或在自訂色彩只改 強調色:暖紙米 #b45309、薄荷清新 #047857。
頂欄也可快速切色彩組合(與表單未完全雙向同步);仍以 儲存設定 為準。
2. 字體配對
字體配對 下拉;可選「(不使用配對)」。
進階可展開 自訂字體 stack,分別填標題/內文字體。
3. 按鈕外觀
按鈕外觀:方正/適中/圓潤/膠囊感,或 自訂數值 填 按鈕圓角(px)。
4. 外觀與質感/快速套用
快速套用 一次調密度、陰影、轉場、懸停:極簡扁平、柔和標準、強調層次,或 自訂組合 再展開細項。
| 細項 | 選項概念 |
|---|---|
| 區塊密度 | 緊湊/舒適/寬鬆 |
| 卡片陰影 | 無/柔和/重陰影 |
| 頁面轉場 | 需實際換頁才看得到 |
| 懸停強度 | 把滑鼠移到消息/定價卡等 |
| 進場動畫 | 主要在桌面寬度捲動進入時;手機與編輯器 iframe 同頁預覽不一定播放 |
怎麼驗
- 儲存後無痕開前台,按鈕色與品牌主色一致;小標、價格推薦標籤等與強調色一致。
- 手機與桌面各看一次對比(文字是否仍清楚,尤其是強調色的小標)。
- 頁首 Logo 是否仍搭得上新底色;不行就換 Logo。
常見卡住
| 狀況 | 怎麼辦 |
|---|---|
| 調了重新整理又回去 | 只是預覽,還沒按 儲存設定。 |
| 編輯者不能進 | 請擁有者改。 |
| 深色底字看不清 | 自訂色彩時一併調 主要文字 與 頁面背景。 |
| 小標顏色太淡 | 小標用的是 強調色,請改深一點的強調色。 |
| 想讓某顆按鈕用別的顏色 | 首屏與 CTA 橫幅的次要按鈕可以單獨換色,見 全螢幕頁面編輯器。 |