Divi Builder评论：现代WordPress页面构建器

Divi Builder 理所当然地被认为是市场上最好的拖放页面构建器之一。 这个流行的 WordPress 插件允许您在几分钟内创建复杂的响应式网站布局，而无需使用任何代码。

因此，即使您没有设计网站的经验，您也可以使用 Divi Builder 构建精美的网站，并将富媒体引入您的内容，例如图像、时尚文本、视频、表格、表格等。

在本文中，我想向您展示如何使用 Divi Builder 创建专业的网站布局和页面。

这将使您更好地理解为什么这么多网站所有者使用这个 WordPress 插件。

Divi Builder 提供什么？

2018 年底，WordPress 发布了其软件的 5.0 版。 这是一个重要的版本，因为它用名为 Gutenberg 的新拖放块编辑器取代了旧的 WYSIWYG（所见即所得）编辑器。

既然 WordPress 附带了拖放页面构建器，您可能想知道为什么有人想购买替代页面构建解决方案，例如 Divi Builder。

我确实喜欢新的 WordPress 块编辑器的简单性，但是如果你使用过它，你会发现它是一个基本的解决方案，有很多限制和很少的自定义选项。

相比之下，Divi 的可能性是无限的。 它可用于创建从简单的博客设计到复杂的在线商店和公司网站的所有内容。 它确实将页面构建提升到了一个全新的水平。

Divi Builder 于 2015 年推出，作为一个独立的页面构建解决方案，适用于任何 WordPress 主题。 以前，此功能只能在 Divi WordPress 主题中使用，该主题由 Elegant Themes 两年前发布。

多年来，该插件一直在不断扩展和完善。 优雅主题不断在他们的博客上发布更新，详细介绍错误修复、调整和主要新功能。

Divi Builder 发展的一个很好的例子是视觉生成器。 在早期版本的 Divi Builder 中，自定义布局是在 WordPress 编辑器中创建的。 后来添加了一个用户友好的“Visual Builder”，以帮助您在网站的前端创建布局。

可视化构建器已成为 Divi Builder 的主要用户界面的中心舞台，但是如果您愿意，您仍然可以使用旧版构建器在后端创建布局（稍后会详细介绍）。

Divi Builder 有一个库系统，可让您保存您创建的任何布局。 然后，您可以在需要时从库中加载布局并调整它们以适合您正在使用的页面。

该插件带有 1,000 多个令人惊叹的预制布局，更多内容正在通过官方 Divi Marketplace 和第三方市场发布。

这些设计为您自己的自定义布局和网站设计提供了绝佳的起点。 我是它们的忠实粉丝，因为它们大大减少了您创建独特布局所需的时间。

Divi Builder 的真正卖点是定制。

在花一些时间了解 Divi Builder 的工作原理后，您开始欣赏该插件的多功能性。 页面上的每个元素都可以调整，无论是样式、模块、行、列还是其他任何元素。

简而言之，如果它在页面上，您可以更改它。

Divi Builder 对 WooCommerce 有很大的支持； 优雅的主题将此集成称为“WooBuilder”。

使用 Divi Builder，您可以为产品页面创建自定义布局并添加 WooCommerce 特定的内容模块。 在线商店的预制布局也可用。

让我们仔细看看 Divi Builder 的工作原理……

启动可视化构建器

在您的网站上激活 Divi Builder WordPress 插件后，您将在帖子、页面和自定义帖子类型的顶部看到“使用 Divi Builder”按钮。

还可以从 WordPress 编辑器访问一个小的设置区域，该编辑器允许您修改内容的宽度。

如果您进入博客文章或页面并单击 Divi Builder 按钮，您将看到一条消息，指出“此布局是使用 Divi 构建的”。

您需要单击此按钮以在您网站的前端启动 Divi Builder。

但是请注意，如果您在 WordPress 个人资料屏幕中禁用可视化编辑器设置，Divi Builder 将无法工作。

如果您要创建全新的博客文章或页面，您可以选择使用 Divi Builder 或默认的 WordPress 编辑器。

或者，您可以直接从您网站的前端，从 WordPress 管理栏启动 Divi Builder。 如果您已登录，“启用 Visual Builder”链接将显示在您的网站上。

尽管 Divi Builder 通常被 WordPress 用户用作默认 WordPress 编辑器的替代品，但它可以与使用 Divi Layout Block 的 Gutenberg 编辑器协调工作。

Divi 布局块可以插入页面的任何区域，并放置在常规 WordPress 编辑器块旁边。

可以将多个 Divi 布局块插入到您的内容中。 您可以在块内创建全新的布局或从 Divi 库加载以前保存的布局。

正如您所看到的，Divi Builder 通过不接管您的整个网站来很好地补充 WordPress。 您只需要在需要时使用 Divi Builder。

Divi 的精美布局

当 Divi Builder 启动时，您会看到三个选项。

您可以选择从头开始创建新布局、选择预制布局或克隆现有页面。

如果您选择预制布局，Divi 库将加载并显示所有预制设计。 如果您意外关闭它，请不要担心，因为它可以随时从 Divi Builder 主菜单加载。

在撰写本文时，有超过 1,100 个可用布局和 149 个布局包。 设计分为 13 个类别：艺术与设计、商业、社区与非营利、教育、活动、时尚与美容、食品与饮料、健康与健身、生活方式、在线商店、服务、简单和技术。

如果您愿意，您可以简单地搜索预制的布局库。 您还可以从此区域查看已保存的布局和现有页面。

布局包是一组布局，其中包含针对您网站的多个区域的设计。 例如，它可以包括主页布局、博客布局、关于页面布局和商店布局。

单击演示按钮将加载设计的实时预览。 您可以在 Divi 布局包页面中查看所有布局的演示。

如果您单击“使用此布局”，Divi Builder 将开始导入相关布局或布局包。

与所有 WordPress 页面构建解决方案一样，Divi Builder 将布局直接插入帖子、页面和自定义帖子类型的主要内容区域。

因此，如果您将布局导入到博客文章中，除非您手动删除它，否则将显示一个侧边栏。 在页面上，此过程更加简单，因为大多数 WordPress 主题都具有全角页面模板或删除侧边栏的登录页面模板。

导入布局后，您可以开始自定义设计以使其成为您自己的设计。 您所做的任何更改都可以随时保存和重复使用。

布局也可以分类，随着布局库的增长，您会发现这很有用。

主 Divi 管理菜单具有指向 Divi 主题生成器和 Divi 库的链接。

Divi Theme Builder 允许您创建具有已定义页眉、正文和页脚的独特页面模板。

您可以为模板分配任何布局，并准确定义应显示网站的哪些区域。

例如，您可以为您的主页和博客创建一个模板，为您的在线商店创建一个模板，为 404 错误页面创建一个模板，为您发布的一系列博客文章创建另一个模板。

您保存的每个布局都将显示在 Divi 库主页面中。

在此区域中，您可以访问所有布局、修改布局类别以及导入和导出布局。

当您选择从主布局页面编辑布局时，您的布局将显示在“线框视图”中。

此模式类似于旧版构建器的外观。 如果您愿意，您可以切换回前端可视化构建器，但您会发现这是查看布局结构并进行一些快速更改的好方法。

Divi Builder 的大量预制布局将帮助您在几分钟内创建出色的设计。 它们是您自己的自定义布局的一个很好的起点，通过浏览可用的布局，您可以了解有关 Divi Builder 工作原理的更多信息。

毫无疑问，Divi Library 和 Divi Theme Builder 模板系统是 Divi Builder 的支柱，也是 Divi 如此多才多艺以及可以如此快速地创建专业设计的原因之一。 这是替代解决方案（例如默认的 WordPress 块编辑器）中仍然缺少的功能。

可视化构建器界面

每个 WordPress 页面构建器的工作方式都不同，因此您需要花时间熟悉 Divi Builder 的可视化构建器的工作方式。

Divi Builder 的主界面显示在每个页面的底部。 当菜单最小化时，只显示一个带有三个点的按钮。

单击带有三个点的按钮会加载主界面。

您将看到许多选项显示在页面的左侧、中间和右侧。

在左侧，有六个按钮。 带有三个垂直点的按钮会加载可视化构建器设置菜单。

此菜单允许您为悬停模式、单击模式和网格模式的菜单添加三个附加按钮。 当您将鼠标悬停在页面上时，悬停模式将显示页面不同部分的选项，而单击模式则要求您单击页面的特定部分。 网格菜单一次显示所有内容。

这里还有几个其他选项可用于更改默认查看模式和启用/禁用关键功能。

可视化构建器左侧的其他按钮用于线框视图、放大和缩小设计以及在台式机、平板电脑和移动设备中查看页面。

所有这些功能都可以帮助您了解页面的构建方式以及在许多不同情况下的外观。

我是线框视图模式的忠实粉丝，因为它剥离了所有设计元素并显示了页面的结构。 这在移动物体和改变物体的位置时特别有用。

可视化构建器界面中间有七个按钮：左侧三个，右侧三个，中间有一个关闭菜单的大 X。

左侧的第一个按钮加载 Divi 库，第二个按钮将布局保存到您的库中，第三个按钮清除页面布局。

另一方面，您将看到用于页面设置、编辑历史记录和可移植性的按钮。

页面设置框允许您更改页面标题、摘录、特色图像、背景颜色、样式、拆分测试、可见性等等。

能够撤消和重做更改意味着您永远不必担心犯错误。 您可以随时恢复更改并返回到当前布局和全局布局的先前状态。

可移植性按钮也很有用，因为它允许您导出和导入页面布局。

在 Divi Builder 界面的右侧，您将看到一个搜索按钮、帮助按钮和一个保存布局的按钮。

Divi 允许您搜索查看模式、设置、文档等。 单击搜索结果将立即加载该功能。

Divi Builder Helper 框也非常有用。 它显示了几个视频教程并显示了对键盘快捷键的参考。

这些快捷方式可用于加快创建布局的过程。 有用于撤消和重做更改、保存布局、更改查看模式、复制模块等的快捷方式。

优雅的主题有一个关于 Visual Builder 的详细指南，解释了它是如何工作的。

这是一个很棒的参考，但是当你第一次使用 Divi 时，我建议你加载一个预制的布局，这样你就可以把所有的东西都弄乱了。 它将帮助您了解这一切是如何联系在一起的。

行、列、模块等

页面构建器的美妙之处在于您可以使用许多不同类型的内容填充页面的每个部分。 这包括地图、表格、图像、视频、小部件等。

在一些 WordPress 页面构建器中，这些不同的内容类型称为块。 在其他情况下，它们被称为元素。

Divi 称它们为Modules 。

不幸的是，Elegant Themes 的命名有点不一致。 在 Divi Builder 中，它们被称为模块，但在他们的营销材料和文档中，您会看到许多对块而不是模块的引用。

Divi Builder 中有 40 多个内容模块，每个模块都包含数十个自定义选项，可帮助您塑造模块显示的内容。

模块必须放置在列和行内。

如果您使用空白画布开始页面布局，您将看到页面上显示一个带有加号的绿色按钮。

当您将鼠标悬停在此上方时，您将看到添加新行的选项。 显示在行周围的蓝色轮廓称为一个部分。 您可以根据需要向部分添加任意数量的行和列。

换句话说，模块放置在列中，列包含在行中，行放置在节中。

当您将鼠标悬停在该部分上时，您将看到用于移动该部分、访问部分设置、复制该部分、将该部分保存到库以及删除该部分的按钮。

您也会在行和列的左上角看到这些相同的按钮。 请务必探索此处的所有选项，因为它会让您更好地了解如何控制内容的放置位置以及内容的样式。

如果您单击菜单末尾的三个点，则会显示十几个其他设置。

在 Divi Builder 中添加新行时，您还需要为该行选择所需的列结构。

如果您决定以不同的方式组织事物，您可以轻松更改稍后显示的列数。 您还可以在主画布区域中拖放列，直到找到所需的结构。

选择行列结构后，将出现“插入模块”框，您可以为布局选择内容模块。

选择模块后，将出现其设置框。

每个内容模块可用的定制级别是惊人的。 您可以定义其设计的各个方面，包括颜色、间距、过渡、自定义 CSS、位置、效果等。

设置框中显示的选项将根据所选模块而变化。

预制布局可以节省您的时间，但如果您想充分利用 Divi Builder 并使您的布局独一无二，您将需要探索模块、列、行和部分的设置框。 这使您可以完全控制页面上所有内容的样式和位置。

如果您在页面中添加大量模块、列、行和部分，页面的某些区域可能会感觉有点拥挤。 例如，有时您将鼠标悬停在模块上以加载其设置，并且还会显示行和部分的设置。

发生这种情况时，我建议切换到线框视图，因为所有内容都以更清晰的格式显示。

很难准确展示 Divi Builder 使用文本和图像的灵活性。

因此，我鼓励您花一些时间在官方 Divi 演示页面上，亲自看看这个 WordPress 插件可以做什么。

使用旧版生成器

优雅的主题使可视化构建器成为使用 Divi Builder 的默认方法，但是如果您愿意，您仍然可以直接在 WordPress 编辑器中创建布局。

Divi 现在将后端编辑器称为“Legacy Builder”。

为了使用它，您需要进入 Divi Builder 插件选项页面的高级部分，禁用最新的 Divi Builder 体验，并启用经典编辑器。

旧版构建器上方是恢复到标准 WordPress 编辑器并在前端构建的按钮。

那些使用 Divi 多年的人会熟悉下面显示的旧版生成器。 新用户会注意到它看起来类似于可视化构建器的线框视图模式。

界面顶部是一个导入和导出选项，可让您备份和恢复 Divi Builder 布局。 旁边是一个设置菜单，其中包含拆分测试以及许多样式选项和 CSS 设置。

下面是保存到库、从库加载和清除布局的链接。 另一方面，您会找到撤消更改、重做更改和查看更改历史记录的按钮。

新的行和列可以很容易地插入到您的页面中。

您还可以添加全角部分和列跨多行的特殊部分。

由于旧版构建器直接显示在 WordPress 编辑器中，因此您无法实时预览对布局的更改，但这意味着有更多空间来创建布局和添加模块。

在构建页面时，我更喜欢这种设置，因为它比视觉构建器感觉不那么局促。

旧版构建器仍然是创建自定义布局的有效方式，因为您可以使用拖放功能移动页面的任何部分。

对于一些 Divi 用户来说，这仍然是他们创建内容和样式页面的首选方式。 我可以理解为什么许多人仍然使用这种模式，因为一旦你了解了它的工作原理，创建新的布局会很快并且不会让人分心。

Divi Builder 插件设置

绝大多数自定义设置都可以在 Divi Builder 主界面中找到，但一些附加设置可以在 Divi 主管理菜单中找到。

除了 Divi 主题生成器和 Divi 库之外，您还将看到主要的 Divi Builder 插件选项页面、角色编辑器和支持中心。

插件选项页面分为四个部分：更新、API 设置、帖子类型集成和高级。

您需要输入您的优雅主题用户名和 API 密钥才能接收 Divi Builder 的自动更新。

要使用 Google 地图内容块，您需要在 API 设置部分输入您的 Google API 密钥。 也可以从此部分禁用 Google 字体。

Divi Builder 允许您准确选择使用页面构建器的帖子类型。 例如，您可以在您的画廊帖子类型上禁用 Divi Builder。

在高级部分可以找到许多其他设置，例如 Javascript 和 CSS 缩小以及禁用 Divi Builder 产品导览。

如前所述，这也是您启用旧版构建器界面并将 WordPress 块编辑器 (Gutenberg) 替换为经典编辑器的地方。

Divi 角色编辑器允许您准确指定不同的用户角色可以做什么和不能做什么。

您可以定义用户是否可以访问选项页面、主题生成器、Divi Builder 主界面、布局库等。

例如，您可以允许贡献者在撰写博客文章时访问 Divi Builder 和布局，但限制他们访问插件选项页面。

Divi 管理菜单的最后一页是“Divi Builder 帮助和支持中心”。

系统报告显示在页面顶部，突出显示您是否为 Divi Builder 进行了正确的托管设置。 如果您在使用 Divi 时遇到问题，我建议您参考此页面。 例如，由于资源有限，布局导入可能会停止。

由于我在我的测试 WordPress 网站中激活了 Divi Builder，我收到了一些关于我的托管设置不是最佳的警告。

这里还有一些选项可以远程访问优雅的主题并直接与支持人员聊天。

此页面也链接了各种 Divi Builder 教程。

除了书面教程外，还有视频教程可帮助您入门、使用预制布局和使用 Divi 库。

支持页面还有一个安全模式选项和WP_DEBUG_LOG生成的错误列表。

Divi Builder 是一个用户友好的解决方案，但如果您是该插件的新手，我建议您在弄乱 Divi Builder 界面后阅读一些提供的教程。 它将让您很好地了解 Divi Builder 可以做什么，并向您展示您可能错过的一些很酷的功能和技巧。

Divi Builder的成本是多少？

优雅主题拥有 WordPress 世界中最简单、最公平的定价政策之一。

您可以按年或一次性付费购买优雅主题会员资格。 这两个计划都允许您访问所有优雅主题产品，并允许您在任意数量的网站上使用它们。

购买年度许可证每年需要 89 美元，购买终身访问许可证需要 249 美元。

如果您选择年度许可，您可以在许可到期后继续使用优雅主题产品。 但是，一旦您的会员资格到期，您将不会收到任何支持或更新。

如果您计划使用 Elegant Themes 产品超过两年，终身访问许可证是有意义的。

所有许可证都提供 30 天无条件退款保证，您可以随时取消您的会员资格。

Divi Builder 只是优雅主题会员包的一部分。

会员资格还可以让您访问多功能的 Divi 主题。 如果您是 Divi Builder 的粉丝，这是一个很棒的 WordPress 主题，因为页面构建功能直接内置在主题中。

优雅主题会员资格还包括美丽的杂志 WordPress 主题 Extra — 由 Divi Builder 提供支持的设计。

会员资格还包括电子邮件营销和潜在客户生成 WordPress 插件 Bloom 和社交媒体共享 WordPress 插件 Monarch。

优雅的主题拥有 WordPress 世界中最好的支持领域之一。 他们庞大的文档区域为他们的所有产品提供了深入的书面和视频教程，但如果您仍然不确定某些事情，您可以打开支持票寻求帮助。

最后的想法

我希望你们都喜欢 Divi Builder 的详细介绍。

这个 WordPress 插件仍然是市场上最好的拖放页面构建解决方案之一，在可用性、功能和高级设置之间取得了很好的平衡。 包含数千种高质量的专业布局是锦上添花。

优雅的主题会员资格也继续提供物超所值的服务。 因此，那些想要使用 Divi Builder 的人将可以访问四个更高级的 WordPress 主题和插件。

如果您想查看 Divi Builder 的实际效果，请查看 Divi Builder 预览区域和优雅主题演示页面。

谢谢阅读。

凯文