如何为 Gutenberg 博客文章创建可重用的 Divi 布局块

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

在本教程中，我们将演示如何为 Gutenberg 博客文章创建可重用的 Divi 布局块。 为了说明这一点，我们将为本文的示例可重用 Divi 布局块构建一个部分分隔符。 但是，我们可以轻松地应用相同的技术为 Divi 构建器中的任何内容创建可重用的 Divi 布局块。

让我们开始吧。

为 Gutenberg 博客文章创建 Divi 布局块

创建或编辑博客文章

首先，我们需要创建一篇新的博客文章或编辑现有的文章。 对于此示例，让我们使用一些标题和段落块向帖子标题和正文添加一些模拟内容。 然后添加特色图像并为Divi页面设置下的页面布局选择“无侧边栏”。

添加内联 Divi 布局块

一旦我们创建了大部分帖子，我们需要做的就是在帖子内容区域内我们想要的任何地方添加一个新的 Divi 布局块。

要添加它，请将鼠标悬停在我们要添加电子邮件选项的区域上。 然后单击蓝色加号图标以添加新块。 在弹出的块列表中，选择 Divi 布局块。

在 Divi 布局块中构建新布局

一旦选择了 Divi 布局块，我们将可以选择“构建新布局”或“从库加载”。 由于我们需要为我们的示例构建一个新的分隔线，因此选择选项“构建新布局”。

使用 Divi 布局块编辑器设计布局

一旦我们选择了 Build New Layout 按钮，我们就可以在布局块编辑器中设计我们的 Divi 布局。

对于此示例，我们将使用 Divi 的截面形状分隔符和渐变背景构建自定义分隔符或分隔符。 这绝对是一个设计元素，我们将能够将其转换为可重复使用的布局块，以便在 Gutenberg 帖子中添加部分分隔符的便捷方式。

要创建截面分隔线设计，请打开截面设置并更新以下内容：

• 渐变背景左颜色：#ddd6f3
• 渐变背景正确颜色：#faaca8
• 梯度方向：90度
• 起始位置：30%

• 顶部分隔线样式：见截图
• 顶部分隔线颜色：#ffffff
• 顶部分隔线高度：50px

• 底部分隔线样式：见截图
• 底部分隔线颜色：#ffffff
• 底部分隔线高度：50px
• 底部分隔线翻转：水平

• 高度：100px
• 填充：0px 顶部，0px 底部

设计完成后，请确保保存 Divi 布局块。

现在，Divi Layout Block 部分分隔符将显示在 WordPress 帖子编辑器中。

请记住，布局块的 Divi 布局上方和下方的间距在后端可能比前端显得更大。

现在我们准备将这个 Divi 布局块转换为可重用的布局块，以便在以后的帖子中轻松添加相同的部分分隔符。

但在我们这样做之前，了解什么是 WordPress 中的可重用块可能会有所帮助。

什么是可重用布局块

WordPress 默认块编辑器（Gutenberg）中的可重用布局块很像 Divi 中的全局元素。 该块可以多次使用，但所有实例的内容和外观都保持完全相同。 当我们编辑可重用的布局块时，更改会应用于整个站点的布局块的所有实例。 一旦布局块在 WordPress 中可重用，该块将在撰写帖子时出现在块列表中。 这使得在多个博客文章中多次添加相同的布局块非常方便。

将 Divi 布局块变成可重用的布局块

要使我们的 Divi 布局块成为可重复使用的块，请将鼠标悬停在布局块上并通过单击三点图标打开设置菜单。 然后从列表中选择“添加到可重用块”选项。

然后为可重用块命名并单击保存按钮将该块另存为可重用块。

现在，当我们在博客文章中添加一个新块时，我们可以在列表中找到我们新的可重用布局块（在可重用类别切换下）。 只需单击可重复使用的布局块，它将被添加到帖子中。

现在，如果我们查看实时帖子，我们可以看到同一部分分隔符的两个实例。

一旦我们在整个帖子或站点中多次使用可重用块，我们就可以编辑可重用布局块的实例之一，这些更改将应用​​于整个站点的块的所有实例。

要编辑可重用布局块，请将鼠标悬停在该块上并单击该块右上角的编辑按钮。

然后选择（单击）可重用块内的布局并单击出现的顶部菜单中的编辑图标。 我们也可以点击右侧边栏区块选项卡下的编辑布局链接。

然后根据需要更改布局的设计。 对于此示例，我们可以更改用于渐变背景的颜色。

保存布局后，请务必单击可重用布局块右上角的保存按钮。 然后更新帖子并查看实时站点上的更改。

您会注意到所有可重用布局实例的设计更改都已更新。

提示：使用可重用的布局块作为模板

有时我们想在我们的帖子中使用可重用布局块的修改版本。 这允许我们向帖子添加一个可重用的布局块作为起始模板，这样我们就可以为特定实例自定义布局块，而不会影响整个站点的可重用块。

要将可重用的布局块用作模板，请先将可重用的块添加到帖子中。

然后打开块菜单并选择选项“转换为常规块”。

现在我们可以为此实例编辑特定设计的布局，而不会影响其他可重用的块。

最后的想法

创建可重用的 Divi 布局块会很有帮助，尤其是对于像节分隔线这样的 Divi 设计元素。 这使我们可以在整个帖子中重复使用分隔符。 它不仅简化了撰写帖子的过程，而且还使我们能够更轻松地更新站点范围内的块设计。 在这篇文章中，我们展示了如何添加一个节分隔符作为可重用块，但由于无数其他原因，同样的技术可用于创建无限的可重用 Divi 布局块。

您能否找到将可重用的 Divi 布局块合并到您自己的博客文章中的有用方法？

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

干杯!