全站顏色、字體與形狀
一次調整整個網站的主題色、字體、圓角與動態風格。
共 5 項操作・10 個步驟・最後複驗 2026-08-03
從哪裡進入
視覺編輯器 → 全站樣式
照著下方圖文逐步完成
重點摘要（TL;DR）
全站樣式會一起改變，個別區塊若有自己的設定，可能會覆蓋全站預設值。
什麼時候會用到
- 要讓整站符合品牌識別
- 想一次改掉所有頁面的視覺基調
開始前先準備
- • 準備品牌色或喜歡的風格方向
操作步驟與完成後的結果
每一項操作都列出從哪裡開始、要做什麼，以及完成後應該看到的結果。
套用主題色
一次改變全站背景、文字、按鈕與強調色的搭配。
- 1
這一步要做
在編輯器左側按「全站顏色」，找到「配色組合」。
完成後會看到
面板顯示多組實際色票預覽。
- 2
這一步要做
點一組色票，再查看畫布的背景、文字與主要按鈕。
完成後會看到
整個網站立即套用新配色，不必逐區塊改色。
注意事項
- • 套色後要確認文字與背景仍清楚，尤其是照片上方的文字。
更換全站字體
用一致的標題與內文字體改變整站個性。
- 1
這一步要做
在左側按「全站字體」，查看「字體組合」內每張「Aa 安庭」預覽。
完成後會看到
每張卡同時顯示標題字與內文字的樣子。
- 2
這一步要做
點一個字體組合，查看首頁標題與長段落。
完成後會看到
全站標題和內文一起換成該組字體。
注意事項
- • 花俏字體適合標題，不代表長文好讀；請同時查看內文範例。
設定圓角與形狀
統一卡片、圖片與按鈕的方正或圓潤程度。
- 1
這一步要做
在左側按「全站形狀」，找到「形狀 / 圓角」。
完成後會看到
面板顯示方正、圓潤、浮起與線框等實際外觀卡片。
- 2
這一步要做
點選一種形狀，再視需要搭配下方「按鈕樣式」。
完成後會看到
全站卡片與按鈕依選擇更新成一致的輪廓與收尾風格。
注意事項
- • 形狀和按鈕樣式是兩個設定；選完形狀仍要看主要按鈕是否清楚。
調整動態風格
改變區塊進場速度與感覺，或關閉動態。
- 1
這一步要做
在全站樣式面板找到「動態效果」，查看平緩、電影或彈跳等分類。
完成後會看到
每張動態卡會播放小型進場示範。
- 2
這一步要做
點選一種效果；不想要動畫時選「靜態」。
完成後會看到
畫布上的區塊改用新進場方式，靜態模式不播放進場動畫。
注意事項
- • 動態越多不一定越好；醫療、法律或資訊密集網站宜選平緩或靜態。
用桌機與手機預覽
確認全站樣式在大螢幕與窄螢幕都清楚。
- 1
這一步要做
完成配色、字體與形狀後，把上方「編輯中」切成「預覽」。
完成後會看到
畫面移除編輯框，顯示訪客視角。
- 2
這一步要做
切換「桌機」與「手機」，查看標題、按鈕、卡片與背景對比。
完成後會看到
可看出同一套全站樣式在不同寬度下的實際效果。
注意事項
- • 樣式改動是全站性的；至少抽查首頁與一個內容較長的內頁。
遇到問題先看這裡
- 改了全站顏色，某個區塊還是舊色？
- 該區塊可能使用個別樣式；點進區塊設定，改回沿用全站樣式或手動調整。