如何使用带有 Divi 布局块的全局预设来简化博客文章设计

为您的博客创建内容已经很困难了，而不必担心设计。 这就是为什么让您的网站随时可用（或预先设计）的设计元素很重要，这样您就可以更加专注于创建令人惊叹的内容。 当然，传统的 WordPress 子主题可以解决这个问题，但在大多数情况下，您会遇到不容易改变的设计。

使用 Divi，我们可以更好地控制博客文章的设计体验。 Divi 的全局预设允许您为整个站点的元素创建站点范围的设计（如子主题），并增加了通过点击几下即可调整设计的便利性。 另外，如果您习惯于在默认的 WordPress Block 编辑器中创建内容，您可以利用 Divi Layout Block 的强大功能在帖子内容中动态引入这些全局预设元素。 这将允许您在与模板和网站其余部分匹配的博客文章中添加全新的设计元素。

在本教程中，我们将向您展示如何使用带有 Divi 布局块的全局预设来简化设计博客文章的过程。 为此，我们将向您展示如何使用全局预设快速有效地设计新的博客文章内容。 这将有助于创建不会影响网站整体品牌的博客体验。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

全局预设的快速概览

Divi 的美妙之处在于，它让您可以使用各种设计设置来完全控制网站的设计，您可以使用这些设置来自定义任何元素或模块的外观。

新的 Divi Presets 系统允许您为 Divi 元素（如按钮模块）设计自定义外观并将其保存为预设。 您所做的所有设计更改都保存在预设中。 当您向页面添加新模块时，您可以浏览保存的预设并快速应用它们。

应用预设后，模块的默认设计由预设控制。 如果更新预设的样式，则使用该预设的所有模块也会更新。 这使您可以使用一小部分保存的预设来控制整个网站的设计。 此外，它可以在向页面添加新模块时节省大量时间，因为您无需从头开始设计每个新模块，而是可以从 Divi 预设库中快速选择外观。

全局预设风格指南

可以创建全局预设样式指南（就像我们将在本教程中使用的那样），以在设计网站时快速启动元素设计。 这些样式指南包含一系列模块，这些模块具有与您网站的设计相匹配的不同预设。 在开始时提供预设将简化设计过程，无需为每个新模块更新设计设置。 我们甚至为那些想要构建自己的人提供了一个风格指南框架。

Divi 布局块的快速概览

Divi Layout Block 允许用户在 Gutenberg 编辑器中将任何 Divi 布局添加到博客文章中。 我们甚至可以像任何其他 WordPress 块一样将 Divi 布局块转换为古腾堡中的可重用块。 这为将一些有用的 Divi 布局设计简化为在 Gutenberg 中编写帖子的正常流程打开了大门。

全局预设和布局块如何协同工作

因为全局预设是“全局”的，所以该预设的样式会影响站点范围内的所有预设实例。 这意味着您可以在布局块编辑器中设计元素时使用全局预设，这些预设也会相应更新。 因此，如果您想使用 Divi 布局块将 CTA 添加到您的博客文章内容，您可以通过添加具有全局预设的模块来构建 CTA，就像您添加普通页面或帖子一样。 这使您可以快速有效地在帖子中添加匹配的设计元素。

使用带有 Divi 布局块的全局预设来简化博客文章设计

上传全局预设风格指南

在本教程中，我们将通过使用 Web 代理布局的全局预设样式指南布局来快速开始创建全局预设。 上传样式指南后，我们将有一些全局预设可供使用 Divi 布局块向博客文章添加设计元素时使用。

要下载全局预设，请访问博客文章。 向下滚动到标题为“下载全局预设样式指南”的部分。 然后输入您的电子邮件地址并单击以接收下载。

将 zip 文件下载到计算机后，解压缩文件并返回到 WordPress 仪表板。

要将样式指南 JSON 文件导入 Divi 库...

1. 导航到 Divi > Divi 库。
2. 单击导入和导出按钮。
3. 在可移植性弹出窗口下，选择导入选项卡。
4. 选择 Web 代理全局样式指南 JSON 文件。
5. 确保选择导入预设。
6. 然后点击导入按钮。

现在所有这些全局预设都可以在 Divi Builder 中使用。

上传帖子模板

既然样式指南已经就位，我们将通过导入已经与样式指南元素匹配的网络代理博客文章模板，在博客文章模板的设计上进行跳跃。

要下载模板，请转至博客文章，输入您的电子邮件地址，然后单击下载文件。

要导入帖子模板...

1. 导航到 Divi > Theme Builder。
2. 然后单击便携性图标。
3. 在可移植性模式下，选择导入选项卡。
4. 选择您下载的帖子模板 JSON 文件。
5. 然后点击导入按钮。

使用预设更新/设计帖子模板

设置好自定义帖子模板后，单击以编辑自定义正文模板。 在那里，您还可以看到帖子模板设计，并使用导入的样式指南中提供的全局预设进行调整。 如果您从头开始构建自己的帖子模板，则可以使用全局预设来帮助将帖子模板设计与网站上的其他元素相匹配。 例如，您可以在帖子标题上使用“WALP-H1-1”预设，如下所示：

或者您可以使用包含动态作者信息的简介上预设的“WALP – Blurb 2”简介模块。

帖子内容模块是您的博客帖子内容将在页面上生成的区域。 这就是为什么将帖子内容模块的设计设置与整个站点中使用的其他文本元素相匹配很重要的原因。

如果您从头开始构建帖子模板，您可以通过站点从各种文本模块复制和粘贴文本设置。 或者，如果您事先为您的站点制作了全局预设样式指南，您可以从样式指南中的那些模块中复制设计元素。

例如，您可以复制为一个文本模块中的所有文本样式创建的全局预设的标题文本样式。

然后将这些标题文本样式传递到帖子模板的帖子内容模块中。 这将有助于确保用于帖子内容的所有标题都与网站的风格相匹配。

这里重要的是你有一个与你网站风格相匹配的帖子模板。 如果您从头开始设计模板，使用全局预设可以极大地帮助该过程。

将全局预设与 Divi 布局块一起使用

设计好模板后，我们就可以开始使用带有 Divi Layout 块的全局预设来使用默认的 WordPress 块编辑器设计其他帖子内容元素。

为此，请编辑（或创建）博客文章。 然后确保你有一些模拟内容（比如一些标题和段落，以及一张特色图片）。

现在，如果您查看前端的帖子，它将在帖子模板中显示帖子内容，并且内容（标题、正文等...）继承了帖子内容模块设置的样式。

帖子内容模块只会处理基本文本内容的样式。 如果您想使用默认的 WordPress Block 编辑器在整个帖子中添加其他元素，则需要通过子主题中的自定义 CSS 更改这些元素的样式。 除非您使用 Divi 布局块。

要添加要与帖子模板和站点相匹配的其他内容，您可以使用 Divi 布局块。 这将允许您添加所需的任何内容并使用 Divi Builder 对其进行样式设置。 而且，由于我们还可以使用全局预设，因此我们可以进一步即时简化博客文章内容的设计。

设计 #1：使用全局预设和 Divi 布局块构建博客 CTA

在第一个示例中，让我们创建一个与帖子模板和站点设计相匹配的自定义博客 CTA。

为此，请在帖子内容中添加一个 Divi 布局块。

然后单击构建新布局。

这将打开布局块编辑器，它基本上是像往常一样的 Divi Builder。 为默认部分提供一列行。

在不同的浏览器中打开您的全局预设布局，确保您单击以在前端构建，以便您可以看到元素。 这样你就可以在一个浏览器中打开布局编辑器，在另一个浏览器中打开样式指南。

如果您没有样式指南，您可以在您的网站上打开页面布局，以便您可以访问您想要引入的任何设计元素。

从样式指南复制背景

对于此 CTA，我们将使用样式指南中的宝蓝色背景。 打开文本模块的设置，复制背景。

然后在布局编辑器中打开该部分的设置并将背景传递到该部分。

添加带有 H3 预设的文本模块

接下来，向该行添加一个新的文本模块。

然后打开设置并更新以下内容：

通过在正文中粘贴以下 HTML 来为 CTA 添加 H3 标题：

<h3>Learn How One Client Increased Revenue by 500%</h3>

打开 Global Presents 下拉菜单并选择 H3 标题的预设 (WALP – H3 – 1)

更新设计

然后将文本颜色更新为白色并居中对齐。

使用全局预设添加按钮

在文本模块下，添加一个新按钮。

然后更新按钮文本并选择全局预设按钮设计之一。 在这个例子中，让我们使用“WALP – Button 3”。

保存更改

完成后，单击保存并退出。

现在您可以看到 WordPress 块编辑器中显示的元素。

设计 #2：使用全局预设和 Divi 布局块构建博客引用

对于下一个设计元素，我们将在博客文章中添加引用。

添加 Divi 布局块

首先，在要显示报价的位置添加 Divi 布局块。

然后单击构建新布局。

从样式指南复制和粘贴背景

从样式指南中复制深蓝色背景。

然后将其粘贴到布局编辑器的默认部分。

添加行

接下来，向该部分添加一列行。

添加带有预设的推荐模块

然后向该列添加推荐模块。 然后选择全局预设“WALP – Testimonial 2”。

这将为您设计博客文章的报价提供一个良好的开端。

更新设计

在设计选项卡下，如下调整设计设置：

• 报价图标颜色：
• 正文字体重量：轻
• 正文字体样式：斜体
• 正文对齐方式：左
• 正文颜色：#ffffff
• 作者字体：Ubuntu
• 作者文字大小：16px

添加新的全局预设

由于我们对此推荐预设进行了重大更改，因此此时创建一​​个新预设以用于未来的帖子引用是有意义的。

要创建一个新的，请单击“从当前样式创建新预设”按钮。 然后为新预设命名（“博客文章引用”）并保存。 全局预设现在可以使用了。

保存布局，您将在帖子内容中看到它。

设计 #1：使用全局预设和 Divi 布局块向博客文章添加模糊

对于下一个示例，我们将在帖子中添加一些简介。

添加新的 Divi 布局块

添加另一个 Divi 布局块，然后单击“构建新布局”按钮。

在布局编辑器中，向布局添加一个两列的行。

添加带有预设的 Blurb 模块

在左栏中，添加一个模糊模块。

将新的图标图像添加到简介中。 然后打开预设下拉菜单并选择模糊预设“WALP – Blurb 4”。

添加第二个模糊

然后复制简介并将其粘贴到第 2 列并更新图像。

保存布局，您将在帖子内容中看到它。

最后结果

现在打开前端的帖子，看看最终的结果。

具有全局预设的可重用块

如果您想利用带有 Divi 布局块的可重用块，很高兴知道它们将与全局预设一起使用。 因此，如果您想将我们之前创建的博客 CTA 保存为可重用块，您将拥有一个方便的块，可用于在构建帖子时添加 CTA。 而且，由于 CTA 使用带有全局预设的按钮和文本，更新该元素的全局预设也会更新可重用块中的元素。

最后的想法

全局预设是我们在 Divi 中可用的最强大的设计工具之一。 一旦您花时间将全局预设添加到您在整个站点中使用的模块，您就可以真正利用使用布局块设计博客帖子模板和内容的简化过程。

我期待在评论中收到您的来信。

干杯!