当您简化在网站上创建博客文章的方式时，您很有可能希望在文章中的某处包含有吸引力的 CTA。 现在，通过 Divi 的新 Gutenberg 布局块集成，您可以轻松地在 Gutenberg 博客文章中的任何位置添加一个新的 Divi 构建块。 这使您可以将整体博客文章内容保留在 Gutenberg 环境中，同时仍然使用 Divi-s 内置选项构建自定义 Divi CTA。 两全其美！ 在本教程中，我们将向您展示如何将内联和动画 Divi CTA 布局块添加到您的 Gutenberg 帖子中。 我们还将免费分享 Divi CTA 布局块的 JSON 文件！
让我们开始吧。
预览
在深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
免费下载内联和动画 Divi CTA 布局块
要接触免费的英雄部分，您首先需要使用下面的按钮下载它们。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
导入布局块 JSON
将布局上传到 Divi 库
要导入您可以在上面下载的 JSON 文件，请转到 WordPress 仪表板后端的 Divi 库，然后单击“导入和导出”。
然后，选择下载文件夹中的 JSON 文件，然后单击“导入 Divi Builder 布局”。
在 Gutenberg Post 内添加新的 Divi Block Block
导入布局后，您可以转到 Gutenberg 帖子并添加新的 Divi 布局块。
从保存的布局导入 JSON 文件
然后，单击“从库加载”，导航到“您保存的布局”并选择布局以将 Divi CTA 布局块导入您的博客文章。 就是这样！
让我们开始重建吧！
使用第三个主题生成器包发布模板
下载第三个主题生成器包
是时候从头开始创作了！ 首先，我们正在重新创建的设计与 Divi 博客上发布的第三个主题构建器包相匹配。 转到帖子并下载此主题构建器包的 JSON 文件。
转到 Divi 主题生成器
下载第三个主题构建器包后，您可以转到 Divi Theme Builder。
上传帖子模板
通过单击右上角的图标上传主题构建器包的帖子模板。
然后，选择帖子模板并单击“导入 Divi 主题生成器模板”。 确保您也保存主题生成器更改。 此时，我们已将主题构建器包的博客帖子模板分配给我们所有的帖子。
打开现有的古腾堡邮报或创建新的
下一步是将 Divi CTA 布局块添加到我们的 Gutenberg 帖子中。 为此，请打开现有帖子或创建新帖子。
添加新的内联 Divi 块
进入帖子后，您将能够添加新的 Divi 布局块。
在 Divi 块内构建新布局
然后，您将获得两个选项。 选择“构建新布局”选项。
部分设置
间距
进入 Divi 布局块编辑器后，您会注意到一个部分。 打开该部分并添加一些自定义边距值以在部分容器周围创建空间。
- 上边距：50px
- 下边距：50px
- 左边距：-10%
- 右边距：-10%
添加第 1 行
立柱结构
继续使用以下列结构添加新行：
浆纱
在不添加任何模块的情况下，打开行设置并增加宽度和最大宽度。
- 宽度：100%
- 最大宽度：100%
将分隔线 #1 添加到列
能见度
是时候添加模块了，从分频器模块开始。 确保启用了“显示分隔线”选项。
线
转到模块的设计选项卡并更改行设置，如下所示：
- 线条颜色：#fc526e
- 线型：实线
- 线位置：顶部
浆纱
也修改大小设置。
- 分隔线重量：3px
- 宽度：30%
- 模块对齐：右
- 高度：3px
动画片
并相应地修改动画设置：
- 动画风格：幻灯片
- 动画方向：左
- 动画时长：2000ms
- 动画延迟：500ms
- 动画强度：100%
- 动画开始不透明度：100%
将分隔线 #2 添加到列
能见度
进入下一个分频器模块。 同样，确保启用了“显示分隔线”选项。
线
然后，转到模块的设计选项卡并更改行设置，如下所示：
- 线条颜色：#e1e3e8
- 线型：实线
- 线位置：顶部
浆纱
接下来修改模块的大小设置。
- 分隔线重量：3px
- 高度：3px
间距
也添加一些自定义间距值。
- 左边距：10%
- 右边距：-20%
动画片
并通过修改动画设置完成模块的设置如下：
- 动画风格：幻灯片
- 动画方向：左
- 动画时长：2000ms
- 动画延迟：500ms
- 动画强度：100%
- 动画开始不透明度：100%
将分隔线 #3 添加到列
能见度
在这一行中我们需要的下一个也是最后一个分频器模块。 确保启用了“显示分隔线”选项。
线
然后，转到设计选项卡并更改线条设置，如下所示：
- 线条颜色：#fc526e
- 线型：实线
- 线位置：顶部
浆纱
修改模块的大小。
- 分隔线重量：3px
- 高度：3px
间距
连同间距设置。
- 下边距：100px
- 左边距：-20%
- 右边距：10%
动画片
并通过更改动画设置来完成模块的设置。
- 动画风格：幻灯片
- 动画方向：右
- 动画时长：2000ms
- 动画强度：100%
- 动画开始不透明度：100%
添加第 2 行
立柱结构
使用以下列结构向该部分添加另一行：
浆纱
在不添加任何模块的情况下，打开行设置并更改大小设置，如下所示：
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 宽度：70%
- 行对齐：居中
将文本模块 #1 添加到列
添加H2含量
然后，使用您选择的一些 H2 内容将第一个文本模块添加到行的列。
H2 文本设置
转到设计选项卡并相应地修改 H2 文本设置：
- 标题 2 文本颜色：#fc526e
- 标题 2 文字大小：28px
间距
接下来添加一些自定义填充值。
- 上边距：50px
- 底部填充：50px
- 左填充：50px
边界
我们也使用左边框。
- 左边框宽度：2px
- 左边框颜色：#fc526e
动画片
并通过添加自定义动画来完成模块的设置。
- 动画风格：翻转
- 动画方向：中心
- 动画延迟：1500ms
将文本模块 #2 添加到列
添加内容
在前一个文本模块的正下方添加另一个文本模块，其中包含您选择的一些内容。
间距
移动模块的设计选项卡并相应地修改填充值：
- 上边距：50px
- 底部填充：50px
- 右内边距：50px
边界
接下来添加顶部和右侧边框。
- 顶部和右侧边框：2px
- 顶部和右侧边框颜色：#fc526e
动画片
并通过修改动画设置完成模块的设置如下：
- 动画风格：翻转
- 动画方向：中心
- 动画延迟：1700ms
将按钮模块添加到列
添加副本
我们在这一行中需要的下一个也是最后一个模块是按钮模块。 添加一些您选择的副本。
按钮设置
转到模块的设计选项卡并修改按钮设置，如下所示：
- 为按钮使用自定义样式：是
- 按钮文字大小：13px
- 按钮文字颜色：#ffffff
- 渐变色 1：#ff5b84
- 渐变色 2：#f94857
- 渐变类型：线性
- 渐变方向：165度
- 按钮边框宽度：0px
- 按钮边框半径：0px
- 按钮字母间距：1px
- 按钮字体：蒙特塞拉特
- 按钮字体粗细：半粗体
- 按钮字体样式：大写
间距
接下来添加一些自定义顶部和底部填充。
- 上边距：16px
- 底部填充：16px
动画片
并通过添加以下动画完成模块的设置：
- 动画风格：翻转
- 动画延迟：1900ms
克隆第 1 行并放在部分底部
完成第一行和第二行后，您可以克隆第一行并将副本放在该部分的底部。
更改分隔顺序
交换第一个和最后一个分频器模块的位置。
更改分隔线 #1 间距
然后，打开行中的第一个 Divider Module 并修改间距设置。
- 上边距：100px
- 左边距：10%
- 右边距：-20%
更改分隔线 #2 间距
更改第二个分频器模块的间距设置。
- 左边距：-20%
- 右边距：10%
更改分隔线 #3 尺寸
然后，打开第三个 Divider Module 并在尺寸设置中使用左模块对齐。
移除 Divider #3 动画延迟
移除第三个 Divider Module 的动画延迟，就可以了！ 完成 Divi CTA 布局块后，请确保保存更改并更新您的帖子。
预览
现在我们已经完成了所有步骤，让我们最终看看不同屏幕尺寸的结果。
桌面
移动的
最后的想法
在这篇文章中，我们向您展示了如何利用 Divi 的新 Gutenberg 集成，并在您的 Gutenberg 博客文章中添加内联和动画 Divi CTA 布局块。 这是在访问者阅读您的博客文章内容时突出显示您选择的 CTA 的好方法。 您还可以免费下载 Divi CTA 布局块的 JSON 文件！ 如果您有任何疑问，请随时在下面的评论部分发表评论！
如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件通讯和 YouTube 频道，这样您将永远是第一批了解并从这些免费内容中受益的人之一。
