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