搜尋操作說明
頁面與內容編輯展開目錄
頁面與內容編輯目前可使用

文字、圖片與影片編輯

直接在畫布改文字,從右側設定換圖與調整裁切,並新增可播放的影片區塊。

5 項操作・10 個步驟・最後複驗 2026-08-13

從哪裡進入

進入網站編輯器,選取要修改的文字、圖片或區塊

照著下方圖文逐步完成

重點摘要(TL;DR)

把模板內容完整換成品牌自己的文字、圖片與影片,並在發佈前確認各裝置的呈現。

什麼時候會用到

  • 要把模板示範文案與媒體換成正式內容
  • 圖片主體被裁掉,或要在頁面加入影片

開始前先準備

  • 具備網站擁有者或可編輯網站內容的權限
  • 已準備可公開使用的文案、圖片與影片來源

操作步驟與完成後的結果

每一項操作都列出從哪裡開始、要做什麼,以及完成後應該看到的結果。

1

直接修改畫布文字

在頁面原位置改字,同時保留區塊版型與其他欄位。

  1. 1

    這一步要做

    在畫布點選要修改的標題,確認文字外框與浮動樣式工具列出現。

    首頁主視覺標題被選取,文字周圍顯示編輯框

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    先直接點畫布上的標題;選取框確認接下來只會修改這個欄位。
    1. 1操作
      位置:
      首頁主視覺的品牌標題
      動作:
      點選要修改的標題
      結果:
      標題進入可編輯狀態

    完成後會看到

    目前文字欄位被選取,右側設定同步顯示這個區塊的內容。

  2. 2

    這一步要做

    全選原文字後輸入正式標題,點到別處前先確認換行與字數。

    首頁主視覺已顯示新輸入的品牌標題

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    輸入後直接在原位置確認文案、換行與版面。
    1. 2核對
      位置:
      首頁主視覺的新標題
      動作:
      確認新文字已取代模板標題
      結果:
      新標題完整顯示

    完成後會看到

    畫布立即顯示新標題,變更留在目前草稿。

注意事項

  • 文字變更會留在草稿;尚未發佈前,公開網站不會更新。
開啟這項操作的獨立教學頁
2

調整文字樣式

只調整選取文字的粗細與對齊,不改動整站字型主題。

  1. 3

    這一步要做

    保持文字欄位被選取,按浮動工具列的「粗體」。

    文字浮動工具列的粗體按鈕被啟用

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    粗體只作用在目前選取的文字欄位。
    1. 3操作
      位置:
      文字浮動工具列
      動作:
      按粗體
      結果:
      標題套用粗體

    完成後會看到

    粗體按鈕成為啟用狀態,選取標題立即加粗。

  2. 4

    這一步要做

    按「置中」調整目前文字欄位的對齊,並在畫布確認結果。

    文字浮動工具列的置中按鈕被啟用

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    對齊設定只影響目前欄位,不會改變其他段落。
    1. 4操作
      位置:
      文字浮動工具列
      動作:
      按置中
      結果:
      標題改為置中對齊

    完成後會看到

    置中按鈕成為啟用狀態,標題在自己的內容區內置中。

注意事項

  • 要調整全站字型、基本字級或品牌色,請改用網站樣式;不要逐欄重複設定。
開啟這項操作的獨立教學頁
3

上傳或替換圖片

從右側圖片欄位上傳檔案,或貼上可公開存取的圖片網址。

  1. 5

    這一步要做

    選取含圖片的作品區塊,展開要修改的項目,在「圖片」欄位上傳檔案或貼上圖片網址。

    右側設定面板的作品圖片網址欄位

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    在這個欄位貼新網址;也可用下方按鈕上傳圖片。
    1. 5操作
      位置:
      右側作品圖片設定
      動作:
      輸入新圖片網址
      結果:
      圖片欄位接受新來源

    完成後會看到

    圖片欄位顯示新來源;上傳完成後會自動寫入可用網址。

  2. 6

    這一步要做

    回到畫布確認新圖片已載入,並檢查它是否屬於正確的作品項目。

    作品卡片已顯示替換後的新圖片

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    替換後立刻在畫布確認目標卡片與圖片內容。
    1. 6核對
      位置:
      近期作品的第一張卡片
      動作:
      確認新圖片已載入
      結果:
      卡片顯示替換後圖片

    完成後會看到

    指定圖片在原卡片位置顯示,其他作品圖片不變。

注意事項

  • 只使用已取得授權且不含個資的圖片;外部網址必須允許公開讀取。
開啟這項操作的獨立教學頁
4

調整圖片裁切焦點

指定橫向與垂直焦點,讓主體在不同螢幕比例下仍留在畫面內。

  1. 7

    這一步要做

    切到關於頁並選取主視覺,在右側把「裁切焦點(水平)」改到主體所在方向。

    右側設定面板的裁切焦點水平選單

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    在這個選單依主體位置調整水平焦點。
    1. 7操作
      位置:
      右側主視覺圖片設定
      動作:
      把水平焦點設為靠左
      結果:
      圖片以左側為裁切重心

    完成後會看到

    圖片的水平取景立即更新,主體不再被左右裁掉。

  2. 8

    這一步要做

    再調整「裁切焦點(垂直)」,同時觀察畫布中的主體位置。

    右側設定面板的裁切焦點垂直選單

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    在這個選單調整垂直焦點,讓不同高度的版面保留圖片主體。
    1. 8操作
      位置:
      右側主視覺圖片設定
      動作:
      把垂直焦點設為靠上
      結果:
      圖片以頂部為裁切重心

    完成後會看到

    圖片改以指定高度裁切,主體在容器內保持可見。

注意事項

  • 裁切焦點只會出現在支援焦點控制的圖片版型;其他圖片區塊可能改用比例與完整顯示設定。
開啟這項操作的獨立教學頁
5

加入影片

新增影片區塊,貼上 YouTube、Vimeo 或公開 MP4/WebM 來源。

  1. 9

    這一步要做

    回到首頁,在兩個區塊之間按「新增區塊」,選擇「影片」與「預設」版型。

    首頁兩個區塊之間的新增區塊按鈕

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    從要插入的位置開啟區塊瀏覽器。
    1. 9操作
      位置:
      首頁主視覺與介紹區塊之間
      動作:
      按新增區塊
      結果:
      開啟區塊瀏覽器

    完成後會看到

    新影片區塊插入在指定位置,右側顯示影片來源欄位。

  2. 10

    這一步要做

    在影片來源貼上連結,確認畫布出現可播放的影片播放器。

    右側設定面板的影片來源網址欄位

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    在這個欄位貼上 YouTube、Vimeo 或公開影片檔連結。
    1. 10操作
      位置:
      新影片區塊的右側設定
      動作:
      輸入影片來源網址
      結果:
      影片欄位接受有效來源
    新增的影片區塊已載入可播放的影片播放器

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    播放器出現後,再到桌機與手機預覽確認版面。
    1. 10核對
      位置:
      首頁新增的影片區塊
      動作:
      確認播放器已載入
      結果:
      影片可在畫布中播放

    完成後會看到

    影片區塊載入播放器;草稿可預覽,發佈後才會出現在公開網站。

注意事項

  • 單一上傳影片上限為 60MB;較大的影片優先使用 YouTube 或 Vimeo。
  • 只嵌入已取得公開播放權利、且不含未授權個資的影片。
開啟這項操作的獨立教學頁

遇到問題先看這裡

為什麼公開網站還是舊內容?
編輯器內的變更會先留在草稿;確認桌機與手機預覽後,仍要執行發佈,訪客才會看到。
不是這個問題?查全部排除方法

逐步操作

需要一步一步做時,接著看詳細教學

相關功能

還是沒解決?

依你看到的狀況查一次問題排除,通常比找功能名稱快。真的卡住就直接告訴我們,把你正在做的事和畫面上的訊息寫進來就好。