如何构建可重用的图像布局块以将 Divi 样式的图像添加到 Gutenberg 帖子

Divi 的布局块可用作可重复使用的图像布局块，用于将 Divi 风格的图像添加到古腾堡博客文章中。 这结合了 Divi（用于创建精美图像）的强大设计选项和功能以及使用 Gutenberg 编写帖子（和添加块）的便利性。

在本教程中，我们将演示如何使用 Divi Layout Block 来设计一些令人惊叹的图像布局。 然后我们将这些布局添加为 Gutenberg 中的可重用块。 使用这种技术，我们将能够为我们的图像添加几乎任何 Divi 设计功能（背景、灯箱、过滤器、动画、滚动效果等等）。 然后我们可以使用这个绝妙的设计作为一个方便的图像模板，将图像添加到使用古腾堡创建的未来帖子中。

让我们开始吧！

抢先看

免费下载可重用的图像布局块

要了解本教程中的布局块，您首先需要使用下面的按钮下载它们。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

如何使用下载在您的站点上导入这些布局块

要将这些可重用的 Divi 图像布局块导入您的站点，首先，您需要解压缩下载文件。 在那里，您将找到需要导入站点的三个 JSON 文件。

使用默认编辑器 (Gutenberg) 编辑帖子。 打开页面右上角的“更多工具和选项”菜单，选择“管理所有可重用块”。

然后单击从 JSON 导入按钮。 从下载文件夹中选择 JSON 文件之一，然后单击导入按钮。

重复此过程以导入所有三个 JSON 文件。

完成后，在 Gutenberg 中添加一个新块。 我们将能够在 Reusable 选项切换下找到导入的 Reusable 布局块。 只需单击您想要将其添加到帖子中的那个。

就是这样！

让我们进入教程，好吗？

我们需要开始做什么

首先，我们需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在 WordPress 中创建一个新帖子并使用默认编辑器（Gutenberg）添加一些模拟内容（标题、标题、段落、特色图片等）。 基本上我们需要一个测试帖子来构建 Divi 风格的图像布局块。

之后，我们就可以开始了。

第 1 部分：使用标题可重复使用的 Divi 布局块创建全宽图像

添加 Divi 布局块

首先，在您的帖子中添加一个 Divi 布局块。

然后单击“构建新布局”。

设计 Divi 图像布局

在布局块编辑器中，通过添加一列行开始设计布局。

图像模块

将图像模块添加到该行。

然后按如下方式更新设置：

• 在灯箱中打开：是

这将允许我们的图像在点击时显示在灯箱中。

• 图像叠加：开
• 叠加图标颜色：#ffffff
• 悬停叠加颜色：rgba(120,47,130,0.57)

要在我们的图像周围创建一些空间，请按如下方式更新行设置：

• 使用自定义装订线宽度：是
• 天沟宽度：1
• 宽度：90%
• 最大宽度：90%
• 填充：顶部 5%，底部 5%

这将为我们提供图像周围 5% 的间距。 这也将是显示我们将添加到该部分的背景渐变的空间。

打开部分设置并使用背景渐变更新设计，如下所示：

• 渐变背景左颜色：#782f82
• 渐变背景右颜色：#fe756b
• 梯度方向：90度

为了使图像稍微超出博客文章内容容器，我们可以为该部分提供自定义宽度，如下所示：

• 宽度：110%
• 最大宽度：100%
• 边距：-5%
• 填充：0px 顶部，0px 底部

最后，通过添加一个内部 box-shadow 给这个部分一个创造性的感觉，如下所示：

• 盒子阴影：见截图
• 框阴影水平位置：5vw
• 框阴影垂直位置：5vw
• 阴影颜色：rgba(255,255,255,0.7)

如果我们想要一个没有标题的图像布局，我们可以停在这里，但是要为图像布局添加标题，请在图像下方添加一个文本模块。

然后添加一些填充内容作为标题文本。

然后更新以下文本设置：

• 文字字体：蒙特塞拉特
• 文字字体粗细：半粗体
• 文字文字颜色：#ffffff
• 宽度：80%
• 模块对齐：右
• 保证金：最高 5%

完成后，请确保使用 Ctrl + S 保存布局或打开底部的设置栏并单击“保存并退出”。

将图像布局添加到可重用块

要将布局添加到可重用块，请单击块上方的“更多选项”菜单，然后选择“添加到可重用块”。

为可重用块命名，然后单击“保存”。

现在，带有标题布局的全角图像已添加到可重复使用的块中，并可在构建帖子时从块列表中使用。

不要忘记更新/保存帖子以保存更改。

第 2 部分：使用 Caption Reusable Divi Layout Block 创建左图

现在带有标题布局的全角图像已添加到可重用块中，我们可以使用该块创建带有标题布局的左图像。

将可重用块转换为常规块

首先，打开包含全角图像布局的可重用块顶部的“更多选项”菜单。 然后选择“转换为常规块”。

别担心，这不会删除我们刚刚从可重用块中创建的布局块（尽管有一个选项）。 这只会使可重用块成为常规块，以便我们可以为单个实例编辑和使用该块。

更新布局

一旦块是常规的，单击块上方的编辑布局按钮。

在布局编辑器中，打开部分设置并更新宽度，如下所示：

• 宽度：自动
• 最大宽度：500px

这就是我们在布局编辑器中需要做的所有事情。 确保保存并退出布局。

选择块后，打开主设置侧栏并选择块选项卡以显示块设置。 在高级切换下，添加以下类：

• 添加 CSS 类：alignleft

这个类是 WordPress 原生的，它会将块浮动到左侧，这也会将我们的图像浮动到我们帖子中内容的左侧。

添加类后，打开块的“更多选项”菜单，然后单击“添加到可重用块”。

为 Reusable 块命名（即“Left Image with Caption”）并单击保存。

现在，Left Image with Caption 布局块已添加到可重用块列表中，以便于访问。

第 3 部分：创建“带有标题的正确图像”可重用的 Divi 布局块

到目前为止，我们有一个带有标题布局块的全角图像和一个带有标题布局块的左图像。 现在我们可以使用标题布局块添加正确的图像。

将可重用块转换为常规块

为此，请打开带有标题可重用块的左侧图像上的“更多选项”菜单。 然后选择“转换为常规块”。

更新布局

一旦块是常规布局块，单击以编辑布局。

然后打开section设置，取出左边距。

保存并退出布局编辑器。

然后使用以下内容更新块的附加 CSS 类：

• 附加 CSS 类：alignright

添加类后，将布局块添加到可重用块。

并为可重用块命名（即“带有标题的正确图像”）并保存它。

现在单击帖子中一个块下的蓝色加号图标之一以添加一个新块。 然后在阻止列表弹出窗口中，打开可重用切换。 我们现在已经准备好使用三个可重用的图像布局块。

第 4 部分：在帖子上使用可重用的图像布局块。

尽管我们创建了图像布局块，但它们（出于我们的目的）仅作为模板存在，以快速启动将图像添加到帖子的过程。 因此，每次我们想要使用这些布局块将实际图像添加到帖子中时，我们都需要先将其转换为常规块，然后再将图像和标题添加到布局中。

这是如何做到的。

步骤 1：添加可重用布局块

将可重用的 Divi 图像布局块之一添加到帖子中。

第 2 步：将其转换为常规块

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

第 3 步：使用新图像和标题编辑布局块

块规则后，单击以编辑布局。

使用您选择的图像更新布局。

然后更新文本模块中的标题文本。

步骤 4：保存布局块

完成后，保存并退出布局编辑器。

继续相同的过程，将其他两个图像布局添加到帖子中。

最后结果

最后的想法

一旦我们掌握了使用 Divi 布局块的窍门，它对我们的博客生活的价值就变得显而易见了。 在这篇文章中，我们介绍了如何使用布局块将一些非常酷的 Divi 风格的图像添加到 Gutenberg 博客文章中。 诀窍是首先将布局保存为可重用的块。 然后，当我们准备将图像添加到博客文章时，我们可以轻松地将可重用块转换为常规块，以便我们可以添加图像和标题。

希望这将提供一些灵感，将您的博客图片提升到一个全新的水平。

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

干杯!