全站顏色、字體與形狀
用成組預設調整全站色盤、背景質感、字體、形狀、按鈕與動態，再用桌機與手機預覽檢查。
共 5 項操作・18 個步驟・最後複驗 2026-10-03
從哪裡進入
視覺編輯器 → 全站顏色／全站字體／全站形狀
照著下方圖文逐步完成
重點摘要（TL;DR）
設定會投影成整站共用的設計 token 並先寫入草稿；發佈後，公開頁面的所有區塊會用同一套規則渲染。
什麼時候會用到
- 網站已用模板建立，準備換成品牌自己的視覺語言
- 想讓所有頁面的顏色、字體、卡片與按鈕保持一致
- 發佈前要比較桌機與手機的實際呈現
開始前先準備
- • 你是網站擁有者或共同管理者，並已進入視覺編輯器
- • 先準備品牌色與字體方向，避免只憑單一首頁畫面做決定
- • 變更會先自動儲存到草稿；公開網站仍需要正式發佈
操作步驟與完成後的結果
每一項操作都列出從哪裡開始、要做什麼，以及完成後應該看到的結果。
設定色盤與背景質感
用同一組色彩 token 更新主色、強調色、背景與深色區塊，再疊加由色盤衍生的背景氛圍。
- 1
這一步要做
在編輯器左側按「全站顏色」。
為什麼：配色一次換掉主色、強調色、背景與深色區塊，整站顏色才會一致。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
從左側按「全站顏色」，打開配色組合與背景質感。 - 1操作
- 位置：
- 編輯器左側工具列。
- 動作：
- 按「全站顏色」。
- 結果：
- 開啟配色組合與背景質感。
完成後會看到
開啟「全站顏色與分頁背景」面板，可選配色組合、背景質感與分頁背景。
- 2
這一步要做
在配色組合按「雜誌古銅」。
為什麼：配色組合是一整組搭好的顏色，比一個一個挑顏色更不容易出現看不清楚的字。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
先選色盤；一個動作同步更新主色、強調色、背景與深色區塊。 - 2操作
- 位置：
- 全站顏色面板的配色組合。
- 動作：
- 按「雜誌古銅」。
- 結果：
- 畫布套用完整配色色票。
完成後會看到
主色、強調色、頁面背景與深色區塊一起更新。
- 3
這一步要做
在背景質感按「顆粒」。
為什麼：背景質感的顏色會跟著色盤自動衍生，換任何配色都搭得上。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
背景質感跟著目前色盤衍生；這裡選「顆粒」。 - 3操作
- 位置：
- 全站顏色面板的背景質感。
- 動作：
- 按「顆粒」。
- 結果：
- 頁面底層增加由色盤衍生的顆粒氛圍。
完成後會看到
頁面底層增加由目前色盤衍生的顆粒氛圍。
- 4
這一步要做
往下到「背景套用範圍」：選「全站預設」可以設定全站的「背景場景」；選「此頁：頁面名稱」，再按「沿用」、「自訂」或「關閉」，只改目前這一頁。
為什麼：大多數頁面沿用全站背景就好，只有需要特別氣氛的頁面才另外設定，網站看起來才一致。
欄位怎麼填
- 背景套用範圍
- 「全站預設」是所有頁面共用的背景；「此頁」只改目前打開的頁面；下方「自動產生的頁面」可以分別設定文章列表、產品列表等頁面。
完成後會看到
「自訂」只影響選到的範圍；「沿用」回到全站背景；「關閉」會停用那個範圍的背景場景與質感。
注意事項
- • 全站顏色會改所有頁面；單一區塊請使用區塊背景。
- • 先選色盤再選背景質感，因為背景效果會從目前色盤衍生。
套用全站字體組合
一起更新標題、正文與拉丁展示字，維持全站排版角色一致。
- 5
這一步要做
在編輯器左側按「全站字體」。
為什麼：標題、正文與英文展示字是一組搭好的，一起換才不會互相打架。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按「全站字體」，卡片會直接呈現中文標題與正文樣貌。 - 5操作
- 位置：
- 編輯器左側工具列。
- 動作：
- 按「全站字體」。
- 結果：
- 開啟字體組合。
完成後會看到
開啟「全站字體」面板：上方是字級與中文字型，下方是以真實字樣呈現的字體組合。
- 6
這一步要做
比較中文標題與正文範例後，按「現代明體編輯」。
為什麼：首頁大標只是一小部分，正文才是客人讀最久的地方。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
用卡片上的中文與正文範例判斷，再按「現代明體編輯」。 - 6操作
- 位置：
- 全站字體面板的字體組合。
- 動作：
- 按「現代明體編輯」。
- 結果：
- 全站標題、正文與拉丁展示字一起更新。
完成後會看到
全站標題、正文與拉丁展示字套用同一組排版角色。
- 7
這一步要做
在「字級」分別調「內文」與「標題」，各有緊湊、標準、舒適、大字四檔。
為什麼：客群年紀較大或內容偏長時，調整字級比一段一段改字快得多。
欄位怎麼填
- 內文
- 影響正文與說明文字。「標準」是原本大小，「舒適」約放大 12%，「大字」約 25%，「緊湊」約縮小 10%。
- 標題
- 影響各段標題。調大更有氣勢，但長標題在手機上會多換行，調完要用手機預覽看一次。
完成後會看到
整站文字一起放大或縮小；訪客自己用瀏覽器放大仍然有效。
- 8
這一步要做
「中文字型」可選「網路字型」或「裝置內建」：選「裝置內建」時，中文改用訪客手機與電腦本來就有的黑體。
為什麼：網頁開得快，客人才願意等；內容多的網站特別有感。
完成後會看到
中文改用裝置字型，第一次打開網頁不必下載字型檔；特色標題字不受影響。
做錯或略過會怎樣
Windows 與 Mac 的內建字形略有不同，兩種電腦看起來會有點差異；有些字體組合本來就用裝置字型，這時面板只會說明、不會出現兩個選項。
注意事項
- • 不要只看首頁大標；還要檢查正文可讀性與手機換行。
- • 部分組合的中文正文相近，差異可能集中在標題或拉丁展示字。
搭配形狀與按鈕樣式
分別控制卡片表面與圓角，以及按鈕的填色、線框、陰影或底線收尾。
- 9
這一步要做
在編輯器左側按「全站形狀」。
為什麼：形狀、按鈕與動態放在同一個面板，方便一起搭配。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按「全站形狀」，打開全站形狀與動態面板。 - 9操作
- 位置：
- 編輯器左側工具列。
- 動作：
- 按「全站形狀」。
- 結果：
- 開啟形狀、按鈕與動態設定。
完成後會看到
開啟形狀、按鈕與動態設定。
- 10
這一步要做
在「形狀 / 圓角」按「輪廓線框」。
為什麼：形狀決定卡片的表面與圓角，影響整站給人的氣質。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
形狀處理卡片表面與圓角；這裡選「輪廓線框」。 - 10操作
- 位置：
- 形狀與圓角的線框質感群組。
- 動作：
- 按「輪廓線框」。
- 結果：
- 卡片改成透明細框與微圓角。
完成後會看到
卡片改成透明細框與微圓角，按鈕圓角跟著更新。
- 11
這一步要做
在按鈕樣式按「文字底線」。
為什麼：按鈕樣式只管按鈕的收尾方式，可以和任何形狀自由搭配。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按鈕收尾是獨立設定；這裡選「文字底線」。 - 11操作
- 位置：
- 同一面板的按鈕樣式。
- 動作：
- 按「文字底線」。
- 結果：
- 主要按鈕改為無框文字與底線收尾。
完成後會看到
主要按鈕改為無框文字與底線收尾，圓角規則不變。
注意事項
- • 形狀與按鈕是不同設定軸；先判斷問題來自圓角還是按鈕收尾。
- • 輪廓線框會改整站卡片表面，不只目前看到的首頁區塊。
設定動態並確認草稿已儲存
調整全站內容進場方式，並確認 autosave 已把選擇寫入草稿。
- 12
這一步要做
在動態效果按「電影感」。
為什麼：動態效果決定內容捲進畫面時怎麼出現；越誇張越搶戲，內容多的網站建議選平緩一點的。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
動態卡片會直接播放示意；這裡選「電影感」。 - 12操作
- 位置：
- 全站形狀與動態面板的電影特效群組。
- 動作：
- 按「電影感」。
- 結果：
- 內容改用較慢的上升與模糊聚焦進場。
完成後會看到
內容改用較慢的上升與模糊聚焦進場。
- 13
這一步要做
等編輯器上方顯示「草稿已儲存」。
為什麼：看到「草稿已儲存」才代表設定真的存進草稿，重新整理也不會不見。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
看到「已儲存」才代表這組設定已安全寫入草稿。 - 13核對
- 位置：
- 編輯器上方工具列的儲存狀態。
- 動作：
- 確認顯示「已儲存」。
- 結果：
- 全站風格已寫入草稿，但尚未公開。
完成後會看到
全站風格已寫入草稿，但尚未公開。
- 14
這一步要做
不滿意時按上方的「復原」（Ctrl+Z）一步步退回；想回到更早的狀態，按左側「版本」，在「版本歷史」挑一個版本按「還原」。
為什麼：每一次套用都會留下紀錄，可以放心多試幾組再決定。
完成後會看到
全站風格回到先前的設定；還原本身也可以再用 Ctrl+Z 復原。
注意事項
- • 「草稿已儲存」不等於已發佈；訪客要看到變更仍須正式發佈。
- • 系統尊重減少動態偏好，因此部分訪客不播放進場效果是預期行為。
檢查桌機與手機預覽
在不受編輯控制干擾的畫布中確認全站風格的可讀性、操作性與響應式結果。
- 15
這一步要做
按工具列的「編輯中」，切換成「草稿預覽」。
為什麼：預覽會拿掉編輯框，看到的才是訪客的畫面。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按「編輯中」切到預覽，移除編輯控制的干擾。 - 15操作
- 位置：
- 編輯器上方中央。
- 動作：
- 按「編輯中」。
- 結果：
- 切換成無編輯框的預覽模式。
完成後會看到
畫布移除編輯框與控制列，呈現桌機預覽。
- 16
這一步要做
先從桌機首頁主標題確認色盤與字體，再檢查導覽、卡片與按鈕。
為什麼：先在大螢幕確認整體配色與字體是否協調，再看細節。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
先從首頁主標題確認桌機色盤與字體，再掃描卡片和按鈕是否一致。 - 16核對
- 位置：
- 編輯器中央桌機預覽的首頁主視覺。
- 動作：
- 確認首頁主標題呈現。
- 結果：
- 標題沒有編輯框，並套用新的全站色盤與字體。
完成後會看到
桌機畫布套用新的全站風格，文字對比清楚。
- 17
這一步要做
按工具列的手機圖示。
為什麼：多數客人用手機看網站，桌面好看不代表手機也好看。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按手機圖示，切換到窄版裝置畫布。 - 17操作
- 位置：
- 編輯器上方中央的裝置切換列。
- 動作：
- 按手機圖示。
- 結果：
- 載入手機預覽畫布。
完成後會看到
切換並載入手機裝置畫布。
- 18
這一步要做
在手機預覽檢查導覽、換行、按鈕點擊範圍與區塊留白。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
最後檢查手機導覽、換行、按鈕點擊範圍與區塊留白。 - 18核對
- 位置：
- 編輯器中央的手機預覽畫布。
- 動作：
- 確認手機呈現。
- 結果：
- 手機版可讀、可操作，且沿用同一套全站風格。
完成後會看到
手機版可讀、可操作，且沿用同一套全站風格。
做錯或略過會怎樣
只看桌面容易漏掉長標題換行、按鈕太小點不到，以及文字和背景太接近看不清楚。
注意事項
- • 桌機與手機都要檢查；只看桌機容易漏掉長標題換行與按鈕點擊範圍。
- • 預覽是草稿畫面；確認無誤後仍要按發佈。
遇到問題先看這裡
- 只想改單一區塊，為什麼整站都變了？
- 這三個入口都改全站設計 token。若只想改一段，先選取畫布上的區塊，再使用該區塊的背景或欄位設定。
- 形狀和按鈕樣式有什麼不同？
- 形狀控制卡片表面、圓角、留白與按鈕圓角；按鈕樣式只控制填色、線框、陰影或底線等收尾，兩者可自由搭配。
- 顯示「草稿已儲存」，為什麼公開頁沒更新？
- 「草稿已儲存」只代表草稿存好了。先完成桌機與手機預覽，再按發佈，公開網站才會更新。
- 為什麼有些訪客看不到進場動態？
- 系統會尊重裝置的減少動態偏好。這是可及性設計，不是設定遺失。
- 換了模板之後，我調好的顏色和字體不見了？
- 換模板時會一起換成那套模板的配色、字體與形狀（保留內容或用範例內容兩種方式都是）。換完再到「全站顏色」「全站字體」「全站形狀」重新選一次，或馬上按「復原」退回。
- 客人說字太小看不清楚？
- 到「全站字體」的「字級」，把「內文」調到「舒適」或「大字」，整站正文會一起放大；標題可以分開調。調完用手機預覽確認換行。
- 只想讓某一頁的背景不一樣？
- 在「全站顏色」往下找「背景套用範圍」，選「此頁：頁面名稱」再按「自訂」，設定只影響那一頁；想回到全站背景就按「沿用」。
- 網站第一次打開時，中文字比較晚才出現？
- 可以到「全站字體」的「中文字型」選「裝置內建」，中文改用訪客裝置本來就有的字型，不必另外下載，開得比較快。
- 改了不喜歡，怎麼回到原本的樣子？
- 還在編輯器裡就按上方「復原」或 Ctrl+Z；已經離開過編輯器，到左側「版本」的「版本歷史」選較早的版本按「還原」。