用图层面板管理页面结构

Layers（图层）面板以清晰的树形视图展示页面的完整结构。
它帮你了解各部分是如何组织的，让选择、管理和重新排列元素变得更轻松。

​

在哪里找到

1. 在编辑器中打开你的页面
2. 点击左侧栏的 Layers icon

​

你会看到什么

• 页面的层级（树形）结构
• 层层嵌套的区段（Section）、容器和元素
• 每一项都对应画布上的一个区块

示例：

• Wrapper
  • Section
    • Container
      • Text
      • Image
      • Button

​

你可以做什么

​

轻松选择元素

点击图层面板中的任意一项，即可在画布上立即选中它。

​

了解结构

查看元素是如何分组的：

• 哪些项位于容器内
• 区段是如何搭建的
• 元素归属于哪里

​

重新排序元素

你可以拖动元素，在同一个父级内重新排序。 例如：

• 在同一个容器内，把按钮移到文本上方
• 重新排列区段内的各项

​

重要限制

你无法在图层面板中把元素移到不同的父级下。

• 你可以在同一个容器内重新排序
• 但不能把元素从一个容器/区段拖到另一个容器/区段中

​

为什么它很有用

• 快速找到隐藏或难以点选的元素
• 保持布局有序
• 轻松修复结构问题
• 在复杂页面上更高效地工作

​

树形导航

Tree Navigation（树形导航，通常以面包屑导航的形式显示在编辑器底部）是可视化编辑器中的一项关键功能，帮你在构成落地页布局的各个嵌套元素之间选择和切换。 这一点很重要，因为现代布局依赖于把元素放在其他容器（如 Section、Box 或 Column）内部。

​

树形导航如何工作

树形导航以一排横向的元素名称显示在编辑器画布底部，展示你当前选中的元素及其所有父级容器，从最外层的元素（如 Section）一直到最具体的元素（如 Text 或 Image）。

​

树形导航的主要用途

​

1. 选择父级容器

当你处理 Horizontal Box 或 Vertical Box 中的元素时，仅靠在画布上点击很难选中容器本身。树形导航让这件事变得很简单。

​

2. 识别嵌套和结构

这条导航路径能立即直观地呈现你的页面结构。

​

3. 快速跳转组件

你可以通过它在嵌套组件之间快速跳转，无需在实时画布上精确点击很小的元素。