WordPress divi主题

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

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

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

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

google广告开户

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

让我们开始吧。

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

创建或编辑博客文章

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

古腾堡 Divi 电子邮件选项

添加内联 Divi 布局块

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

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

可重用的divi布局块

在 Divi 布局块中构建新布局

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

可重用的divi布局块

WordPress divi主题

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

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

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

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

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

可重用的divi布局块

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

可重用的divi布局块

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

可重用的divi布局块

  • 高度:100 像素
  • 内边距:0px 顶部,0px 底部

可重用的divi布局块

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

可重用的divi布局块

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

fiverr建站WordPress程序员

可重用的divi布局块

请记住,布局块的 Divi 布局上方和下方的间距在后端可能看起来比在前端更大。

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

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

什么是可重用布局块

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

独立站选品工具

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

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

可重用的divi布局块

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

可重用的divi布局块

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

高质量外链购买

可重用的divi布局块

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

可重用的divi布局块

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

要编辑可重复使用的布局块,请将鼠标悬停在块上,然后单击块右上角的编辑按钮。

JasperAI 10000字免费额度试用

可重用的divi布局块

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

可重用的divi布局块

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

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

WordPress备份工具updrafplus

可重用的divi布局块

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

可重用的divi布局块

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

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

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

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

可重用的divi布局块

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

最后的想法

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

您能找出有用的方法将可重复使用的 Divi 布局块合并到您自己的博客文章中吗?

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

干杯!

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