文字、圖片與影片編輯
直接在畫布改文字，從右側設定換圖與調整裁切，並新增可播放的影片區塊。
共 5 項操作・20 個步驟・最後複驗 2026-10-03
從哪裡進入
進入網站編輯器，選取要修改的文字、圖片或區塊
照著下方圖文逐步完成
重點摘要（TL;DR）
把模板內容完整換成品牌自己的文字、圖片與影片，並在發佈前確認各裝置的呈現。
什麼時候會用到
- 要把模板示範文案與媒體換成正式內容
- 圖片主體被裁掉，或要在頁面加入影片
開始前先準備
- • 網站擁有者、共同管理者或內容編輯才能編輯版面內容（站點人員不行）
- • 已準備可公開使用的文案、圖片與影片來源
操作步驟與完成後的結果
每一項操作都列出從哪裡開始、要做什麼，以及完成後應該看到的結果。
直接修改畫布文字
在頁面原位置改字，同時保留區塊版型與其他欄位。
- 1
這一步要做
在畫布點選要修改的標題，確認文字外框與浮動樣式工具列出現。
為什麼：直接在畫布上改字，最能看出長度與換行在版面上的樣子。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
先直接點畫布上的標題；選取框確認接下來只會修改這個欄位。 - 1操作
- 位置：
- 首頁主視覺的品牌標題
- 動作：
- 點選要修改的標題
- 結果：
- 標題進入可編輯狀態
完成後會看到
目前文字欄位被選取；右側設定面板開著時，會同步顯示這個區塊的內容。
- 2
這一步要做
全選原文字後輸入正式標題，點到別處前先確認換行與字數。
為什麼：標題在手機上常會多折一行，改完當下先看一眼最省事。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
輸入後直接在原位置確認文案、換行與版面。 - 2核對
- 位置：
- 首頁主視覺的新標題
- 動作：
- 確認新文字已取代模板標題
- 結果：
- 新標題完整顯示
完成後會看到
畫布立即顯示新標題，變更留在目前草稿。
做錯或略過會怎樣
游標還在文字框裡時，Ctrl+Z 只會退回打字；要退回整個修改，先點畫布空白處再按編輯器上方的「復原」。
- 3
這一步要做
畫布上點不到的內容（例如按鈕要連到哪裡、圖片的替代文字），選取區塊後按工具列的「編輯」，在右側設定面板找到那一格修改。
為什麼：連結目的地、替代文字這類內容不會直接顯示在畫面上，只能在設定面板改。
完成後會看到
右側面板列出這個區塊所有可改的欄位，改了畫布同步更新。
- 4
這一步要做
切到手機預覽，確認標題與段落在窄螢幕上沒有被擠成太多行或被截斷。
為什麼：多數訪客用手機看網站；桌機剛好一行的標題，手機可能變成三四行。
完成後會看到
桌機與手機的文字都完整、好讀。
注意事項
- • 文字變更會留在草稿；尚未發佈前，公開網站不會更新。
調整文字樣式
只調整選取文字的粗細與對齊，不改動整站字型主題。
- 5
這一步要做
保持文字欄位被選取，按浮動工具列的「粗體」。
為什麼：樣式只套在這一個文字欄位上，不會影響其他區塊。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
粗體只作用在目前選取的文字欄位。 - 5操作
- 位置：
- 文字浮動工具列
- 動作：
- 按粗體
- 結果：
- 標題套用粗體
完成後會看到
粗體按鈕成為啟用狀態，選取標題立即加粗。
- 6
這一步要做
按浮動工具列的「更多」，在「對齊」那一列按「置中」，並在畫布確認結果。
為什麼：對齊與清除樣式收在「更多」裡，讓工具列在手機預覽時也放得下。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
對齊設定只影響目前欄位，不會改變其他段落。 - 6操作
- 位置：
- 文字浮動工具列
- 動作：
- 按置中
- 結果：
- 標題改為置中對齊
完成後會看到
置中按鈕成為啟用狀態，標題在自己的內容區內置中。
- 7
這一步要做
要換字級或顏色時，用同一條工具列的「字級」與「文字顏色」；顏色建議選「主色」「強調」這類主題色。
為什麼：選主題色時，日後換全站配色這段文字會跟著換；自訂色碼則固定不變。
完成後會看到
文字立即套用新的字級或顏色。
- 8
這一步要做
想把這個文字欄位的樣式全部拿掉，按「更多」裡的「清除此元素樣式」。
為什麼：一次清掉比逐項改回去快，也不會漏掉某一項。
完成後會看到
文字回到版型原本的字級、顏色與對齊。
注意事項
- • 要調整全站字型、基本字級或品牌色，請改用網站樣式；不要逐欄重複設定。
上傳或替換圖片
從右側圖片欄位上傳檔案，或貼上可公開存取的圖片網址。
- 9
這一步要做
選取含圖片的作品區塊，展開要修改的項目，在「圖片」欄位上傳檔案或貼上圖片網址。
為什麼：清單型區塊的每一張卡片都有自己的圖片欄位，要先展開對的那一項。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
在這個欄位貼新網址；也可用下方按鈕上傳圖片。 - 9操作
- 位置：
- 右側作品圖片設定
- 動作：
- 輸入新圖片網址
- 結果：
- 圖片欄位接受新來源
完成後會看到
圖片欄位顯示新來源；上傳完成後會自動寫入可用網址。
做錯或略過會怎樣
右側面板沒打開時，先選取區塊再按工具列的「編輯」。
- 10
這一步要做
回到畫布確認新圖片已載入，並檢查它是否屬於正確的作品項目。
為什麼：換錯卡片是最常見的錯誤，換完回畫布對一次位置最保險。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
替換後立刻在畫布確認目標卡片與圖片內容。 - 10核對
- 位置：
- 近期作品的第一張卡片
- 動作：
- 確認新圖片已載入
- 結果：
- 卡片顯示替換後圖片
完成後會看到
指定圖片在原卡片位置顯示，其他作品圖片不變。
- 11
這一步要做
也可以點畫布上的圖片，或選取區塊後點圖片角落的「更換圖片」。若右側出現「共用資料圖片」，先核對資料名稱，設定圖片後按「儲存圖片」。
為什麼：只想換一張圖時，就地換最快，不必在長長的欄位清單裡找。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
核對資料名稱後再更換共用圖片；按「儲存圖片」會立即同步已發布內容。 - 11操作
- 位置：
- 畫面上的「儲存圖片」。
- 動作：
- 也可以點畫布上的圖片，或選取區塊後點圖片角落的「更換圖片」。若右側出現「共用資料圖片」，先核對資料名稱，設定圖片後按「儲存圖片」。
- 結果：
- 頁面圖片更新在草稿中；共用資料圖片必須按「儲存圖片」，成功後會顯示「圖片已儲存並同步更新」，並立即影響已發布內容。
完成後會看到
頁面圖片更新在草稿中；共用資料圖片必須按「儲存圖片」，成功後會顯示「圖片已儲存並同步更新」，並立即影響已發布內容。
- 12
這一步要做
上傳失敗時看欄位下方的訊息再處理：只支援 JPG、PNG、WebP、AVIF、GIF，單張 10MB 以內；系統上傳前會先自動壓縮圖片。
為什麼：訊息會直接說是格式、大小還是空間不夠，照著改最快。
完成後會看到
換成符合格式的檔案後重新上傳成功。
做錯或略過會怎樣
iPhone 的 HEIC 照片不在支援格式內，請先轉成 JPG。出現「已達此網站的上傳空間上限」時，要先清掉用不到的圖片。
注意事項
- • 只使用已取得授權且不含個資的圖片；外部網址必須允許公開讀取。
調整圖片裁切焦點
指定照片主體所在的位置，讓主體在不同螢幕比例下仍留在畫面內。
- 13
這一步要做
切到關於頁並選取主視覺，在右側的「照片位置」選主體所在的那一格（左上、上方、右上、左側、置中、右側、左下、下方、右下）。
為什麼：主體偏一邊的照片，在比例不同的螢幕上最容易被裁掉。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
在這個選單依主體位置調整水平焦點。 - 13操作
- 位置：
- 右側主視覺圖片設定
- 動作：
- 把水平焦點設為靠左
- 結果：
- 圖片以左側為裁切重心
完成後會看到
圖片的取景立即更新，主體不再被裁掉。
- 14
這一步要做
主體同時偏一邊又偏上或偏下時，改選對應的角落（例如「左上」），同時觀察畫布中的主體位置。
為什麼：九格同時涵蓋左右與上下，選對那一格，主體在各種螢幕比例下才會都留在框裡。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
在這個選單調整垂直焦點，讓不同高度的版面保留圖片主體。 - 14操作
- 位置：
- 右側主視覺圖片設定
- 動作：
- 把垂直焦點設為靠上
- 結果：
- 圖片以頂部為裁切重心
完成後會看到
圖片改以指定位置裁切，主體在容器內保持可見。
- 15
這一步要做
切到手機預覽再看一次主體有沒有被裁掉；主視覺在手機上仍裁得不理想時，可以另外放一張直式的手機圖。
為什麼：手機版位多半是直式，橫式照片兩側最常被裁掉，換一張直式圖比調焦點更直接。
欄位怎麼填
- 手機圖片（留空沿用桌機圖片）
- 只有部分主視覺版型有這一格。放一張直式照片給手機用；留空時手機沿用桌機圖片再裁切。
完成後會看到
手機畫面裡主體完整可見。
- 16
這一步要做
這個區塊沒有「照片位置」選單時，改看「圖片顯示方式」：選「裁切填滿」會把超出框的部分切掉，選「完整顯示」整張不裁、比例不同會留邊。
為什麼：不是每個圖片版型都有焦點設定，這一格是另一種避免重點被切掉的方法。
欄位怎麼填
- 圖片顯示方式
- 照片上有文字或商品細節不能被切掉時選「完整顯示」；想要畫面滿版選「裁切填滿」。
完成後會看到
圖片依你的選擇填滿框或完整顯示。
注意事項
- • 裁切焦點只會出現在支援焦點控制的圖片版型；其他圖片區塊可能改用比例與完整顯示設定。
加入影片
新增影片區塊，貼上 YouTube、Vimeo 或公開 MP4／WebM 來源。
- 17
這一步要做
回到首頁，在兩個區塊之間按「新增區塊」，選擇「影片」與「預設」版型。
為什麼：影片是獨立的區塊，插在哪個縫就出現在哪裡。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
從要插入的位置開啟區塊瀏覽器。 - 17操作
- 位置：
- 首頁主視覺與介紹區塊之間
- 動作：
- 按新增區塊
- 結果：
- 開啟區塊瀏覽器
完成後會看到
新影片區塊插入在指定位置，右側顯示影片來源欄位。
- 18
這一步要做
在影片來源貼上連結，確認畫布出現可播放的影片播放器。
為什麼：用平台連結時，轉檔與各裝置畫質由對方處理，也不佔本站流量。
欄位怎麼填
- 影片（YouTube／IG／TikTok／FB／脆，或上傳 MP4）
- 貼 YouTube（含 Shorts）、Vimeo、Instagram、Facebook、TikTok、Threads 的影片連結，或按「上傳影片檔」放 MP4／WebM（60MB 以內）。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
在這個欄位貼上 YouTube、Vimeo 或公開影片檔連結。 - 18操作
- 位置：
- 新影片區塊的右側設定
- 動作：
- 輸入影片來源網址
- 結果：
- 影片欄位接受有效來源
手機可左右滑動畫面，看清楚紅圈與欄位文字。
播放器出現後，再到桌機與手機預覽確認版面。 - 18核對
- 位置：
- 首頁新增的影片區塊
- 動作：
- 確認播放器已載入
- 結果：
- 影片可在畫布中播放
完成後會看到
影片區塊載入播放器；草稿可預覽，發佈後才會出現在公開網站。
做錯或略過會怎樣
連結認不出來時欄位下方會出現提示，前台不會顯示影片。貼文被刪除或改成私人，這裡會變成該平台的「無法瀏覽」畫面。
- 19
這一步要做
自己上傳的影片，等系統壓縮完成（最高 1080p，並會擷取封面）；想換成自己挑的畫面，在「封面圖（可留空，自架影片建議放）」放一張圖，必要時填「影片說明（可留空）」。
為什麼：封面是訪客按播放前唯一看到的畫面，決定他會不會點。
欄位怎麼填
- 封面圖（可留空，自架影片建議放）
- 影片載入前顯示的靜態畫面，選一張最能代表內容的截圖。
- 影片說明（可留空）
- 一兩句說明影片內容，例如「三分鐘看完施工流程」。
完成後會看到
影片載入前顯示封面圖，下方顯示說明文字。
- 20
這一步要做
影片偏長時改放 YouTube 再貼連結，不要直接上傳檔案。
為什麼：自架影片訪客下載的就是檔案本身，上限 60MB；長片放 YouTube 對訪客與網站都比較輕。
完成後會看到
影片以 YouTube 播放器嵌入在區塊裡。
注意事項
- • 單一上傳影片上限為 60MB；較大的影片優先使用 YouTube 或 Vimeo。
- • 只嵌入已取得公開播放權利、且不含未授權個資的影片。
遇到問題先看這裡
- 為什麼公開網站還是舊內容？
- 頁面文字與版面圖片先留在草稿；確認桌機與手機預覽後，仍要執行發佈。若圖片面板標示「共用資料圖片」，按「儲存圖片」後會立即同步所有引用該筆資料的公開頁面。
- 右側找不到「裁切焦點（水平）」？
- 裁切焦點已改成一個「照片位置」選單，從左上、上方、右上、左側、置中、右側、左下、下方、右下九格挑主體所在的位置；沒有設定時等同置中。同一區塊有多張照片時，選單名稱會標明是哪一張。
- 上傳圖片顯示「圖片太大」或格式不支援？
- 圖片單張上限 10MB，只支援 JPG、PNG、WebP、AVIF、GIF；系統會先自動壓縮。iPhone 的 HEIC 照片請先轉成 JPG 再上傳。
- 貼了影片連結，畫布卻沒有出現播放器？
- 確認連結是 YouTube（含 Shorts）、Vimeo、Instagram、Facebook、TikTok 或 Threads 的單一影片網址，而且貼文是公開的；認不出來時欄位下方會顯示提示。也可以改上傳 60MB 以內的 MP4 或 WebM 檔。
- 背景影片那一格貼 YouTube 為什麼不會播？
- 背景影片是靜音循環播放，只能用影片檔；平台連結在那裡不會播放，前台會改顯示封面圖。請上傳 MP4 或 WebM；要放 YouTube 或社群影片請改用「影片」區塊。
- 按 Ctrl+Z 沒有退回剛剛的修改？
- 游標還在文字框裡時，Ctrl+Z 只會退回打字內容。先點畫布空白處，再按 Ctrl+Z 或編輯器上方的「復原」。
- 為什麼我只能貼網址，不能上傳檔案？
- 試玩模式下只能貼圖片或影片網址；註冊建立網站之後就可以上傳檔案。