如果您曾经发现自己无休止地滚动，发现一个特定的元素埋在您的网页设计深处，那么您并不孤单。幸运的是，Beaver Builder的轮廓面板在这里加快了您的工作流程，并将页面构建混乱变成有组织的效率。

Beaver Builder轮廓面板提供了页面布局的视觉树视图，使其易于浏览，选择和整理行，列和模块，从而使工作流程和提高页面构建效率。

在本文中，您将学习如何利用Beaver Builder的轮廓面板将页面构建时间切成两半，同时维护有组织的WordPress项目。

Beaver Builder大纲面板是什么？

Beaver Builder轮廓面板是一个层次树视图，以有组织的导航格式显示您的整个页面结构。您没有在您的布局上进行视觉狩猎，而是可以看到每个行，列和模块的眼睛视图，而是更快地，更有条理，更有条理且令人沮丧的是：

一目了然的关键好处：

• 立即导航大型布局
• 用拖放简单重组内容
• 在建造时标记和组织元素
• 迅速解决布局问题
• 与团队成员更有效地合作

此功能强大的功能转换了您与布局交互的方式，提供了一个简化的接口，使您完全控制了页面结构。无论您是构建简单的着陆页还是复杂的多剖面网站，轮廓都可以使所有内容都可以井井有条。

这是开发经理杰米（Jamie）在被问到自己喜欢的海狸建造者最喜欢的功能时要说的：

“轮廓面板是如此节省时间。您可以一目了然地看到您的内容结构，使长页变得更加容易导航。这也非常适合故障排除 - 如果模块的设置在主编辑器中不打开，请尝试从轮廓面板中访问它！”

如何访问轮廓面板

方法1：单击大纲图标

1. 在Beaver Builder中打开您的页面
2. 在顶级栏中查找轮廓图标
3. 单击以打开面板

方法2：键盘快捷键（更快）

1. 在Beaver Builder编辑器中打开您的页面
2. 按Shift + O立即打开面板打开/关闭
3. 按Shift + T扩展/折叠所有部分

为什么轮廓面板对海狸建造者用户至关重要

1。轻松浏览大型布局

还记得试图从长页底部拖动一行的挫败感吗？那些日子结束了。大纲面板通过使您可以立即访问页面上的任何元素来消除无尽滚动的需求。只需单击大纲中的任何项目即可直接跳到布局中的该元素，就像为您的页面结构提供GPS。

2。毫不费力地重组内容

通过轮廓面板的拖放功能，在布局周围的内容变得非常简单。您可以快速重新排列行，列和模块，而无需视觉混淆，这些混乱有时会带来主构建器接口中的拖动元素。当您重组现有内容或实验不同的布局安排时，这尤其有价值。

3。保持完美的组织

轮廓面板可帮助您在整个建筑过程中保持井井有条。您可以一目了然地看到页面的完整结构，从而轻松识别可能需要注意或重组的区域。这种鸟的眼光对于保持干净，逻辑的页面结构是无价的。

Beaver Builder 2.9中改变游戏规则的功能

Beaver Builder的最新更新引入了令人兴奋的改进，使轮廓面板更加强大：

增强的搜索和过滤功能

Beaver Builder 2.9介绍了一个搜索功能，我发现该功能是复杂项目的实时节省：

单击放大玻璃图标，然后键入任何元素名称的一部分 - 是“框”，“ loop”还是任何其他模块类型。轮廓面板将立即突出显示匹配的节点，即使在最复杂的布局中，也很容易找到特定元素。

您可以通过：

• 模块名称
• 自定义标签
• 元素ID
• CSS类名称

此搜索功能对于使用自定义类和ID的开发人员和高级用户以及管理大型，内容丰富的页面的任何人都特别有价值。

例如，在优化SEO页面时，这对于快速找到标头标签（H1 -H6）特别有用。

内联标签编辑

版本2.9中最实际的改进之一是能够直接在轮廓面板中添加和编辑节点标签：

屏幕之间不再跳跃来组织您的元素 - 您现在可以在构建时标记元素，创建一个清晰的命名系统，对您的项目有意义。

添加标签内联：

1. 打开轮廓面板
2. 悬停在任何元素上以揭示“键入标签”字段
3. 单击并输入您的自定义标签
4. 按Enter或单击Checkmark以保存

此功能改变了您如何组织布局的方式，从而使您可以创建有意义的名称，例如“英雄部分”，“证明”或“召唤措施”，使您的页面结构立即可以理解。

您还可以通过转到任何行，列或模块的高级选项卡来添加标签。向下滚动到HTML元素部分，然后在标签字段中输入名称。标签提供了元素内容或目的的简短描述：

添加后，标签出现在Beaver Builder接口覆盖，设置窗口和轮廓面板中。

最大化轮廓面板效率的提示

使用键盘快捷键，例如Pro

使用这些必需键盘快捷键加快工作流程：

• Shift + O ：打开/关闭轮廓面板
• Shift + T ：扩展或折叠整个树视图

这些快捷方式使您的手保持在键盘上，工作流程顺利移动。

掌握右键单击菜单

右键单击大纲面板中的任何元素都会显示上下文敏感的选项：

• 行和列：打开设置，重复，删除
• 小组：删除
• 模块：打开设置，重复，删除

此上下文菜单可快速访问常见操作，而无需混乱接口。

利用视觉指示器

大纲面板包括有用的图标指标，可立即了解您的元素：

• 蓝眼睛图标：表示行，列或模块的可见性设置已从默认的“始终”设置更改。
• 红眼图标：将条件逻辑应用于行，列或模块时出现。安装海狸主题时可用此选项。
• 代码图标：显示通过高级选项卡将自定义CSS或JavaScript添加到行，列或模块中。
• 感叹图标：信号表明布局中缺少一个模块。如果模块已被禁用或提供模块已停用或卸载的第三方插件，则可能会发生这种情况。

这些视觉提示可帮助您快速识别具有特殊配置或潜在问题的元素。

与智能标签一起组织

为您的项目开发一致的标签系统。考虑使用指示功能和位置的描述性名称，例如：

• “标题 - 导航”
• “英雄 - 主要CTA”
• “页脚 - 联系信息”

这种系统的方法使协作变得更加容易，并帮助您几个月后彻底清楚地返回项目：

高级轮廓面板技术

战略性扩展/崩溃管理

轮廓面板记得您已经扩展或崩溃的部分。通过保持经常访问的部分扩展，在您目前不在工作的同时扩展了经常访问的部分，以利用这一点。这会创建一个自定义视图，与您当前的焦点匹配。

与其他海狸建造者的功能集成

轮廓面板可与其他海狸建造者功能无缝配合。将其与响应式编辑工具结合使用，以在测试各种设备视图的同时快速在不同部分之间导航。这种组合特别有力，可确保您的布局在所有屏幕尺寸中完美工作。

避免的常见错误

过度复杂您的结构

虽然轮廓面板使复杂的布局易于管理，但可以抵制创建不必要的复杂结构的冲动。旨在实现逻辑，清洁的层次结构，以实现您的内容目标。

忽略标签一致性

不一致的标签打败了组织的目的。在项目的早期建立命名惯​​例，并在整个过程中坚持下去。

忘记移动考虑因素

请记住，您组织精美的桌面布局可能需要对移动设备进行调整。将轮廓面板与Beaver Builder的响应式编辑工具结合使用，以确保您的结构在所有设备上都起作用。

常见问题

如何访问轮廓面板？

单击Beaver Builder工具栏中的大纲图标或按Shift + O即时访问。

我可以在大纲面板中搜索元素吗？

轮廓面板使您可以轻松地在页面布局中搜索元素。单击放大玻璃图标，然后按模块名称，标签，CSS类或元素ID进行搜索。

蓝眼睛的图标是什么意思？

蓝眼睛图标表明元素的可见性设置已从默认的“始终”设置进行了修改。

如何将标签添加到元素中？

要在轮廓面板中添加标签，请在任何行，列或模块上悬停，请单击“键入标签”字段，然后输入您的自定义名称。

为什么我会看到感叹号图标？

Beaver Builder轮廓面板中的感叹图标通常是由于停用的插件或模块冲突而丢失或禁用的模块。

结论：立即改变您的页面构建

Beaver Builder轮廓面板不仅仅是导航工具；这是一个完整的工作流程转换系统。从Beaver Builder 2.9中增强的搜索和标签功能到强大的视觉指示器和组织功能，掌握此面板将使您成为更有效，有效的WordPress页面构建器。

关键要点：

• 使用键盘快捷键（Shift + O）以更快地访问
• 从每个项目的开头实现一致的标签
• 利用视觉指示器来保证
• 与响应式设计工作流程集成
• 使您的常规建筑例程的轮廓部分成为一部分

无论您是构建简单的登陆页面还是复杂的多部分网站，轮廓面板都提供了组织基础，该基础将混乱的页面构建变成简化的专业过程。

准备改变您的海狸建造者体验吗？打开海狸构建器编辑器，按Shift + O启动轮廓面板，并立即开始更有效地构建！