- 登入
- 註冊
頁面編輯器完整總覽
秒站頁面編輯器把頁面選擇、區塊清單、內容設定與前台預覽放在同一個工作區。內建首頁、關於與服務等頁面可以直接修改；需要額外建立活動頁、品牌故事頁或客製頁面時，則新增一張 Vibe 畫布。
先記住一個觀念：Vibe 畫布是一種頁面，不是另一套編輯器。建立 Vibe 畫布後，可以用頁面編輯器組版，也可以用 Gutenberg 直接編輯；Vibe Coding 則能在這兩種工具中使用。
先分清楚三個名詞#
| 名詞 | 它是什麼 | 主要用途 |
|---|---|---|
| Vibe 畫布 | 可獨立發佈與設定網址的頁面 | 活動頁、品牌故事、Landing Page 與客製互動頁 |
| 頁面編輯器 | 秒站的視覺化編輯工具 | 拖曳原生區塊，也能加入自訂 HTML |
| Vibe Coding | 用 AI 協作產出 HTML、CSS 或 JavaScript 的製作方法 | 可貼進頁面編輯器的自訂 HTML，也可貼進 Gutenberg |
Vibe 畫布有三種實務工作流#
頁面編輯器＋原生區塊#
從 22 個現成區塊中挑選標題、圖片、圖文、多欄式、商品、文章、表單與其他內容，再用拖曳調整順序。這是最容易維護的做法，適合大多數品牌頁、服務頁與內容頁。
頁面編輯器＋自訂 HTML#
頁面編輯器本身也有「自訂 HTML」區塊。你可以把 AI 生成的 HTML、CSS 或 JavaScript 貼進去，再與秒站原生區塊混用。自訂 HTML 可以拖到頁面中的任意位置，適合只客製某一段互動區、計算工具或特殊視覺。
Gutenberg＋自訂 HTML#
這是 Vibe 畫布原本的直接編輯方式。進入 WordPress 的 Gutenberg 編輯器後，把整頁程式碼貼進預設的「自訂 HTML」區塊。熟悉舊介面，偏好集中編輯整份程式碼，或已有既存工作流程的使用者，可以繼續使用。
混用時要注意：同一張 Vibe 畫布若同時有 Gutenberg 內容與頁面編輯器區塊，前台會先顯示 Gutenberg 內容，再接頁面編輯器區塊。若要把客製程式碼放在兩個原生區塊中間，請改用頁面編輯器的「自訂 HTML」。
頁面編輯器可以完成哪些工作#
- 切換首頁、文章列表與網站主要內建頁面。
- 新增 Vibe 畫布，或恢復已停用的內建頁面。
- 新增、排序、顯示、隱藏、重新命名、複製與刪除區塊。
- 修改文字、圖片、按鈕、清單、連結與各區塊的專屬內容。
- 使用自訂 HTML 區塊加入 Vibe Coding 成果。
- 切換電腦與手機預覽，完成後按右上角「儲存」發佈。
- 使用復原與重做、編輯歷史與還原設計，以及版面匯出與匯入。
需要更多預覽空間時，可把網站控制台側欄收合成 60 px 圖示列。預覽區支援 1440、1024、768 與 390 px 四種寬度；這些畫面用來快速檢查響應式排版，發佈前仍應另開前台並用實際裝置測試。
先選任務，再看對應教學#
- 第一次進入：開啟頁面編輯器與切換頁面。
- 要建立 Vibe 畫布：新增頁面與 Vibe 畫布。
- 要了解全部原生區塊：頁面編輯器區塊使用教學。
- 要在自訂 HTML 進行 Vibe Coding：Vibe 畫布 AI Coding。
- 要調整比例與圖片：區塊排版與圖片設定。
- 要確認成果：預覽、儲存與前台快捷編輯。
- 要回到先前版面：編輯歷史與還原設計。
延伸閱讀#
常見問題
頁面編輯器可以管理哪些頁面？
可管理首頁，關於，團隊，服務，課程，文章列表，聯絡等內建頁面，也能管理以頁面編輯器建立或接管的 Vibe 畫布。實際頁面清單會依網站方案與啟用狀態顯示。
版面操作都要按儲存嗎？
拖曳排序與顯示切換會自動儲存；開啟區塊設定視窗修改文字、圖片或排版時，則要按視窗內的「儲存」。
Vibe 畫布也能使用頁面編輯器嗎？
可以。從控制台新增 Vibe 畫布時，填好標題與網址代稱後，可選擇頁面編輯器或直接編輯，再進入對應工具。
頁面編輯錯了可以回復嗎？
可以使用復原，重做，編輯歷史或還原設計。各功能處理的範圍不同，執行前請先看本系列的歷史與還原教學。
