文字、圖片與影片編輯
直接在畫布改文字,從右側設定換圖與調整裁切,並新增可播放的影片區塊。
共 5 項操作・10 個步驟・最後複驗 2026-08-13
從哪裡進入
進入網站編輯器,選取要修改的文字、圖片或區塊
照著下方圖文逐步完成
重點摘要(TL;DR)
把模板內容完整換成品牌自己的文字、圖片與影片,並在發佈前確認各裝置的呈現。
什麼時候會用到
- 要把模板示範文案與媒體換成正式內容
- 圖片主體被裁掉,或要在頁面加入影片
開始前先準備
- • 具備網站擁有者或可編輯網站內容的權限
- • 已準備可公開使用的文案、圖片與影片來源
操作步驟與完成後的結果
每一項操作都列出從哪裡開始、要做什麼,以及完成後應該看到的結果。
直接修改畫布文字
在頁面原位置改字,同時保留區塊版型與其他欄位。
- 1
這一步要做
在畫布點選要修改的標題,確認文字外框與浮動樣式工具列出現。

手機可左右滑動畫面,看清楚紅圈與欄位文字。
先直接點畫布上的標題;選取框確認接下來只會修改這個欄位。 - 1操作
- 位置:
- 首頁主視覺的品牌標題
- 動作:
- 點選要修改的標題
- 結果:
- 標題進入可編輯狀態
完成後會看到
目前文字欄位被選取,右側設定同步顯示這個區塊的內容。
- 2
這一步要做
全選原文字後輸入正式標題,點到別處前先確認換行與字數。

手機可左右滑動畫面,看清楚紅圈與欄位文字。
輸入後直接在原位置確認文案、換行與版面。 - 2核對
- 位置:
- 首頁主視覺的新標題
- 動作:
- 確認新文字已取代模板標題
- 結果:
- 新標題完整顯示
完成後會看到
畫布立即顯示新標題,變更留在目前草稿。
注意事項
- • 文字變更會留在草稿;尚未發佈前,公開網站不會更新。
調整文字樣式
只調整選取文字的粗細與對齊,不改動整站字型主題。
- 3
這一步要做
保持文字欄位被選取,按浮動工具列的「粗體」。

手機可左右滑動畫面,看清楚紅圈與欄位文字。
粗體只作用在目前選取的文字欄位。 - 3操作
- 位置:
- 文字浮動工具列
- 動作:
- 按粗體
- 結果:
- 標題套用粗體
完成後會看到
粗體按鈕成為啟用狀態,選取標題立即加粗。
- 4
這一步要做
按「置中」調整目前文字欄位的對齊,並在畫布確認結果。

手機可左右滑動畫面,看清楚紅圈與欄位文字。
對齊設定只影響目前欄位,不會改變其他段落。 - 4操作
- 位置:
- 文字浮動工具列
- 動作:
- 按置中
- 結果:
- 標題改為置中對齊
完成後會看到
置中按鈕成為啟用狀態,標題在自己的內容區內置中。
注意事項
- • 要調整全站字型、基本字級或品牌色,請改用網站樣式;不要逐欄重複設定。
上傳或替換圖片
從右側圖片欄位上傳檔案,或貼上可公開存取的圖片網址。
- 5
這一步要做
選取含圖片的作品區塊,展開要修改的項目,在「圖片」欄位上傳檔案或貼上圖片網址。

手機可左右滑動畫面,看清楚紅圈與欄位文字。
在這個欄位貼新網址;也可用下方按鈕上傳圖片。 - 5操作
- 位置:
- 右側作品圖片設定
- 動作:
- 輸入新圖片網址
- 結果:
- 圖片欄位接受新來源
完成後會看到
圖片欄位顯示新來源;上傳完成後會自動寫入可用網址。
- 6
這一步要做
回到畫布確認新圖片已載入,並檢查它是否屬於正確的作品項目。

手機可左右滑動畫面,看清楚紅圈與欄位文字。
替換後立刻在畫布確認目標卡片與圖片內容。 - 6核對
- 位置:
- 近期作品的第一張卡片
- 動作:
- 確認新圖片已載入
- 結果:
- 卡片顯示替換後圖片
完成後會看到
指定圖片在原卡片位置顯示,其他作品圖片不變。
注意事項
- • 只使用已取得授權且不含個資的圖片;外部網址必須允許公開讀取。
調整圖片裁切焦點
指定橫向與垂直焦點,讓主體在不同螢幕比例下仍留在畫面內。
- 7
這一步要做
切到關於頁並選取主視覺,在右側把「裁切焦點(水平)」改到主體所在方向。

手機可左右滑動畫面,看清楚紅圈與欄位文字。
在這個選單依主體位置調整水平焦點。 - 7操作
- 位置:
- 右側主視覺圖片設定
- 動作:
- 把水平焦點設為靠左
- 結果:
- 圖片以左側為裁切重心
完成後會看到
圖片的水平取景立即更新,主體不再被左右裁掉。
- 8
這一步要做
再調整「裁切焦點(垂直)」,同時觀察畫布中的主體位置。

手機可左右滑動畫面,看清楚紅圈與欄位文字。
在這個選單調整垂直焦點,讓不同高度的版面保留圖片主體。 - 8操作
- 位置:
- 右側主視覺圖片設定
- 動作:
- 把垂直焦點設為靠上
- 結果:
- 圖片以頂部為裁切重心
完成後會看到
圖片改以指定高度裁切,主體在容器內保持可見。
注意事項
- • 裁切焦點只會出現在支援焦點控制的圖片版型;其他圖片區塊可能改用比例與完整顯示設定。
加入影片
新增影片區塊,貼上 YouTube、Vimeo 或公開 MP4/WebM 來源。
- 9
這一步要做
回到首頁,在兩個區塊之間按「新增區塊」,選擇「影片」與「預設」版型。

手機可左右滑動畫面,看清楚紅圈與欄位文字。
從要插入的位置開啟區塊瀏覽器。 - 9操作
- 位置:
- 首頁主視覺與介紹區塊之間
- 動作:
- 按新增區塊
- 結果:
- 開啟區塊瀏覽器
完成後會看到
新影片區塊插入在指定位置,右側顯示影片來源欄位。
- 10
這一步要做
在影片來源貼上連結,確認畫布出現可播放的影片播放器。

手機可左右滑動畫面,看清楚紅圈與欄位文字。
在這個欄位貼上 YouTube、Vimeo 或公開影片檔連結。 - 10操作
- 位置:
- 新影片區塊的右側設定
- 動作:
- 輸入影片來源網址
- 結果:
- 影片欄位接受有效來源

手機可左右滑動畫面,看清楚紅圈與欄位文字。
播放器出現後,再到桌機與手機預覽確認版面。 - 10核對
- 位置:
- 首頁新增的影片區塊
- 動作:
- 確認播放器已載入
- 結果:
- 影片可在畫布中播放
完成後會看到
影片區塊載入播放器;草稿可預覽,發佈後才會出現在公開網站。
注意事項
- • 單一上傳影片上限為 60MB;較大的影片優先使用 YouTube 或 Vimeo。
- • 只嵌入已取得公開播放權利、且不含未授權個資的影片。
遇到問題先看這裡
- 為什麼公開網站還是舊內容?
- 編輯器內的變更會先留在草稿;確認桌機與手機預覽後,仍要執行發佈,訪客才會看到。
逐步操作
