區塊與版型編輯
從區塊間加入內容，調整順序、版型、版面、背景與顯示狀態。
共 4 項操作・16 個步驟・最後複驗 2026-10-03
從哪裡進入
視覺編輯器 → 頁面畫布
照著下方圖文逐步完成
重點摘要（TL;DR）
變更先寫入草稿；隱藏會保留內容但不在預覽與公開站渲染，刪除則立即從草稿移除。
什麼時候會用到
- 想調整首頁內容順序
- 想增加、暫時隱藏或移除一段內容
- 想換排版但保留可對應的原文字與圖片
- 想只改一個區塊的排列或背景
開始前先準備
- • 先切到要編輯的頁面並保持在編輯模式
- • 你是網站擁有者、共同管理者或內容編輯（站點人員不能編輯版面）
- • 每一頁都可以新增多個區塊
操作步驟與完成後的結果
每一項操作都列出從哪裡開始、要做什麼，以及完成後應該看到的結果。
新增適合用途的區塊
在按下入口的位置加入新的內容段落。
- 1
這一步要做
在編輯畫布的兩個區塊之間按「新增區塊」。
為什麼：從哪個縫按下去，新區塊就插在哪裡，不必插完再搬。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
紅框是目前真正開放的新增入口：把滑鼠移到區塊間，再按「新增區塊」。 - 1操作
- 位置：
- 畫布中兩個區塊之間。
- 動作：
- 按「新增區塊」。
- 結果：
- 開啟區塊與版型選擇器。
完成後會看到
開啟區塊選擇器，依頁面內容、轉換行動與內容經營分組。
做錯或略過會怎樣
入口平常看不見，滑鼠移到兩個區塊交界才會浮出來；空白頁則會直接顯示。
- 2
這一步要做
先選區塊用途，再按一張版型預覽。
為什麼：先選用途再挑外觀，可以避免為了版型好看放進用不到的內容。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
先選用途，再按一張版型預覽；這裡示範加入「關於」的純文字版型。 - 2操作
- 位置：
- 新增區塊選擇器右側的版型卡片。
- 動作：
- 按「純文字」。
- 結果：
- 新區塊插入剛才選定的位置。
完成後會看到
新區塊插入剛才選定的位置，可立即選取與編輯。
- 3
這一步要做
找不到想要的區塊時，在選擇器上方的搜尋框（「搜尋區塊、版型或素材…」）輸入關鍵字，例如「價格」「影片」「常見問題」。
為什麼：區塊與版型很多，用搜尋比逐個分類翻快。
完成後會看到
列出符合的區塊與版型；沒有結果時顯示「找不到符合的區塊」。
- 4
這一步要做
如果選的版型需要某個還沒開的功能，會先跳出「這個區塊會開啟『…』功能」的確認；確定要用就按「加入並開啟」，不要就按「取消」。
為什麼：這類區塊顯示的是後台資料（例如商品、文章、作品），功能沒開，區塊在公開站就不會出現。
完成後會看到
區塊插入頁面，同時開啟該功能，後台多出對應的管理頁。
做錯或略過會怎樣
標著「需…」的版型，加入後畫面上看到的是範例；要到後台新增資料，訪客才看得到內容。用不到的功能之後可以在「網站設定」的「功能開關」關掉。
注意事項
- • 目前沒有左側新增入口；一般網站要從區塊間加入。
- • 標示「需…」的版型需要先啟用功能並建立後台資料。
- • 先用用途選區塊，再選外觀；不要為了版型好看加入不需要的內容。
選取、排序與複製區塊
整理頁面段落，並用副本重用既有內容。
- 5
這一步要做
點區塊讓藍框出現，再在區塊工具列的「更多」選單按「上移」「下移」，或用桌機區塊名稱左側的拖曳把手調整順序。
為什麼：「上移」「下移」按完選單不會關，連移好幾格可以連續按。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
先點區塊本身；藍框與展開的工具列代表操作目標已鎖定。 - 5核對
- 位置：
- 畫布的首頁主視覺區塊。
- 動作：
- 確認工具列已展開。
- 結果：
- 後續按鈕只作用在這個區塊。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按下箭頭會把目前區塊往後移一格；在頁尾時按鈕會停用。 - 5操作
- 位置：
- 區塊上方工具列的向下箭頭。
- 動作：
- 按「下移」。
- 結果：
- 區塊往後移一格。
完成後會看到
只有選取的區塊移動一格或移到放開的位置，內容本身不變。
- 6
這一步要做
在「更多」選單按「複製這一段」建立內容相同的副本；確定不要時選中副本，在「更多」選單按「刪除這一段」。
為什麼：副本保留原本的文字、圖片與設定，做相似段落時比從頭新增快。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按「複製」先做一份內容相同的副本，再修改成新段落。 - 6操作
- 位置：
- 區塊工具列靠右的「複製」。
- 動作：
- 按「複製」。
- 結果：
- 原區塊旁出現內容相同的副本。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
刪除不會再確認；示範刪掉剛建立的副本，按錯可立刻復原。 - 6操作
- 位置：
- 副本區塊工具列最右側。
- 動作：
- 按「刪除」。
- 結果：
- 副本立即從草稿移除。
完成後會看到
複製後出現副本；刪除後副本立即從草稿移除，左下角出現「已刪除「…」」的提示，可直接按「復原」救回。
做錯或略過會怎樣
左下角的「復原」只在你還沒做下一個修改前有效；做了別的修改後，要用編輯器上方的「復原」一步步退回。
- 7
這一步要做
暫時不公開時在「更多」選單按「隱藏這一段」；要恢復就點那條「已隱藏」提示選取它，再在「更多」選單按「顯示這一段」。
為什麼：隱藏會保留全部內容與設定，之後一鍵就能放回來；刪除則要靠復原才救得回。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按「隱藏」只改顯示狀態，內容仍留在草稿。 - 7操作
- 位置：
- 區塊工具列的眼睛圖示。
- 動作：
- 按「隱藏」。
- 結果：
- 內容縮成已隱藏提示，訪客畫面不顯示。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按「顯示」會把原內容完整帶回來。 - 7操作
- 位置：
- 已隱藏區塊工具列的眼睛圖示。
- 動作：
- 按「顯示」。
- 結果：
- 原區塊內容與設定恢復。
完成後會看到
隱藏區塊不在預覽與公開站渲染，但內容與設定完整保留。
- 8
這一步要做
整理完按工具列的「編輯中」切成「草稿預覽」，從上往下確認段落順序，再按一次切回編輯。
為什麼：編輯時的提示條與工具列會佔版面，預覽才看得出真正的節奏與間距。
完成後會看到
畫布拿掉藍框與工具列，已隱藏的區塊不會出現，看到的就是訪客的順序。
注意事項
- • 刪除會立即執行、不再確認；編輯器可復原最近 30 個步驟。
- • 可能還會再用的內容先選「隱藏」，不要刪除。
- • 頁首導覽列與頁尾不是一般頁面區塊，不會跟著排序。
切換同類區塊版型
用目前內容預覽不同排版，再套用合適版本。
- 9
這一步要做
選中有多個版型的區塊，在工具列按「換版型」。
為什麼：換版型只換排列方式，可對應的文字與圖片會帶過去，比刪掉重做省事。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按「換版型」打開目前區塊類型可用的真實預覽。 - 9操作
- 位置：
- 選取區塊上方工具列。
- 動作：
- 按「換版型」。
- 結果：
- 開啟版型預覽面板。
完成後會看到
面板上方列出「安全換版」的排版；下方「轉換區塊」的版型會改變內容結構，套用前會先列出差異。
- 10
這一步要做
按一張版型預覽套用；卡片上若標著「…項內容此版型不顯示（保留）」或「…項文字樣式暫不顯示」，先確認可以接受。
為什麼：那些內容沒有被刪，只是這個版型沒有位置放；切回原版型就會回來。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按一張預覽即可套用；卡片顯示的是目前內容在新排版中的樣子。 - 10操作
- 位置：
- 換版型面板中的「水滴遮罩分欄」卡片。
- 動作：
- 按版型預覽。
- 結果：
- 目前區塊改用新排版。
完成後會看到
區塊改用新排版，可對應的原文字與圖片仍保留。
- 11
這一步要做
選「轉換區塊」裡的版型時，會先出現「轉換成『…』？」的說明；確定就按「保留原資料並轉換」，不要就按「取消」或「← 返回版型列表」。
為什麼：轉換會把內容搬進不同的結構，先看清楚哪些欄位新版型不顯示，再決定要不要換。
完成後會看到
區塊改用新的內容結構；原內容保留在原版型的快照裡，切回原版型即可完整復原。
- 12
這一步要做
換完切到手機預覽看一次；不滿意就按編輯器上方的「復原」，或再按「換版型」換回原本那一個。
為什麼：同一個版型在桌機與手機的排法可能差很多，兩邊都看過再定案。
完成後會看到
桌機與手機都排得順，或區塊回到原本的版型。
注意事項
- • 只有一種版型的區塊不顯示換版型按鈕。
- • 跨內容來源切換可能需要重填欄位；面板會先顯示警告。
設定版面與背景
調整單一區塊的排列、留白與背景，不影響全站其他區塊。
- 13
這一步要做
選中有版面欄位的區塊，按「版面」並調整圖片位置、欄數、對齊、高度或留白。
為什麼：版面只改這一個區塊的排法，不會動到其他區塊或全站樣式。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
這個版型有圖片位置與留白設定，所以工具列會出現「版面」。 - 13操作
- 位置：
- 選取區塊上方工具列。
- 動作：
- 按「版面」。
- 結果：
- 開啟這個版型實際提供的排列選項。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按「左側」後，只有目前這個圖文區塊交換圖片與文字位置。 - 13操作
- 位置：
- 版面面板的圖片位置選項。
- 動作：
- 按「左側」。
- 結果：
- 圖片移到左邊，文字移到右邊。
完成後會看到
目前區塊依選項即時重新排列；未提供的選項不會顯示。
- 14
這一步要做
按「背景」，選主題色或潮流漸層；要還原時按「清除」或「無（跟版型預設）」。
為什麼：背景只提供配好對比的顏色，文字會自動換成看得清楚的顏色，不必自己調。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
按「背景」開啟單一區塊的主題色與策展漸層。 - 14操作
- 位置：
- 選取區塊上方工具列。
- 動作：
- 按「背景」。
- 結果：
- 開啟安全色票與漸層面板。
手機可左右滑動畫面，看清楚紅圈與欄位文字。
選主題色票後只改目前區塊，前景文字會自動配對對比色。 - 14操作
- 位置：
- 背景面板的主題色票列。
- 動作：
- 按「強調色」。
- 結果：
- 目前區塊套用強調色背景，文字保持清楚。
完成後會看到
只有目前區塊的背景改變，文字前景色自動維持可讀。
- 15
這一步要做
想讓連續幾個區塊看起來是同一片背景，選後面那個區塊，按「背景」再選「與前一區塊共用背景」。
為什麼：共用背景能把相關的幾段內容視覺上綁在一起，不必每段各設一次。
完成後會看到
這個區塊沿用前方最近一個有設定背景的區塊，畫面連成一片。
做錯或略過會怎樣
前方沒有任何區塊設過背景時，這個選項按不下去，會顯示「請先為前方區塊設定背景」。
- 16
這一步要做
背景選單裡有「循環影片背景」時，可以上傳影片檔並放一張「靜態封面（必要）」，再選「文字與遮罩」讓文字看得清楚。
為什麼：會動的背景適合放在主視覺這類需要氣氛的段落，封面確保任何情況下畫面都不會空掉。
完成後會看到
區塊背景變成靜音循環影片；影片載入前、無法播放或訪客開啟減少動態時改顯示封面。
做錯或略過會怎樣
沒放封面時影片背景不會啟用。這裡只能用影片檔，YouTube 等平台連結不會播放；要放 YouTube 請改用「影片」區塊。
注意事項
- • 版面按鈕只在目前版型真的提供排列欄位時出現。
- • 導覽列與頁尾不提供區塊背景。
- • 背景只提供已通過對比設計的主題色與潮流漸層，不提供任意色盤。
遇到問題先看這裡
- 找不到新增區塊入口？
- 把滑鼠移到兩個區塊之間，按浮出的「新增區塊」。目前沒有左側新增入口。
- 為什麼沒有換版型、版面或背景按鈕？
- 先點區塊讓藍框出現。換版型只在同類型有多個版型時顯示；版面只在目前版型提供排列欄位時顯示；導覽列與頁尾不提供背景。
- 刪除後怎麼救回？
- 刪除會立即執行、不再確認，但左下角會出現「已刪除」提示，直接按上面的「復原」即可；提示消失後，用編輯器上方的「復原」（Ctrl+Z），系統保留最近 30 個步驟。只是暫時不公開時應改用「隱藏這一段」。
- 區塊在草稿有內容，公開頁卻沒顯示？
- 先確認區塊沒有隱藏，對應功能已啟用且資料型區塊已有後台資料，再儲存並正式發佈。
- 上移、下移、複製、刪除的按鈕跑去哪了？
- 收進區塊工具列最右邊的「更多」選單。選取區塊後點它，就會看到「上移」「下移」「隱藏這一段」「複製這一段」「刪除這一段」。導覽列與頁尾只有隱藏，不能排序、複製或刪除。
- 右側設定面板沒有出現？
- 點區塊只會選取它；按區塊工具列上的「編輯」才會打開右側的完整設定。面板開著時，點別的區塊會直接切過去。
- 區塊上方出現黃色的「需要『…』功能才會顯示」？
- 這個區塊需要的功能還沒開，發佈後訪客在公開站看不到它。到左側「功能」把它開起來（也可以到後台「探索更多功能」，或「網站設定」的「功能開關」），必要時到後台新增資料，再發佈。
- 區塊名稱旁出現「降為 H2」或「重複 H1」？
- 「降為 H2」代表本頁的主標題已經由上面的區塊提供，這一段自動降一級，不需要處理。「重複 H1」代表這個區塊的版型也輸出主標題、而且無法自動降級，本頁因此有多個主標題；換一個版型，或把它移到主標題那一段之前。
- 首頁想多一區「熱銷排行」，只放標了熱銷的商品，要怎麼做？
- 有兩種做法。最快的是讓銷量決定：在編輯器首頁兩個區塊之間按「新增區塊」，加一面商品牆（例如「商品自動列表」），選取它之後，在右邊的設定把「排序」選成「累計銷量高到低」，數量填你要的名次數（例如 12），標題改成「熱銷排行」。名次依商品卡上顯示的「已售件數」：你在商品上填的「已售起始數」加上之後在網站實際賣出的件數（退款會扣回）。另一種是自己挑候選：到「網路商店」上方的「設定」，進「商品標記」確認有「熱銷」標記（出廠就有，名稱可以改），在要放進去的每一件商品編輯頁勾「熱銷」並儲存，再到商品牆的「只放有這個標記的商品」選「熱銷」；排序可以維持「照商品列表的順序」自己排名次，也可以選「累計銷量高到低」。同一個地方還能設「分類」與「只放特價中的商品」，排序也有最新上架、價格與折扣。想讓訪客看到全部熱銷商品，可以把「查看全部 連結」設成 /products/tag/ 加上標記的英文代號（出廠的熱銷是 /products/tag/hot）。目前只有累計銷量，還不能依「最近 30 天」排名。