🚪 入口

在編輯器左側工具列，點擊圖層樹 icon 展開面板，查看當前頁面的結構。

👆 快速拖曳

點按住圖層樹內元件不放，可以把元件拖曳到支援放入的位置。

例如：把黃底的巢狀 Row，拖到白底的 Section2 和棕底的 Section3 之間，讓它變成一個全新的 Section。

👍
Best Practice：
若無巢狀排版的特殊需求，建議盡量讓頁面結構保持簡潔的單層設計，例如：

Section > Row > Column > 基本元件（如：Title、Button、Image）

Section > 複合式元件（如 Product list、Category list、IG gallery）

這樣可以有效避免元件放在過於深層的位置，降低後續發生拖曳不順暢的問題的機率。
推薦結構
巢狀結構

✏️ 自由命名

雙擊圖層樹裡的元件名稱或點開更多操作選單，可重新命名元件，方便快速識別重要設計。

例如：把「Row 3」變成「CTA 橫幅」、把「Category list」變成「運動系列分類」。

❗️
注意事項：

Section 元件的命名因為和Anchor link 錨點連結功能相關，有特殊規範：僅限輸入半形英數字、連字號 (-)、底線 (_)，且不得重複

其他元件類型可以使用中文、日文、空格、特殊符號等字元命名，也可以重複

🛠 其他操作

在圖層樹，還可以複製、刪除、顯示或隱藏元件。

例如：

複製現有的 Product list
刪除新複製出來的 Product list
在當前 device view 隱藏或顯示 Product list

❗️
注意事項：

針對 Product list、Category list、IG gallery 這三種複合式元件，如果想設定底下子元件在某種裝置類別隱藏或顯示，必須到母元件的右側面板 [設定] tab 底下，找到 [顯示設定] 的 checkbox 進行控制（例如：「是否顯示商品品牌」、「是否顯示分類按鈕」、「是否顯示載入更多按鈕」），不支援從圖層樹個別指定隱藏或顯示

針對 Product list、IG gallery 這兩種複合式元件，如果想移除特定某一格的內容，必須到母元件面板 [設定] tab 底下控制列表總格數或塞進格子的內容，不支援從圖層樹個別刪除