動手之前
先把資料備齊，不必再多開分頁。
- 編輯器裡已經開著一個現有專案。
- 桌機或筆電的瀏覽器視窗夠寬，能同時看到畫布和檢視器。
你會學到
- 看懂上方工具列、左側工具列、畫布、檢視器和狀態列。
- 用畫布或圖層穩穩選到要的區塊。
- 知道什麼時候該用預覽、展示、審查、上線和匯出。
- 把編輯器介面風格跟顧客看到的網站主題分開。
01
動手改之前，先看懂上方工具列
上方工具列會告訴你現在是哪個專案、哪一頁，存檔狀態如何；也在這裡切換工作斷點和縮放，審查與交付的按鈕也都在上面。
- 在頁面切換器旁邊確認專案名稱和目前頁面。
- 離開頁面前，先看清楚顯示的是「已存檔」、「儲存中…」還是「有未存檔的變更」。
- 用 Desktop（桌機版）、Tablet（平板版）、Mobile（手機版）切換畫布斷點；用 Fit（自動縮放）讓畫布剛好塞進可用空間。
- 文件的修改用「復原」和「重做」；不要把瀏覽器的上一頁當成編輯器的復原鍵。
做到這樣就算完成： 你知道現在在哪一頁，也會等到顯示已存檔再離開或開始審查。
02
把左側工具列當成任務地圖
工具列上每一項各管一種工作。開對面板，改動才不會出乎意料，交接時說明也好懂。
- 上線指南會告訴你，還有什麼卡著不能安心上線。
- 元件用來加區塊、管理可重複使用的素材；圖層則顯示精確的巢狀結構。
- 頁面負責頁面的名稱、順序、可見度、複製和刪除。
- 主題改的是顧客看到的網站設計系統；模組改的是營運能力；網站則放商家資料和設定。
- AI 助理在設定好之後可以幫你改。把它產出的東西當草稿，一樣在編輯器裡檢查過再用。
做到這樣就算完成： 有人跟你說「改電話」、「把某頁隱藏」或「開啟訂位」，你能直接打開網站、頁面或模組，不必在介面裡到處找。
03
先選中正確的區塊，再動它
一個做得漂亮的區段，通常是一整棵巢狀區塊。你選到誰，檢視器就改誰，所以動內容或版面之前先確認選取標籤。
- 最快的方式是直接在畫布上點你看得到的元素。
- 元素互相疊在一起、或藏得很深時，就開圖層，在那裡按名稱選。
- 用元件搜尋、點擊或拖曳，把新區塊放到目前選取的附近。導覽列會自動放到最上面。
- 放進去之後，先確認選到的是新區塊，再改它的屬性。
做到這樣就算完成： 檢視器上方的標題就是你想改的那個區塊，旁邊的區段也沒有莫名其妙跟著變。
04
檢視器照「內容 → 樣式 → 動作」的順序用
把意思、外觀和行為分開處理，可以少掉很多白做的工，響應式覆寫也比較好想清楚。
- 文案、標籤、圖片、價格和元件自己的資料，都在「內容」裡改。
- 版面、尺寸、間距、字體排版、背景、邊框和特效，都在「樣式」裡改。
- 點擊之後要跳去哪、要觸發什麼生意動作，都在「動作」裡設。
- 如果要改的是頁面層級的中繼資料，而不是某個區塊，就用「頁面」分頁。
做到這樣就算完成： 區塊講的話是對的、在目前斷點看起來也對，每個可以互動的控制項都做出你要的行為。
05
編輯器介面風格，跟網站主題要分開
設定旁邊的介面風格切換器，改的是你工作的環境。換一套編輯器外觀很安全，顧客看到的網站不會跟著變。
- Singular、Ignition 這類編輯器風格，用右上角的介面切換器換。
- 網站的色彩變數、字型和設計預設，到左側工具列的主題裡改。
- 看截圖審色之前，先確認畫面上是編輯器外框，還是顧客真正會看到的畫布。
做到這樣就算完成： 你把編輯器從 Singular 換成 Ignition，顧客看到的網站完全沒變。
06
審查和交付，要按對按鈕
右上角那幾顆按鈕，代表的是刻意分開的不同階段。按錯的話，本來只是內部檢查，可能就變成交件給客戶，甚至改到線上。
- 「預覽」會開啟可以互動的店面和後台，還附裝置切換。
- 「展示」（Demo）給客戶看一個乾淨的畫面，看完還能回來繼續編輯。
- 「審查」（Review）用來交出審查版本，也負責匯入回饋。
- 工作空間有開通雲端發布時，「上線」（Go live）才會啟動發布流程。
- 「匯出」（Export）產生的是可攜帶的檔案，本身不代表網站已經公開部署。
- 不想在介面裡東找西找時，按 ? 看快捷鍵和編輯器說明。
做到這樣就算完成： 你講得出手上這份檔案或網址是哪一顆按鈕做出來的，也說得清它是草稿、審查版、匯出檔，還是正式上線。
最後檢查
這幾項全部成立，才算真的做完。
- 你隨時知道目前是哪一頁、哪個斷點、縮放多少，以及存檔狀態。
- 常見的工作各屬於左側哪一個面板，你都清楚。
- 你會先確認選到哪個區塊，才去動檢視器。
- 網站主題和編輯器介面風格的差別，你分得清楚。
- 預覽、展示、審查、上線、匯出，你各用在不同階段。