全站顏色、字體與形狀
用成組預設調整全站色盤、背景質感、字體、形狀、按鈕與動態，再用桌機與手機預覽檢查。
共 5 項操作・14 個步驟・最後複驗 2026-08-13
從哪裡進入
視覺編輯器 → 全站顏色／全站字體／全站形狀
照著下方圖文逐步完成
重點摘要（TL;DR）
設定會投影成整站共用的設計 token 並先寫入草稿；發佈後，公開頁面的所有區塊會用同一套規則渲染。
什麼時候會用到
- 網站已用模板建立，準備換成品牌自己的視覺語言
- 想讓所有頁面的顏色、字體、卡片與按鈕保持一致
- 發佈前要比較桌機與手機的實際呈現
開始前先準備
- • 你是網站擁有者或共同管理者，並已進入視覺編輯器
- • 先準備品牌色與字體方向，避免只憑單一首頁畫面做決定
- • 變更會先自動儲存到草稿；公開網站仍需要正式發佈
操作步驟與完成後的結果
每一項操作都列出從哪裡開始、要做什麼，以及完成後應該看到的結果。
設定色盤與背景質感
用同一組色彩 token 更新主色、強調色、背景與深色區塊，再疊加由色盤衍生的背景氛圍。
- 1
這一步要做
在編輯器左側按「全站顏色」。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
從左側按「全站顏色」，打開配色組合與背景質感。 - 1操作
- 位置：
- 編輯器左側工具列。
- 動作：
- 按「全站顏色」。
- 結果：
- 開啟配色組合與背景質感。
完成後會看到
開啟配色組合與背景質感。
- 2
這一步要做
在配色組合按「雜誌古銅」。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
先選色盤；一個動作同步更新主色、強調色、背景與深色區塊。 - 2操作
- 位置：
- 全站顏色面板的配色組合。
- 動作：
- 按「雜誌古銅」。
- 結果：
- 畫布套用完整配色色票。
完成後會看到
主色、強調色、頁面背景與深色區塊一起更新。
- 3
這一步要做
在背景質感按「顆粒」。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
背景質感跟著目前色盤衍生；這裡選「顆粒」。 - 3操作
- 位置：
- 全站顏色面板的背景質感。
- 動作：
- 按「顆粒」。
- 結果：
- 頁面底層增加由色盤衍生的顆粒氛圍。
完成後會看到
頁面底層增加由目前色盤衍生的顆粒氛圍。
注意事項
- • 全站顏色會改所有頁面；單一區塊請使用區塊背景。
- • 先選色盤再選背景質感，因為背景效果會從目前色盤衍生。
套用全站字體組合
一起更新標題、正文與拉丁展示字，維持全站排版角色一致。
- 4
這一步要做
在編輯器左側按「全站字體」。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按「全站字體」，卡片會直接呈現中文標題與正文樣貌。 - 4操作
- 位置：
- 編輯器左側工具列。
- 動作：
- 按「全站字體」。
- 結果：
- 開啟字體組合。
完成後會看到
開啟以真實字樣呈現的字體組合。
- 5
這一步要做
比較中文標題與正文範例後，按「現代明體編輯」。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
用卡片上的中文與正文範例判斷，再按「現代明體編輯」。 - 5操作
- 位置：
- 全站字體面板的字體組合。
- 動作：
- 按「現代明體編輯」。
- 結果：
- 全站標題、正文與拉丁展示字一起更新。
完成後會看到
全站標題、正文與拉丁展示字套用同一組排版角色。
注意事項
- • 不要只看首頁大標；還要檢查正文可讀性與手機換行。
- • 部分組合的中文正文相近，差異可能集中在標題或拉丁展示字。
搭配形狀與按鈕樣式
分別控制卡片表面與圓角，以及按鈕的填色、線框、陰影或底線收尾。
- 6
這一步要做
在編輯器左側按「全站形狀」。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按「全站形狀」，打開全站形狀與動態面板。 - 6操作
- 位置：
- 編輯器左側工具列。
- 動作：
- 按「全站形狀」。
- 結果：
- 開啟形狀、按鈕與動態設定。
完成後會看到
開啟形狀、按鈕與動態設定。
- 7
這一步要做
在形狀與圓角按「輪廓線框」。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
形狀處理卡片表面與圓角；這裡選「輪廓線框」。 - 7操作
- 位置：
- 形狀與圓角的線框質感群組。
- 動作：
- 按「輪廓線框」。
- 結果：
- 卡片改成透明細框與微圓角。
完成後會看到
卡片改成透明細框與微圓角，按鈕圓角跟著更新。
- 8
這一步要做
在按鈕樣式按「文字底線」。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按鈕收尾是獨立設定；這裡選「文字底線」。 - 8操作
- 位置：
- 同一面板的按鈕樣式。
- 動作：
- 按「文字底線」。
- 結果：
- 主要按鈕改為無框文字與底線收尾。
完成後會看到
主要按鈕改為無框文字與底線收尾，圓角規則不變。
注意事項
- • 形狀與按鈕是不同設定軸；先判斷問題來自圓角還是按鈕收尾。
- • 輪廓線框會改整站卡片表面，不只目前看到的首頁區塊。
設定動態並確認草稿已儲存
調整全站內容進場方式，並確認 autosave 已把選擇寫入草稿。
- 9
這一步要做
在動態效果按「電影感」。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
動態卡片會直接播放示意；這裡選「電影感」。 - 9操作
- 位置：
- 全站形狀與動態面板的電影特效群組。
- 動作：
- 按「電影感」。
- 結果：
- 內容改用較慢的上升與模糊聚焦進場。
完成後會看到
內容改用較慢的上升與模糊聚焦進場。
- 10
這一步要做
等編輯器上方顯示「已儲存」。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
看到「已儲存」才代表這組設定已安全寫入草稿。 - 10核對
- 位置：
- 編輯器上方工具列的儲存狀態。
- 動作：
- 確認顯示「已儲存」。
- 結果：
- 全站風格已寫入草稿，但尚未公開。
完成後會看到
全站風格已寫入草稿，但尚未公開。
注意事項
- • 已儲存不等於已發佈；訪客要看到變更仍須正式發佈。
- • 系統尊重減少動態偏好，因此部分訪客不播放進場效果是預期行為。
檢查桌機與手機預覽
在不受編輯控制干擾的畫布中確認全站風格的可讀性、操作性與響應式結果。
- 11
這一步要做
按工具列的「編輯中」切換成預覽。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按「編輯中」切到預覽，移除編輯控制的干擾。 - 11操作
- 位置：
- 編輯器上方中央。
- 動作：
- 按「編輯中」。
- 結果：
- 切換成無編輯框的預覽模式。
完成後會看到
畫布移除編輯框與控制列，呈現桌機預覽。
- 12
這一步要做
先從桌機首頁主標題確認色盤與字體，再檢查導覽、卡片與按鈕。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
先從首頁主標題確認桌機色盤與字體，再掃描卡片和按鈕是否一致。 - 12核對
- 位置：
- 編輯器中央桌機預覽的首頁主視覺。
- 動作：
- 確認首頁主標題呈現。
- 結果：
- 標題沒有編輯框，並套用新的全站色盤與字體。
完成後會看到
桌機畫布套用新的全站風格，文字對比清楚。
- 13
這一步要做
按工具列的手機圖示。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按手機圖示，切換到窄版裝置畫布。 - 13操作
- 位置：
- 編輯器上方中央的裝置切換列。
- 動作：
- 按手機圖示。
- 結果：
- 載入手機預覽畫布。
完成後會看到
切換並載入手機裝置畫布。
- 14
這一步要做
在手機預覽檢查導覽、換行、按鈕點擊範圍與區塊留白。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
最後檢查手機導覽、換行、按鈕點擊範圍與區塊留白。 - 14核對
- 位置：
- 編輯器中央的手機預覽畫布。
- 動作：
- 確認手機呈現。
- 結果：
- 手機版可讀、可操作，且沿用同一套全站風格。
完成後會看到
手機版可讀、可操作，且沿用同一套全站風格。
注意事項
- • 桌機與手機都要檢查；只看桌機容易漏掉長標題換行與按鈕點擊範圍。
- • 預覽是草稿畫面；確認無誤後仍要按發佈。
遇到問題先看這裡
- 只想改單一區塊，為什麼整站都變了？
- 這三個入口都改全站設計 token。若只想改一段，先選取畫布上的區塊，再使用該區塊的背景或欄位設定。
- 形狀和按鈕樣式有什麼不同？
- 形狀控制卡片表面、圓角、留白與按鈕圓角；按鈕樣式只控制填色、線框、陰影或底線等收尾，兩者可自由搭配。
- 顯示已儲存，為什麼公開頁沒更新？
- 已儲存只代表草稿同步完成。先完成桌機與手機預覽，再按發佈，公開網站才會更新。
- 為什麼有些訪客看不到進場動態？
- 系統會尊重裝置的減少動態偏好。這是可及性設計，不是設定遺失。
逐步操作