- 登入
- 註冊
頁面編輯器完整總覽
秒站頁面編輯器把頁面選擇、區塊清單、內容設定與前台預覽放在同一個工作區。內建首頁、關於與服務等頁面可以直接修改；需要額外建立活動頁、品牌故事頁或客製頁面時，則新增一張 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 成果。
- 切換電腦與手機預覽，完成後按右上角「儲存」發佈。
- 使用復原與重做、編輯歷史與還原設計，以及版面匯出與匯入。
先選任務，再看對應教學#
- 第一次進入：開啟頁面編輯器與切換頁面。
- 要建立 Vibe 畫布：新增頁面與 Vibe 畫布。
- 要了解全部原生區塊：頁面編輯器區塊使用教學。
- 要在自訂 HTML 進行 Vibe Coding：Vibe 畫布 AI Coding。
- 要調整比例與圖片：區塊排版與圖片設定。
- 要確認成果：預覽、儲存與前台快捷編輯。
- 要回到先前版面：編輯歷史與還原設計。
延伸閱讀#
常見問題
Vibe 畫布和頁面編輯器是兩套不同系統嗎？
不是。Vibe 畫布是一種可以獨立發佈的頁面；頁面編輯器是製作與管理頁面的工具。Vibe 畫布可以用頁面編輯器加入原生區塊，也能使用 WordPress 的 Gutenberg 直接編輯。
Vibe Coding 一定要用 Gutenberg 嗎？
不用。頁面編輯器也提供自訂 HTML 區塊，可以貼入 AI 生成的 HTML、CSS 或 JavaScript，並與原生區塊混用。偏好原有工作流的人，也可以繼續在 Gutenberg 的自訂 HTML 區塊編輯。
頁面編輯器可以管理哪些頁面？
可管理首頁、關於、團隊、服務、課程、文章列表、聯絡等內建頁面，也能管理以頁面編輯器建立或加入區塊的 Vibe 畫布。實際頁面清單會依網站功能與啟用狀態顯示。
同一張 Vibe 畫布可以同時用 Gutenberg 和頁面編輯器嗎？
可以，但顯示順序有固定規則：Gutenberg 內容會先出現，頁面編輯器區塊接在後方。若要把 AI 程式碼放在原生區塊之間，使用頁面編輯器的自訂 HTML 會更容易控制順序。
頁面修改後要怎麼正式發佈？
區塊視窗中的「套用預覽」只更新編輯中的預覽。確認所有內容後，仍要按頁面編輯器右上角的「儲存」，再到前台檢查桌機與手機畫面。
