Divi Builder使用教程

Divi Builder是市场上最好的拖放式页面编辑器之一，这个流行插件允许你在几分钟内创建复杂的响应式布局，而无需编写任何代码。因此，即使你没有任何网站设计经验，也可以使用Divi Builder轻松构建精美的网站，并引入各种富媒体内容，例如图像、文本、视频、表格、地图等等。

在这篇文章中，我们将展示如何使用Divi Builder创建专业的网站布局和页面。

Divi Builder是什么

2018年底，WordPress发布了革命性的5.0版，这是一个重要版本，因为他们启用一个名为古腾堡（Gutenberg）的拖放式区块编辑器，用以取代旧的所见即所得编辑器。那么，既然WordPress已经附带一个编辑器，为什么人们还会购买替代方案呢？

我们确实喜欢古腾堡编辑器的简单性，但如果你尝试过，就会意识到这是一个非常基本的解决方案，存在许多限制，自定义选项也很少。相比之下，Divi的可能性几乎是无限的，可以帮助你创建简单的博客设计、复杂的在线商店、专业的商业网站等所有内容，将页面构建提升到一个全新的水平。

在2015年，Divi Builder作为独立的页面构建解决方案推出，可以与任何WordPress主题搭配使用。而在此之前，这项功能只适用于Elegant Themes发布的Divi主题。

多年来，这款插件一直在不断扩展和完善，Elegant Themes持之以恒地在博客上发布更新，详细介绍错误修复、功能调整和主要新特性。Divi Builder发展的一个例子是视觉编辑器，在早期版本中，自定义布局只能在WordPress编辑器中创建，后来才添加易于使用的拖放式编辑功能，让你可以在网站前端创建页面布局。

视觉编辑器已经成为Divi Builder的中心舞台，但是如果你愿意，仍然可以使用旧编辑器在后端创建布局。这款插件具有一个库系统，允许你保存创建的任何布局，然后，你可以在需要时从库中选择，并调整它们以适合特定的页面。

插件带有超过1000个令人惊叹的预设布局，并且越来越多布局正在通过官方市场和第三方市场发布。这些设计为你提供绝佳的起点，不仅能够大大减少工作量，还能使你的网站看起来更专业、更精美。

Divi Builder的真正卖点是高度可定制，在花时间了解其工作原理后，你会喜欢插件的多功能性。页面上的每个元素都可以调整，无论是样式、模块、行、列，还是任何其他元素。

此外，这款插件也对WooCommerce提供完美支持，Elegant Themes将其称为WooBuilder。使用Divi Builder，你可以为产品页面创建自定义布局，并添加特定的内容模块，并且在线商店的预设布局也可以直接使用。

启动可视化编辑器

在WordPress网站上安装并激活Divi Builder插件之后，你可以在文章、页面、自定义文章类型的编辑页面看到欢迎窗口，之后会要求你选择使用Divi Builder或使用默认编辑器：

作为示例，我们在这里选择使用默认编辑器，然后可以在页面顶部看到使用Divi Builder按钮，也可以从右侧访问一个较小的Divi设置区域，允许你修改内容的宽度：

进入文章或页面编辑器，如果你点击使用Divi Builder按钮，将会看到一条消息，提示这个布局是用Divi建造的：

你需要点击这个按钮才能在网站前端启动Divi Builder，但是请注意，如果你已经在WordPress的个人资料菜单中禁用可视化编辑器，则Divi Builder可能无法正常运行。尽管WordPress用户通常使用Divi Builder作为默认编辑器的替代品，但它仍然可以通过Divi布局块与Gutenberg编辑器协同工作。

Divi布局块可以插入到页面中任何区域，并与普通的WordPress内容块放在一起：

你可以将多个Divi布局块插入到内容中，并在块内创建全新的布局，或从Divi库加载以前保存的布局。如你所见，作为一个出色地补充，Divi Builder并不会接管整个网站，而是在需要时为你提供帮助。

Divi的漂亮布局

当Divi Builder启动时，你会看到三个选项：头开始构建、选择预设布局、克隆现有页面：

如果选择预设布局，Divi将会从官方库中加载并显示所有设计。到目前为止，官方库中一共有超过1600种完整的布局和超过200个布局包，分为13个类别：

如果愿意，你可以简单地搜索预设布局库，也可以查看自己保存的布局和页面。

布局包是一系列布局的集合，包含针对网站多个分区的设计，例如首页、博客文章、关于我们、在线商店等等。预览图下方有两个按钮，点击View Live Demo按钮可以查看实时预览，如果点击Use This Layout按钮，Divi Builder将会导入特定的布局或布局包。

与其他高级页面编辑器一样，Divi Builder可以将布局直接插入文章、页面、自定义文章类型的主要内容区域，如果你将布局导入到博客文章中，除非手动操作，否则页面上会显示侧边栏。不过，删除侧边栏非常简单，大多数高级主题都具有全宽页面设置，以及删除侧边栏的着陆页模板。

导入布局后，你可以开始自定义设计，并且你所做的任何更改都可以随时保存和重复使用。布局也可以分类整理，随着布局库的增长，你会发现这非常有用。

打开WordPress管理后台，你会看到主Divi菜单包含主题生成器（Divi Theme Builder）和Divi库的链接：

主题生成器（Divi Theme Builder）允许你创建带有自定义页眉、正文、页脚、侧边栏的独特模板，你可以为模板分配任何布局，并决定将其显示在网站的哪些区域。例如，你可以为主页和博客创建一个模板，为在线商店创建一个模板，然后为404错误页面创建另一个模板。

你创建的每个布局都会显示在Divi库菜单中，从这里访问/修改所有布局、修改布局类别，并进行导入和导出操作。当你编辑某个布局时，它会显示在一个线框视图中：

这种模式类似于传统编辑器的外观，如果愿意，你也可以切换到前端可视化编辑器，不过，从后端查看布局结构，并进行一些快速更改将会更加方便。

借助Divi Builder的大量预设布局，你可以在几分钟内创建出色的设计。Divi库和毫无疑问，主题生成器系统是Divi Builder的支柱，正是基于这个原因，Divi具有如此丰富的功能，并且能够快速帮助你创建专业的外观设计。

可视化编辑器界面

每个WordPress页面编辑器的运行方式都不同，因此你需要花时间熟悉Divi Builder可视化编辑器的工作原理，其主界面显示在每个页面的底部，当菜单最小化时，只是一个三点按钮：

点击三点按钮将会加载主界面，你可以在页面的左侧、中间和右侧看到许多选项：

左侧有六个按钮，点击带有三个垂直点的按钮，将会加载可视化编辑器的设置菜单，其中包含一个建筑师接口选项，每个选项代表不同的模式：

• 移动模块（悬停模式）：当你将鼠标悬停在页面上时，会显示当前分区的选项
• 打开舱（点击模式）：当你点击页面的特定分区时，才会显示设置选项
• 网格（网格模式）：一次显示所有分区的设置选项

其他按钮用于线框视图、放大/缩小设计，以及桌面视图、平板电脑视图和手机视图，所有这些功能都有助于让你了解页面的构造方式。我们喜欢线框视图，因为它会将所有设计元素剥离，并显示出清晰的页面结构，这在移动和改变事物的定位方式时特别有用。

可视化编辑器界面中间有七个按钮：左侧三个、右侧三个，以及中间一个大×用于关闭菜单。左侧的按钮分别用于加载布局库、将布局保存到Divi库、清除页面布局，右侧的按钮分别用于页面设置、编辑历史和可携带性（便携性）。页面设置菜单允许你更改文章的标题、摘要、特色图像、背景颜色、样式、拆分测试、可见性等等。

允许撤消和重做更改意味着你永远不必担心犯错，你可以随时撤销最近的更改，并返回到之前的最好状态。便携性按钮也很有用，允许你导出和导入页面布局。

在Divi Builder操作界面的最右侧，你会看到搜索按钮、层叠按钮和帮助按钮。Divi允许你搜索布局、设置、文档等内容，点击搜索结果将会立即加载对应的功能：

层叠按钮非常有用，点击之后会列出当前页面的所有分区，允许你直接进行定位、设置和修改：

最后的帮助按钮用于显示一些视频教程，以及页面的键盘快捷方式 —— 可以帮助你加快创建布局的过程，包括撤消、重做、保存布局、更改查看模式、复制模块等操作：

当你第一次使用Divi时，我们建议加载一个预设的布局，这样你就可以随心所欲地进行调整和修改，以便了解所有这一切是如何联系在一起的。

行、列、模块等

页面编辑器的美妙之处在于，你可以使用许多不同类型的内容填充页面的每个部分，包括地图、表格、图像、视频、小部件等等。在一些WordPress页面编辑器中，这些不同的内容类型被称为区块，有些也将其称为元素，对于Divi，它们则被称为模块（Modules）。

Divi Builder中有40多个内容模块，每个模块都包含数十个自定义选项，可以帮助你精细化调整显示的内容。值得注意的是，模块必须放置在行和列内。

如果你使用空白画布进行页面布局，则会看到页面上显示一个带有加号的绿色按钮，将鼠标悬停在上面，将会出现一个添加新行的选项。显示在行周围的蓝色轮廓称为分区（Section），你可以根据需要向分区中添加任意数量的行和列。换句话说，模块放在列内，列放在行内，行放在分区内。

将鼠标悬停在分区上，会出现用于移动分区、分区设置、复制分区、将分区保存到库、删除分区的按钮，你也会在行和列的左上角看到这些相同的按钮。请务必浏览所有选项，它们会让你更好地了解如何控制内容的位置和样式。

如果你点击菜单末尾的三个点，则会显示一系列附加设置：

当你在Divi Builder中添加新行时，还需要为新行选择特定的列结构。如果你决定以不同的方式构建内容，则稍后可以轻松更改显示的列数。此外，你还可以在主画布分区中拖放列，直到找到所需的结构。

选择行和列结构后，将出现插入模块窗口，你可以为布局选择合适的内容模块。

选择模块后，将出现设置框。每个内容模块的定制级别非常丰富，允许你定义其设计的各个方面，包括颜色、间距、转场、自定义CSS、位置、效果等。根据所选的不同模块，设置框中的选项将会有所变化。

使用预设布局可以节省大量时间，但是，如果你希望充分利用Divi Builder的优势，并使自己的设计独一无二，则需要探索模块、列、行、分区的各种参数，这使你可以完全控制页面上所有内容的样式和位置。

如果你向页面中添加大量的模块、列、行和分区，某些区域可能会显得有点拥挤。例如，有时候你将鼠标悬停在模块上以加载其设置，可能会出现行和分区的设置，发生这种情况时，我们建议切换到线框视图，以便所有内容都以更清晰的格式呈现。

使用旧版编辑器

Elegant Themes使视觉编辑器成为使用Divi Builder的默认方法，但是如果你愿意，仍然可以直接在WordPress编辑器中创建布局。为此，你需要进入Divi主题选项的高级部分，禁用最新的Divi Builder体验，并启用经典编辑器：

现在，从网站后台修改文章，你会看到一个经典风格的编辑器。界面顶部是保存到库、加载布局、清除布局按钮，可以让你备份、恢复、清除Divi Builder布局，右侧是一个设置菜单，其中包含分割测试和一些样式选项，另外还有用于撤消、重做、查看历史记录的按钮。

新的行和列可以轻松插入到页面中，你还可以添加全宽分区，以及一列跨越多行的特殊分区。

由于旧版编辑器直接显示在WordPress编辑器中，因此你无法实时预览布局更改，但是，这意味着有更多空间来创建布局和添加模块。在构建页面时，我们更喜欢这种设置，操作起来比视觉编辑器更悠闲。

经典编辑器仍然是创建自定义布局的有效方式，对于某些Divi资深用户来说，这也是他们最喜欢的方式。一旦你了解背后的工作原理，就能很快创建出新的布局，并且在创作时不会受到其他东西的干扰。

Divi Builder插件设置

大多数自定义设置都可以在Divi Builder界面中找到，另一些选项在Divi管理菜单中。除了主题生成器和Divi库，你还会看到主题选项、主题定制、角色编辑器和支持中心菜单。主题选项页面中包含多个选项卡：一般、导航、生成器、布局、广告、SEO、集成和更新，你需要输入Elegant Themes用户名和API密钥才能接收Divi的自动更新。

要想使用谷歌地图内容块，你需要在一般选项卡中输入Google API密钥，也可以在这里禁用谷歌字体。

角色编辑器允许你指定不同角色的操作权限，定义他们是否可以访问主题选项、主题生成器、Divi库等等。例如，你可以允许贡献者在撰写文章时访问Divi Builder和Divi库，但限制他们访问插件选项页面。

价格

Elegant Themes拥有WordPress世界中最简单、最公平的定价政策，你可以按年或一次性购买会员资格，这两个计划都允许你访问所有的Elegant Themes产品，并且可以在任意数量的网站上使用。

所有许可证都提供30天无条件退款保证，你可以随时取消会员资格。Divi Builder只是Elegant Themes会员套餐的一部分，除此之外，你还可以访问广受欢迎的Divi多用途主题、精美的Extra杂志主题、电子邮件营销和潜在客户转化插件Bloom，以及社交媒体分享插件Monarch。

这家公司以优秀的客户支持著称，庞大的文档社区为他们的所有产品提供深入的书面和视频教程。此外，如果你仍然不确定某些事情，还可以通过信使支持频道寻求帮助。

总结

Divi Builder仍然是市场上最好的拖放式页面构建解决方案之一，在功能、可用性、高级设置之间取得完美平衡，包含数千种高质量专业布局更是锦上添花。

我想要...

• 在家里赚钱
• 在网上赚钱
• 在网上卖东西
• 成为一名自由职业者

---