WordPress divi主题

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

| 5月 7, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

Divi 的布局块可用作可重用的图像布局块,用于将 Divi 样式的图像添加到 Gutenberg 博客文章中。 这结合了 Divi 强大的设计选项和功能(用于创建精美的图像)以及使用 Gutenberg 撰写帖子(和添加块)的便利性。

google广告开户

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

让我们开始吧!

抢先看

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

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

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

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

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

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

WordPress divi主题

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

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

就是这样!

让我们进入教程,好吗?

我们需要什么开始

首先,我们需要执行以下操作:

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

之后,我们准备开始。

第 1 部分:使用标题可重用 Divi 布局块创建全角图像

添加 Divi 布局块

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

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

fiverr建站WordPress程序员

设计 Divi 图像布局

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

图像模块

将图像模块添加到该行。

独立站选品工具

然后更新设置如下:

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

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

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

高质量外链购买
  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:90%
  • 最大宽度:90%
  • 填充:5% 顶部,5% 底部

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

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

  • 渐变背景左颜色:#782f82
  • 渐变背景正确颜色:#fe756b
  • 渐变方向:90度

为了使图像稍微超出博客文章内容容器,我们可以为该部分指定一个自定义宽度,如下所示:

JasperAI 10000字免费额度试用
  • 宽度:110%
  • 最大宽度:100%
  • 边距:-5%
  • 内边距:0px 顶部,0px 底部

最后,通过添加内部 box-shadow 为该部分赋予创意,如下所示:

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

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

WordPress备份工具updrafplus

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

然后更新以下文本设置:

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

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

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

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

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

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

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

第 2 部分:使用标题可重用 Divi 布局块创建左侧图像

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

将可重用块转换为常规块

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

别担心,这不会删除我们刚刚从可重用块中创建的布局块(虽然有一个选项)。 这只会使可重用块成为常规块,以便我们可以编辑该块并将其用于单个实例。

更新布局

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

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

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

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

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

  • 添加 CSS 类:alignleft

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

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

为可重用块命名(即“带标题的左图”),然后单击保存。

现在,带有标题的左侧图像布局块已添加到可重复使用的块列表中,以便于访问。

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

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

将可重用块转换为常规块

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

更新布局

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

然后打开部分设置并取出左边距。

保存并退出布局编辑器。

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

  • 附加 CSS 类:alignright

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

并为可重用块命名(即“带标题的右图”)并保存。

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

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

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

这是如何做到的。

第 1 步:添加可重用布局块

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

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

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

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

一旦块是规则的,单击以编辑布局。

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

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

第 4 步:保存布局块

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

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

最后结果

最后的想法

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

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

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

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题