調整全站風格:顏色、字體、形狀、按鈕與動態
用顏色、字體、形狀、按鈕與動態這幾組全站設定建立一致的視覺語言,確認自動儲存後,再以桌機與手機預覽檢查真正的呈現結果。
調整全站風格:顏色、字體、形狀、按鈕與動態
完成後你會得到
你能用預設組合安全地調整全站設計 token,分辨配色、背景、字體、形狀、按鈕與動態各自控制的範圍,並在發佈前完成桌機與手機檢查。
開始前準備
- 你是網站擁有者或共同管理者,並已進入該網站的視覺編輯器。
- 先切到一個內容完整的頁面;全站設定會套用所有頁面,不只目前畫布。
- 變更會自動寫入草稿。要讓訪客看到結果,檢查完成後仍要按「發佈」。
- 先保存品牌色碼與字體規範,才能判斷預設組合是否符合品牌,而不是只憑當下感覺。
操作步驟
第 1 步,共 5 步:先定全站色盤,再加背景質感
按編輯器左側的「全站顏色」,打開「全站顏色與分頁背景」面板。配色組合會同時更新主色、強調色、頁面背景與深色區塊,讓文字對比與品牌色保持一致。
先選一組接近品牌的色盤;教學示範「雜誌古銅」。接著才選背景質感;教學示範「顆粒」。背景質感會從目前色盤衍生,不是另一套獨立顏色。
若只想改一個區塊的背景,應選取該區塊後使用「背景」,不要改全站顏色。
第 2 步,共 5 步:用字體組合一起處理標題與內文
按「全站字體」,往下捲到「字體組合」(上方依序是字級、字距、眉標樣式、中文字型等設定)。每張卡片都用自己的字體顯示「Aa 安庭」與內文範例,先比較中文標題,再確認正文是否適合長時間閱讀。
教學示範「現代明體編輯」:中文標題保留明體性格,正文回到清楚的無襯線字,拉丁展示字另有搭配。
字體組合會套用全站的標題、正文、導覽與按鈕。不要只看首頁大標,還要在手機預覽檢查換行與字級密度。
覺得整站的字太小或太大,用同一個面板最上方的「字級」,分別調內文與標題(緊湊、標準、舒適、大字),整站一起變。
第 5 步,共 5 步:用桌機與手機預覽做發佈前檢查
按「編輯中」切換成預覽,先檢查桌機畫布。確認導覽、標題、正文、卡片與主要按鈕使用同一套風格,而且文字對比清楚。
再按手機圖示。手機預覽會在獨立裝置畫布載入,檢查導覽是否可用、長標題是否過度換行、按鈕是否容易點,以及區塊留白是否過大。
預覽只代表草稿呈現正確。完成檢查後回到編輯模式,按「發佈」才會更新公開網站。




常見問題
- 換了配色組合,有些顏色沒有跟著變
- 多半是先前在「品牌自訂配色」改過那幾個顏色,自訂項目會刻意保留。到「全站顏色」面板展開「品牌自訂配色」,逐色按「還原」或按「清除這組自訂設定」。
- 只想改一個區塊,結果整站都變了
- 全站顏色、字體、形狀、按鈕與動態都會改設計 token。要只改一段,先點畫布上的區塊,再用區塊工具列的「背景」或欄位設定。
- 選了字體,但中文看起來差異不大
- 同時看字體卡片的「Aa 安庭」與內文範例;有些組合只讓拉丁展示字變化。需要明顯中文性格時,選含中文個性字的組合,再用手機預覽檢查正文。若在「分別指定品牌字體」設過自訂字體,它會蓋過字體組合,要改回請選「沿用字體組合」。
- 按鈕樣式不符合預期
- 形狀預設控制按鈕圓角,按鈕樣式控制填色、線框、陰影或底線。先判斷是哪一條軸,再調整對應項目。
- 顯示「草稿已儲存」,但公開網站仍是舊風格
- 「草稿已儲存」只代表草稿已同步。完成桌機與手機預覽後,還要按「發佈」;若剛發佈,公開頁快取可能需要短暫更新。
- 動態太強或訪客看不到動態
- 改選「純淡入」「預設淡入」這類較輕的效果,或選「靜態」;也可以展開「調整進場節奏」放慢速度、縮小位移。系統也會尊重裝置的減少動態偏好,因此部分訪客不播放進場效果是預期行為。
這篇如何保持正確
- 負責人
- Growth Team · Module Enablement
- 複驗節奏
- 最後複驗 2026-11-08;下次應於 2027-02-06 前完成
- 驗證依據與邊界
- 本文依 11 個程式或介面來源重播核對。內容說明安庭產品當下可操作流程;第三方平台、法規與價格請回到各自最新官方頁,本文不取代帳務、法律或資安專業判斷。
發現介面或步驟不同?請從關於安庭與聯絡方式回報,我們會重新驗證。










