- 登入
- 註冊
頁面編輯器區塊使用教學
秒站頁面編輯器目前提供 22 個可新增區塊，分成基本內容、媒體、版面、進階功能與動態列表 5 類。內建頁面與 Vibe 畫布都能使用這些區塊，也能透過「自訂 HTML」進行 Vibe Coding。
這篇教學會先說明新增、編輯與儲存流程，再逐一介紹每個區塊適合放什麼內容，有哪些重要設定，以及使用時要注意的地方。
先分清楚區塊與 Vibe Coding#
Vibe 畫布是可獨立發佈的頁面，頁面編輯器與 Gutenberg 是兩種編輯工具，Vibe Coding 則是用 AI 協作產生程式碼的製作方法。想做 Vibe Coding，不代表一定要進入 Gutenberg。
- 一般內容：使用頁面編輯器的原生區塊，修改較直覺。
- 原生區塊中加入客製效果：使用頁面編輯器的「自訂 HTML」。
- 已有整頁程式碼或偏好舊工作流：使用 Gutenberg 的自訂 HTML。
同一張 Vibe 畫布如果同時保留 Gutenberg 內容與頁面編輯器區塊，前台會先顯示 Gutenberg 內容，再顯示頁面編輯器區塊。若要把程式碼排在兩個原生區塊之間，請使用頁面編輯器的「自訂 HTML」。完整比較請看〈Vibe 畫布 AI Coding〉。
開始前先認識頁面編輯器#
進入秒站控制中心的「頁面編輯器」，先從上方選擇要編輯的頁面。左側「版面區塊」會列出目前頁面的所有區塊，右側則顯示預覽。
- 拖曳把手：調整區塊在頁面中的上下順序。
- 區塊名稱：點名稱可以重新命名，方便辨識相似區塊。
- 鉛筆：開啟區塊內容與排版設定。
- 複製：複製整個區塊，可貼到同一頁或其他頁面。
- 眼睛：暫時隱藏區塊，不會刪除內容。
- 垃圾桶：從頁面移除區塊。
重要：編輯視窗中的「套用預覽」只會更新目前預覽。要讓訪客看見變更，仍要回到頁面編輯器右上角按「儲存」。
如何新增與編輯區塊#
- 進入「頁面編輯器」，選擇要修改的頁面。
- 在左側按「新增區塊」。
- 從基本內容、媒體、版面、進階功能與動態列表中挑選區塊。也可以在搜尋欄輸入名稱。
- 點選區塊後，填入內容與設定，再按「套用預覽」。
- 回到左側調整順序，並在右側預覽確認桌機與手機版面。
- 完成後按右上角「儲存」，再開啟前台頁面確認結果。
新增區塊視窗中的「AI 生成」目前標示為規劃中。現階段請使用「單一區塊」逐一新增，不要把 AI 生成當成已開放功能。
22 個區塊怎麼選#
| 分類 | 包含區塊 | 適合用途 |
|---|---|---|
| 基本內容 | 標題、純文字段落、按鈕、行動呼籲 | 建立清楚的資訊層級與下一步 |
| 媒體 | 圖片、多圖圖庫、圖片輪播 | 展示單張圖片、作品集或多張主視覺 |
| 版面 | 主視覺、多欄式、圖文區塊、左圖右文＋數據、圖文清單、團隊介紹、客戶回饋、分隔線、間隔 | 快速組合首頁、品牌、服務與團隊頁 |
| 進階功能 | 預約行事曆、聯絡表單、自訂 HTML | 加入預約、詢問表單或客製程式碼 |
| 動態列表 | 商城商品、課程列表、最新文章 | 自動帶入站內商品、課程與文章 |
基本內容區塊#
標題#
適合：章節開頭、服務名稱或一段內容的主題。可填主標題與副標題，設定文字對齊、顯示寬度、下方內容間距及進場動畫。
同一頁的標題層級要有一致邏輯。主視覺已經放頁面主標時，後續區段用較精簡的章節標題即可，不要每一段都寫成同樣強度的大標題。
純文字段落#
適合：品牌介紹、服務說明及補充內容。主要欄位是內文，也能調整文字欄寬、下方間距與進場動畫。
長段落建議縮窄文字欄寬，提高閱讀性。若內容同時需要圖片、數據或按鈕，改用對應的圖文區塊，會比在純文字段落堆入太多元素更容易維護。
按鈕#
適合：導向聯絡頁、商品頁、預約頁或外部連結。可設定按鈕文字與網址，也能調整對齊、實心或外框樣式、新分頁開啟及 nofollow。
按鈕文字要直接描述點擊後的結果，例如「查看課程方案」或「預約諮詢」。連到自己網站的頁面通常不用開新分頁；連到外部系統時，再依使用流程決定是否開新分頁。
行動呼籲#
適合：頁面中段或結尾的重要轉換區。可放標題、說明及按鈕文字與網址，並設定背景色或背景圖、遮罩顏色與濃度、文字色、顯示寬度及圖片比例。
使用背景圖時要檢查文字對比。圖片較亮或細節較多時，提高遮罩濃度；如果區塊只要一個簡單連結，使用「按鈕」會比完整行動呼籲更合適。
媒體區塊#
圖片#
適合：單張作品、場景照、產品圖或流程示意。選好圖片後，可加入圖說與連結，並調整顯示寬度、圖片比例、下方間距及進場動畫。
同一區段的圖片盡量使用一致比例。只有圖片確實要帶訪客前往另一頁時才設定連結，並在上傳前確認圖片清楚，檔案大小合理。
多圖圖庫#
適合：作品集、活動照片、空間展示或同系列商品圖片。可以分別設定桌機與手機每列張數、圖片比例，以及是否啟用點圖放大的燈箱。
上傳多張圖片後，可以調整圖片順序。作品細節需要放大查看時開啟燈箱；若每張圖都要帶到不同頁面，應改用可設定卡片連結的「多欄式」。
圖片輪播#
適合：首頁多張活動主圖、檔期 Banner 或焦點內容。輪播可放 1 至 8 張投影片，每張能分別上傳桌機圖與手機圖，也能設定連結。
你可以開啟自動播放，設定 3、5 或 8 秒切換，並選擇高度、圓角、左右箭頭與圓點樣式。手機圖不是必填，但橫幅桌機圖在手機上容易被裁切，重要活動建議另做直向或窄版手機圖。
版面區塊#
主視覺#
適合：首頁或重要落地頁的第一個畫面。可設定背景圖、大標題、說明文字、遮罩樣式與濃度、文字顏色、下方間距及進場動畫。
大標題應直接說明這一頁提供什麼。背景圖要保留文字安全區，並在桌機與手機預覽檢查裁切位置；文字不清楚時，優先調整遮罩，不要只靠陰影補救。
多欄式#
適合：服務項目、方案特色、產品分類或系列入口。可設定區塊標題、桌機 2 至 5 欄、手機 1 至 2 欄、圖片比例、卡片對齊、連結樣式及版頭按鈕。
每張卡片可放圖片、標題、內容與連結。卡片文字長度盡量接近，版面會比較整齊；手機版優先考慮閱讀順序，不要為了縮短頁面而硬塞成兩欄。
圖文區塊#
適合：品牌故事、單一服務介紹、產品特色或人物內容。可放圖片、標題、說明與按鈕，並選擇版面樣式、圖片位置、文字對齊及圖片比例。
想讓圖片成為背景感較強的視覺，可使用透明滿版版型；要讓文字更集中易讀，可選白卡版型。連續使用多個圖文區塊時，可以交錯圖片位置，建立閱讀節奏。
左圖右文＋數據#
適合：用實際成果支持品牌或服務介紹。除了圖片、標題、說明與按鈕，還能填入 3 組數字及其說明，並設定圖片比例與垂直對齊。
數據要使用可確認，可解釋的內容，例如服務年資、完成專案數或實際統計。不要為了填滿三欄放入無法查證的數字；若只有一項重點成果，改用一般圖文區塊會更自然。
圖文清單#
適合：服務流程、特色條列、適用對象或合作方式。區塊由一張主圖、主標題與多個清單項目組成，也能調整圖片比例、垂直對齊、顯示寬度及間距。
每個清單項目只說一件事，開頭用一致句型。若每一項都需要獨立圖片、長說明或連結，改用「多欄式」會更清楚。
團隊介紹#
適合：公司團隊、講師、顧問或服務人員介紹。可設定區塊標題、卡片排版、桌機欄數與圖片比例，再逐一加入成員資料。
成員照片建議統一尺寸、背景與裁切比例。職稱與簡介要使用一致格式；若只有一位人物且需要較完整故事，改用「圖文區塊」通常更合適。
客戶回饋#
適合：在首頁、服務頁或銷售頁帶入已建立的客戶回饋。可設定欄數，每頁顯示 6、9、12 筆或全部，以及顯示寬度與進場動畫。
這個區塊會使用控制中心「回饋」頁面中的資料，不是在區塊內逐筆輸入。若畫面沒有內容，先確認回饋資料已建立，再檢查目前頁面是否完成儲存。
分隔線#
適合：區分兩個內容主題，或在資訊密集的頁面建立清楚段落。可選擇分隔線樣式，並調整上下間距、顯示寬度及進場動畫。
分隔線是視覺分組工具，不要每個區塊之間都放。內容本來就有明確背景色或足夠留白時，通常不需要再加線。
間隔#
適合：微調兩個區塊之間的垂直留白。可直接設定高度，並調整下方間距與進場動畫。
先使用每個區塊內建的下方間距，只有仍需額外留白時才加入間隔。大量使用不同高度的間隔，會讓手機版面難以維持一致。
進階功能區塊#
預約行事曆#
適合：諮詢、課程、服務時段或會議預約。從欄位選擇已建立的預約行事曆，也能決定是否隱藏主辦人資訊，並調整顯示寬度、間距與動畫。
區塊只負責把既有預約行事曆放進頁面。若選單沒有可用項目，請先建立預約服務，設定可預約時段與通知，再回來選取。
聯絡表單#
適合：聯絡我們頁、問卷調查及活動報名。可填表單區塊標題，並選擇已建立的表單，再調整寬度、間距與動畫。
表單欄位、收件通知與送出後訊息要先在表單功能中完成。放進頁面後，請實際送出一筆測試資料，確認畫面成功，後台有紀錄，而且通知寄到正確信箱。
自訂 HTML#
適合：加入經確認的第三方嵌入碼、自訂 HTML、CSS 或 JavaScript。此區塊只有管理員可使用，也能調整顯示寬度、間距與動畫。
- 在左側按「新增區塊」，選擇「自訂 HTML」。
- 貼入已檢查的程式碼，再按「套用預覽」。
- 確認程式碼沒有影響相鄰區塊，並拖曳到需要的位置。
- 按右上角「儲存」，再到前台測試桌機、手機與互動功能。
貼入程式碼前先確認來源可信，並保留原始碼備份。不要把 API 金鑰、後台密碼或其他機密資訊寫進前端程式碼。錯誤的標籤或腳本可能影響整頁顯示；一般文字、圖片、按鈕與版面不要用自訂 HTML 取代原生區塊。
動態列表區塊#
商城商品#
適合：在首頁、分類導覽頁或活動頁自動列出商城商品。可填區塊標題，選擇一個或多個商品分類，設定顯示數量、欄數、排序與分頁，也能加入版頭按鈕及網址。
不選分類時，範圍會較廣。活動頁建議明確選分類，並設定合理數量；商品很多時開啟分頁，商品較少時可關閉分頁，讓頁面更精簡。
課程列表#
適合：課程總覽、主題課程頁或首頁精選課程。可設定欄數，顯示 1 至 24 門課程，並選擇排序方式、排序順序與課程分類。
課程分類可以多選。若要做精選區，減少顯示數量並搭配明確分類；若要做完整課程總覽，再提高數量並確認排序符合上架策略。
最新文章#
適合：首頁文章區、主題文章頁或內容入口。可填區塊標題，設定每頁 3、6、9、12、24 篇或全部，選擇是否分頁，以及最新、熱門或隨機排序。
如果只想顯示特定內容，可填分類 ID 或標籤 ID，多個 ID 用半形逗號分隔。也能設定「查看更多」文字與網址。設定後要在前台確認篩選結果，不要只看篇數。
共用排版設定怎麼調#
- 顯示寬度：控制區塊內容占用的頁面寬度。長文通常不宜滿版，圖片與主視覺則可依設計加寬。
- 下方間距：控制區塊與下一段內容的距離。全頁盡量使用一致規則。
- 圖片比例：決定圖片顯示框形狀。調整後要同時查看桌機與手機裁切。
- 對齊：依內容選擇靠左、置中或其他排列。資訊量較多時，靠左通常較容易閱讀。
- 進場動畫：用於增加載入時的視覺節奏。不要讓每個區塊都使用不同動畫，以免分散注意力。
不是每個區塊都有完全相同的排版欄位。例如「最新文章」著重列表與篩選設定，目前沒有進場動畫欄位；請以該區塊實際顯示的設定為準。
排序、複製、隱藏與版本工具#
重新排序與命名#
拖曳左側把手即可改變區塊順序。頁面中有多個相同類型區塊時，點區塊名稱改成「首頁服務卡片」或「頁尾聯絡 CTA」等容易辨識的名稱，後續維護會更快。
複製與貼上#
按複製圖示後，可把整個區塊貼到同一頁、其他頁面或 Vibe 畫布。適合重複使用品牌介紹、固定聯絡資訊及常用版型。貼上後要重新檢查連結與文案，避免沿用錯誤頁面的內容。
隱藏與刪除#
眼睛圖示會隱藏區塊，但保留設定，適合暫停活動或準備尚未公開的內容。垃圾桶則會移除區塊。若未確定是否還會使用，先隱藏通常較安全。
復原、編輯紀錄及匯入與重設#
- 復原／重做：回到前一步或重新套用剛復原的操作。
- 編輯紀錄：查看頁面的編輯歷史，遇到誤改時可用來確認變更。
- 匯出／匯入：用 JSON 保存或搬移頁面配置。匯入後先檢查預覽，按「儲存」才會正式發佈。
- 捨棄變更：放棄本次尚未儲存的修改。
- 重設設計：恢復配置與樣式設定，但保留原本內容與圖片。執行前仍建議先匯出目前設定。
- 停用頁面：停止使用目前頁面的編輯器版面。這不是暫時隱藏單一區塊，操作前要先確認影響範圍。
常見頁面怎麼組合#
| 頁面 | 建議組合 |
|---|---|
| 首頁 | 主視覺 → 多欄式服務 → 圖文區塊 → 客戶回饋 → 最新文章 → 行動呼籲 |
| 品牌介紹 | 主視覺 → 純文字段落 → 左圖右文＋數據 → 團隊介紹 → 聯絡表單 |
| 服務頁 | 標題 → 圖文清單 → 多欄式方案 → 客戶回饋 → 預約行事曆 |
| 商城入口 | 圖片輪播 → 多欄式分類 → 商城商品 → 行動呼籲 |
| 內容入口 | 標題 → 純文字段落 → 最新文章 → 行動呼籲 |
這些組合是起點，不是固定模板。先決定每一頁要讓訪客理解什麼，接著做什麼，再刪除沒有幫助的區塊。完成後務必在桌機與手機前台實際查看，並測試按鈕、表單、預約與列表篩選是否正確。
常見問題
按了套用預覽，為什麼前台還沒有變更？
「套用預覽」只更新頁面編輯器中的預覽。確認內容與排版後，還要回到右上角按「儲存」，變更才會發佈到網站。
隱藏區塊和刪除區塊有什麼差別？
隱藏會保留區塊內容與設定，只是不在前台顯示；刪除則會把區塊從頁面移除。活動暫停或內容尚未公開時，建議先使用隱藏。
頁面編輯器的區塊可以複製到其他頁面嗎？
可以。按區塊的複製圖示後，可貼到同一頁、其他頁面或 Vibe 畫布。貼上後要重新檢查文案、圖片與連結是否符合新頁面。
為什麼預約行事曆或聯絡表單沒有可選項目？
這兩個區塊會帶入已建立的預約行事曆或表單。請先在預約功能或表單功能中完成內容與通知設定，再回到頁面編輯器選取。
重設設計會刪除原本的文字和圖片嗎？
重設設計會恢復配置與樣式設定，但保留原本內容與圖片。為了方便比對或還原，執行前仍建議先匯出目前頁面設定。
自訂 HTML 區塊為什麼看不到或不能使用？
自訂 HTML 可執行 HTML、CSS 與 JavaScript，基於安全考量只有管理員可使用。一般內容請優先使用頁面編輯器提供的原生區塊。
在頁面編輯器裡也能進行 Vibe Coding 嗎？
可以。新增自訂 HTML 區塊後，即可貼入 AI 生成的 HTML、CSS 或 JavaScript，並把它排在任意兩個原生區塊之間。偏好原本工作流的人，也可以繼續使用 Gutenberg 的自訂 HTML。
AI 生成區塊目前可以使用嗎？
目前新增區塊視窗中的 AI 生成標示為規劃中。現階段請使用「單一區塊」，從 22 個可用區塊中逐一新增與設定。
