Divi 产品亮点：Divi Den Pro – 布局库

Divi Den Pro – Layout Library 是一款第三方插件，具有大量预先设计的 Divi 元素库，可帮助您更快地构建网站。 它包括一个独特的用户界面，可搜索和排序，使布局易于查找。 在本文中，我们将了解 Divi Den Pro – 布局库，以帮助您确定它是否适合您的 Divi 设计工具箱。

安装 Divi Den Pro – 布局库

安装 Divi Den Pro – Layout Library 很简单。 它的工作原理与上传任何插件相同，但您需要登录您的 Divi Marketplace 帐户才能在 Divi 中使用它。 首先，要安装，请转到：

1. 插件
2. 添新
3. 上传插件
4. 选择文件
5. 现在安装

接下来，安装插件后，照常激活它，您将看到一个新菜单添加到您的仪表板。

1. 激活插件

布局库内容

Divi Den Pro – 布局库带有 2615 个库项目。 这包括 1988 个部分和模块、631 个布局、39 个菜单和 18 个完整的网站设计。 所有项目都已预先设置样式。 这些布局针对不同的屏幕尺寸进行了标记、测试和优化。

有几种方法可以在您的 Divi 布局中使用它们。 您将在 Divi Den Pro DM 菜单和 Divi Theme Builder 中找到布局。 Divi Den Pro DM 菜单是使用它们的最简单方法。 您可以按关键字和类别搜索它们，并将它们导入您的 Divi 库。

Divi Den Pro DM 菜单

您会在 WordPress 仪表板中找到一个名为 Divi Den Pro DM 的新菜单项。 该菜单包含许多链接，您还可以在菜单本身中找到这些链接作为选项卡。

布局查找器

第一个选项卡是布局查找器。 这包括一个搜索框，左侧带有过滤器，右侧带有结果。 它还包括选项卡，因此您可以查看所有布局、仅免费布局或仅查看专业布局。 过滤器显示该类型的布局数量。 它们分为布局、部分、模块、类别、集合、Divi Theme Builder 和 Plugin Theme Builder。

结果区域显示布局的缩略图。 如果布局大于容器，缩略图将在悬停时滚动。 您可以在另一个选项卡中查看布局，将布局保存到您的 Divi 库，或将布局作为 JSON 文件下载到您的计算机。

选择一个过滤器会打​​开它以显示选项。 我打开了 Collections，它显示了 Divi Den 中布局的名称。 选择一个会在右侧区域显示该集合中的布局。

我单击查看布局，它在另一个选项卡的 Divi Den 页面上打开了演示。 该页面显示多个布局、部分等。我将鼠标悬停在顶部中心的图像上以显示其悬停效果。

最新的

最新选项卡显示来自 Divi Den 博客的最新帖子。 这是了解布局库中新增功能的好方法。

教程

教程选项卡包括所有教授如何使用 Divi Den Pro – 布局库的教程。 它们包括在您单击教程时显示的嵌入式视频，因此您可以直接从 Divi Den 仪表板学习而无需离开 WordPress。 这有助于提高可用性，因此如果您需要帮助，可以在这里找到。

主题生成器

Theme Builder 选项卡将布局分为 Divi Theme Builder 和 Plugin Theme Builder。 它显示了集合、页面类型等。这些也被添加到 Divi Theme Builder 中。 您还可以从此处启动 Theme Builder。

Plugin Theme Builder 有一个打开 Theme Customizer 的链接。

主题定制器为页面、博客和全局设置添加了三个新的定制器选项卡。 这包括添加的功能，例如弹出式定制器、粘性栏、更多图标、返回顶部按钮、即将推出的页面、模板定制等等。

自定义 CSS 文件

“自定义 CSS 文件”选项卡提供来自 Divi Den 布局的自定义 CSS，您可以复制和修改它们。 单击其中一个会在另一个选项卡中打开 CSS。 嵌入式视频展示了如何使用自定义 CSS。

先进的

高级选项卡包括白标签选项卡和更多选项选项卡。 White Label 可让您重新命名插件以匹配您的品牌。

更多选项选项卡可让您在 Divi Builder 元素中移动 Divi Den Pro 选项卡。 这是默认启用的。

Divi Builder 中的 Divi Den Pro 布局库

Divi Den Pro 的选项卡 - 布局库已添加到模块模式。

选择选项卡会打开菜单，您可以在其中选择所需的布局。 布局以 JSON 文件的形式下载，因此如果要使用它们，您需要将它们上传到页面和帖子。

Divi Theme Builder 中的 Divi Den Pro 布局库

Divi Den Pro – Layout Library 界面也被添加到 Divi Theme Builder 屏幕的底部。 它的工作方式与在 WordPress 仪表板中的工作方式相同。

它在主题生成器中的工作方式与在页面和帖子中的工作方式相同。

Divi Den Pro 布局库示例

现在我们已经了解了如何使用 Divi Den Pro – Layout Library 界面，让我们来看几个示例。 我们将看看每种类型的一些。

布局

接下来，我们将看看一些布局。 我会将它们加载到 Divi Theme Builder 中。 一旦您将布局保存到您的 Divi 库中，它们就可以在您的布局中使用。 搜索它们并选择左侧的类别。

商店着陆页 V3 拉格纳

这是 Shop Landing Page V3 Ragnar 的顶部。 它包括一个带有电子邮件 CTA 的英雄部分。 商店部分显示特色产品，并包括一个动画覆盖层，该覆盖层在悬停时以大文本滚动消息。

这是 Shop Landing Page V3 Ragnar 的底部。 超大图像创建商店 CTA 并包含动画按钮。 独特的博客部分在一侧显示的文本后面显示特色图像。

职业页面 V1 蒂娜

这是 Careers Page V1 Tina 的顶部部分。 它包括一个带有重叠标题的主图、带有标注的介绍和两列文本。 接下来是一段以卡片形式显示的未平仓头寸。

这是 Careers Page V1 Tina 的底部。 带有悬停动画的简介提供信息，然后是 CTA 以发送 CV 和公司津贴的一部分。

旧时博客页面

这个例子是旧时代博客页面的顶部。 它包括一个英雄部分，在背景图像上有一条消息和一个带有悬停动画的按钮。 博客部分在左侧显示带有大特色图片的博客文章，在右侧显示带有较小特色图片的博文作为侧边栏。 一条黄线将博客部分与英雄部分分开。 所有的博客卡片都包含倾斜动画。

这是旧时代博客页面的底部。 它还使用黄线进行分隔，包括两个三栏博客部分、一个大电子邮件表单和一个页脚。

菜单页面布局杰米

这是菜单页面布局 Jamie 的顶部。 它包括一个英雄部分，其中带有链接到各种食物菜单类别的图标。 它们包括悬停动画。 随后是一个两列的食物菜单，左侧是图像，右侧是描述。 食物分为几类。

菜单页面布局杰米

这是菜单页面布局 Jamie 的下半部分。 它延续了食物菜单，并包括带有全角地图的联系信息。

Showreel 主页布局

这是 Showreel 主页布局的顶部。 英雄部分包括一个按钮，用于播放嵌入的视频和全屏背景图像上的几个简介。 接下来是一组用于显示信息的选项卡。 带有动画覆盖的大图像链接到服务。

这是 Showreel 主页布局的底部部分。 它延续了大图像，并包括另一部分图像，用于带有倾斜叠加动画的服务。 它还包括样式化的数字计数器、电子邮件表单和页脚。

视觉进度条页面 Freddie

这是 Visual Progress Bar Page Freddie。 它有一个优雅的布局，但我想展示的主要元素是进度条。 这是布局的英雄部分。 菜单位于屏幕底部。 滚动时，菜单会附加到屏幕顶部并显示布局的进度。

此示例中的部分是案例研究。 对于我滚动过去的每个部分，进度条都显示为黄色。 本节的图像包括倾斜效果。

部分

如果您将 Divi Den Pro – 布局库部分保存到您的 Divi 库中，则会将 Divi Den Pro DM 选项卡添加到您的部分模式中。

Greatest Hits 音乐模组 Freddie

Greatest Hits Music Module Freddie 提供了一个带有黑色背景和黄色悬停效果的风格化音频播放器部分。

样式库演示

Styling Gallery Demo 提供了一个有趣的图片库，具有不同的边框形状和一块颜色来分隔图像。

临塘工艺恩典

Styling Gallery Demo 提供了一个步骤列表。 它们水平放置，包括形状图像或颜色，以及悬停效果。

Thunderbolt 产品 Freddie

Thunderbolt Product Freddie 是一个产品部分，一侧显示产品滑块，另一侧显示样式信息。

阿鲁拉时间线恩典

Alula Timeline Grace 创建了一个替代的垂直时间线，一侧是图像，另一侧是信息。

模块

仪表板中的“模块”选项显示按钮。 这是我下载的一些。

我已将下载的所有按钮添加到一个页面中。 每个按钮都包含引人入胜的悬停动画。

在哪里购买 Divi Den Pro 布局库

Divi Den Pro – Layout Library 在 Divi Marketplace 有售，售价 189 美元。 它包括无限制的网站使用、一年的支持和更新以及 30 天退款保证。

结束对 Divi Den Pro 布局库的思考

这就是我们对 Divi Den Pro – 布局库的看法。 这个库中有很多布局。 用户界面很简单。 布局的搜索、排序、导入和下载非常直观。 我发现部分和模块上的链接比仪表板更受限制，一旦布局在库中，就可以通过选择“从库中添加”选项来使用它们。 如果您有兴趣将数千个专业设计的布局添加到您的 Divi 库中，Divi Den Pro – 布局库值得一看。

我们希望听到您的意见。 您是否尝试过 Divi Den Pro – 布局库？ 在评论中让我们知道您的想法。