使用页面结构Navigator导航您的页面

当页面充满了各种元素时，找到正确的位置可能会变得复杂。通过选择 Structure（结构），您可以打开 Navigator（导航器），它使用导航树面板显示页面的结构。该面板可以让您只需点击一次就能轻松访问画布上的每个元素。您还可以使用 Navigator 通过拖放方式重新排列页面上的元素。

Navigator 特别适用于长页面或具有复杂多层设计的页面，以及包含 Z-Index、负边距、绝对定位等属性的元素。它允许您访问可能被其他元素遮挡的元素控制柄。

访问 Navigator

您可以通过以下三种简单方式之一访问 Navigator：

1. 右键点击任何元素，然后点击 Structure。这将自动在导航树中将您重定向到特定元素。
   
2. 点击顶部栏上的 Structure 图标。
   
3. 使用快捷键 Cmd/Ctrl + I。

选择要编辑的元素

在 Navigator 中，单击任意元素即可立即滚动到其编辑面板。

重新排列元素

拖动任何元素向上或向下，并在其他元素之前或之后释放，以重新排列它们。

右键菜单选项

在 Navigator 中右键点击一个元素，可以启用其所有常规的右键菜单选项，例如 Edit（编辑）、Duplicate（复制）、Copy（拷贝）、Paste（粘贴） 等。

隐藏/显示元素

点击元素的 View 按钮（眼睛图标）可以显示或隐藏该元素，使您能够更专注于设计。

注意：这不会影响您网站的前端显示。

命名元素

双击元素名称，区域将变为蓝色高亮，表示您处于插入/编辑模式。

输入自定义名称，以帮助您在以后更容易地识别该元素。

展开/折叠单个元素

点击单个元素的箭头按钮，可以展开或折叠该元素。

展开/折叠所有元素

在 Navigator 面板的左上角，点击向上或向下的箭头按钮，可以一次性展开或折叠所有元素。

识别具有特殊条件的元素

Navigator 中包含特殊条件的元素，其右侧边缘会标有黑线。

将鼠标悬停在黑线上，可以显示特殊条件。

特殊条件包括：

• Display Conditions（显示条件）
• Motion Effects（动态效果）
• Absolute Positioning（绝对定位）
• Custom CSS（自定义 CSS）

调整 Navigator 面板的位置

浮动

将 Navigator 面板拖动到页面上的任意位置。

停靠

当将 Navigator 面板拖动到屏幕右侧附近时，会出现一个垂直的蓝色投放区域。将面板放入该区域，可以将其固定在屏幕的一侧。

---

通过使用 Navigator（导航器），您可以更轻松地管理和导航复杂的页面结构，提高您的设计效率。