想知道如何在Beaver Builder中建立更快的布局？如果您已经使用WordPress构建了一段时间，那么您可能会花费大量时间来弄清楚如何使用行和列构建复杂布局。它有效 - 但并不总是是最灵活或最有效的方法。

这就是为什么Beaver Builder 2.9对我来说是这样改变游戏规则的原因。此更新引入了两个重大改进，这些改进已经完全改变了我的构建页面，我认为您会喜欢它带给您的工作流程的灵活性：

• 容器模块（例如框模块和循环模块）现在可以用作顶级布局元素- 这意味着您可以在不需要时完全跳过行和列。
• 现在，基本模块默认情况下输出清洁器HTML ，删除额外的包装器<div> s，并使您的页面加载速度更快，并且在搜索引擎中的排名更好。

这些不仅仅是具有良好的功能 - 它们代表着朝着更直观，性能驱动的构建WordPress站点的方式转变。如果您想改善工作流程，页面速度和代码质量，那么此更新绝对值得探索。

容器占据中心舞台

让我们先谈谈最大的变化。在先前版本的Beaver Builder中，行柱系统是构建布局的唯一选择。页面上的每个元素都必须在此框架内生活。

想象此常见场景：您想创建一个带有标题，一些文本和一个按钮的简单呼唤部分。在旧方法中，您要创建一行，向该行添加列，然后在列中添加模块。它起作用了，但是增加了您并不需要的结构层。

这是这样的外观：

排
└ - 列
└ - 框模块
└ - 线模块
└ - 文本模块
└──按钮模块

现在，在Beaver Builder 2.9中，您可以完全消除这些额外的层。现在，像框模块这样的容器模块可以用作您的主要布局元素，就位于页面结构的顶层。

新的流线方法看起来像这样：

框模块
└ - 线模块
└ - 文本模块
└──按钮模块

这不仅仅是接口中的点击量很少（尽管也很好）。这是关于构建布局，使您对设计的实际思考。如果您像我一样，当您设想一部分内容时，您会在考虑容器以及其中的内容，而不是关于包裹它的抽象行和列网格。

为什么这种方法有意义

这种变化与现代CSS的运作方式完全吻合，尤其是在Flexbox和CSS网格上。这些技术可让您创建复杂的布局，而无需复杂的嵌套结构，现在Beaver Builder的界面与现实相匹配。

好处不仅仅是简单性。当您使用容器模块作为主要布局元素时，您会得到：

• 更直接控制间距，对准和响应行为。您可以在容器级别上处理所有内容，而不是跨多个层次的嵌套管理设置。
• 更快的设计迭代速度是因为您花费更少的时间在结构层中导航，而更多的时间专注于实际设计。
• 更好的性能由于浏览器生成和处理的HTML标记较少。
• 当您需要返回并以后修改布局时，更容易维护- 无论您是您或团队中的其他人。

盒子模块：您的布局强国

盒子模块进行了改变游戏规则的升级。曾经是一种简单的实用工具已经演变为在海狸建造者中构建灵活的现代布局的核心基础。这不是一个较小的更新，它是一个完整的重新设计，它将框模块定位在您的页面构建过程的核心：

盒子模块具有新的功能作为顶级布局元素，可以通过管理从背景颜色和图像到填充和边距的所有内容来替换传统的行包装器，而不需要额外的父装容器。

另外，盒子模块完全支持Flexbox属性，可精确控制布局内部子元素的对齐，间距和分布。无论您是要嵌套文本，图像，按钮，表单还是任何其他内容模块，盒子模块都会无缝处理。

这意味着您可以仅使用框模块和实际需要的内容模块创建复杂，响应的布局。不再仅仅因为接口需要它而创建结构元素。

引擎盖下的清洁器html

当您重新考虑如何在Beaver Builder 2.9中构建布局时，建筑商本身正在幕后进行一些清理。此版本的第二个主要更新删除了基本模块中不必要的包装器<div>元素 - 以明显更精细的HTML输出来介绍。

在较早的版本中，诸如实际<div>围绕实际内容的模块，包括标题，图像和按钮。如下所示，这增加了标记中的复杂性和膨胀：

在Beaver Builder 2.9之前：

 <div class="fl-module fl-module-heading"> <div class="fl-module-content"> <h2>Welcome to Our Site</h2> </div> </div>

在海狸建造者2.9之后：

 <h2>Welcome to Our Site</h2>

此更改不仅提供了更清洁的代码，还可以改善现实世界的性能：

• 简化的样式：在包装器类较少的情况下，您可以直接编写CSS，而无需更多战斗的嵌套选择器。
• 加载时间更快：更少的元素意味着浏览器处理的较少。
• 更好的SEO：更清洁，更多的语义HTML可帮助搜索引擎了解您的内容。

如果您是开发人员或代理机构在自定义主题或客户网站上工作，那么您会感谢此更新带来的清晰度和效率。而且，由于更改仅适用于2.9之后添加的模块（或除非启用旧版设置），因此您的现有布局保持安全和兼容。

灵活性而不会破坏事物

现在，如果您在想， “等等 - 我的自定义CSS依靠这些包装班！” -不用担心。 Beaver Builder 2.9的设计考虑到了这一点。为了保持与较旧样式的兼容性，您可以使用单个设置重新启用包装器<div> ：

如何恢复旧版包装器标记：

1. 转到您的WordPress仪表板
2. 导航到设置> Beaver Builder>高级
3. 启用“力模块包装器”

但是，除非绝对必要，我们建议您关闭此功能。清洁标记不仅可以提高性能，还可以反映现代网络开发的最佳实践。如果您确实依靠传统CSS，这可能是一个很好的机会，可以简单地和长期可维护性进行重构。

内置的向后兼容性

Beaver Builder 2.9的最佳部分之一？您将获得所有这些现代改进，而不会破坏现有站点的风险。

这是其工作原理：

• 现有的模块（在更新为2.9之前放置的模块）将继续使用其原始包装结构进行渲染。
• 更新后添加的新模块将自动使用新的清洁器标记。

这种双重渲染策略为您提供了平稳的过渡路径：您当前的布局保持完整，而您的任何新内容都可以从更快，更轻松的结构中产生好处。

这些更改如何改善您的网站性能

Beaver Builder 2.9引入了强大的性能和工作流程改进，可帮助您的网站加载速度更快，排名更高并提供更平滑的用户体验。

更快，更精细的页面
通过减少包装器<div>元素和对容器模块作为顶级元素的支持，您的布局更加干净，更轻 - 换成更快的负载时间和更好的SEO。

更聪明的着陆页
跳过不必要的行和列的混乱。现在，您可以使用只有容器模块（例如英雄部分和CTA的框模块）来构建灵活的，高转化的着陆页。

干净的标题和页脚
盒子模块还可以在标题和页脚中发挥作用，帮助您以更少的精力和更多的控制来创建结构化的，响应的布局。

对开发人员友好的标记
告别过度筑巢。简化的HTML输出简化了CSS的定位并减少了特异性问题，从而使自定义开发更加容易，更可维护。

赢得客户的性能
对于代理商而言，好处很明显：更快的站点，清洁剂代码和更现代的构建过程。即使您的客户不会说“开发人员”，他们也会注意到性能和抛光的差异。

构建布局的更聪明的方法

Beaver Builder 2.9不仅仅是另一个功能更新，这是我们如何接近布局构建的深思熟虑的一步。通过将容器模块作为灵活的布局基础引入，并简化了HTML输出，该版本将Beaver Builder与现代设计和开发实践一致。

结果？更快，更清洁，更直观的工作流程可节省您的时间并提供表现更好的页面。无论您是制作简单的小册子网站还是管理复杂的客户项目，这些增强功能都可以帮助您更轻松地构建和自信。

准备升级您的布局了吗？
更新到Beaver Builder 2.9，并立即开始建立更聪明，精益和更多未来的网站。