> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 用图层面板管理页面结构

> 用 Layers 图层面板以树形结构查看落地页的区段、容器和元素，快速选中元素、在同一父级内重新排序，并用底部树形导航选择父级容器。

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

## 在哪里找到

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. 快速跳转组件

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.