WordPress divi主题

如何在您的 Gutenberg 博客文章中添加内联和动画 Divi CTA 布局块

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

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

当您简化在网站上创建博客文章的方式时,您很有可能希望在文章中的某处包含有吸引力的 CTA。 现在,通过 Divi 的新 Gutenberg 布局块集成,您可以轻松地在 Gutenberg 博客文章中的任何位置添加一个新的 Divi 构建块。 这使您可以将整体博客文章内容保留在 Gutenberg 环境中,同时仍然使用 Divi-s 内置选项构建自定义 Divi CTA。 两全其美! 在本教程中,我们将向您展示如何将内联和动画 Divi CTA 布局块添加到您的 Gutenberg 帖子中。 我们还将免费分享 Divi CTA 布局块的 JSON 文件!

google广告开户

让我们开始吧。

预览

在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的结果。

桌面

Divi CTA 布局块

移动的

Divi CTA 布局块

免费下载内联和动画 Divi CTA 布局块

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

导入布局块 JSON

将布局上传到 Divi 库

要导入您可以在上面下载的 JSON 文件,请转到 WordPress 仪表板后端的 Divi 库,然后单击“导入和导出”。

Divi CTA 布局块

然后,选择下载文件夹中的 JSON 文件,然后单击“导入 Divi Builder 布局”。

Divi CTA 布局块

WordPress divi主题

在 Gutenberg Post 内添加新的 Divi Block Block

导入布局后,您可以转到 Gutenberg 帖子并添加新的 Divi 布局块。

Divi CTA 布局块

从保存的布局导入 JSON 文件

然后,单击“从库加载”,导航到“您保存的布局”并选择布局以将 Divi CTA 布局块导入您的博客文章。 就是这样!

Divi CTA 布局块

Divi CTA 布局块

让我们开始重建吧!

使用第三个主题生成器包发布模板

下载第三个主题生成器包

是时候从头开始创作了! 首先,我们正在重新创建的设计与 Divi 博客上发布的第三个主题构建器包相匹配。 转到帖子并下载此主题构建器包的 JSON 文件。

Divi CTA 布局块

转到 Divi 主题生成器

下载第三个主题构建器包后,您可以转到 Divi Theme Builder。

Divi CTA 布局块

上传帖子模板

通过单击右上角的图标上传主题构建器包的帖子模板。

fiverr建站WordPress程序员

Divi CTA 布局块

然后,选择帖子模板并单击“导入 Divi 主题生成器模板”。 确保您也保存主题生成器更改。 此时,我们已将主题构建器包的博客帖子模板分配给我们所有的帖子。

Divi CTA 布局块

打开现有的古腾堡邮报或创建新的

下一步是将 Divi CTA 布局块添加到我们的 Gutenberg 帖子中。 为此,请打开现有帖子或创建新帖子。

Divi CTA 布局块

独立站选品工具

添加新的内联 Divi 块

进入帖子后,您将能够添加新的 Divi 布局块。

Divi CTA 布局块

在 Divi 块内构建新布局

然后,您将获得两个选项。 选择“构建新布局”选项。

Divi CTA 布局块

部分设置

间距

进入 Divi 布局块编辑器后,您会注意到一个部分。 打开该部分并添加一些自定义边距值以在部分容器周围创建空间。

高质量外链购买
  • 上边距:50px
  • 下边距:50px
  • 左边距:-10%
  • 右边距:-10%

Divi CTA 布局块

添加第 1 行

立柱结构

继续使用以下列结构添加新行:

Divi CTA 布局块

浆纱

在不添加任何模块的情况下,打开行设置并增加宽度和最大宽度。

  • 宽度:100%
  • 最大宽度:100%

Divi CTA 布局块

JasperAI 10000字免费额度试用

将分隔线 #1 添加到列

能见度

是时候添加模块了,从分频器模块开始。 确保启用了“显示分隔线”选项。

Divi CTA 布局块

线

转到模块的设计选项卡并更改行设置,如下所示:

  • 线条颜色:#fc526e
  • 线型:实线
  • 线位置:顶部

Divi CTA 布局块

浆纱

也修改大小设置。

WordPress备份工具updrafplus
  • 分隔线重量:3px
  • 宽度:30%
  • 模块对齐:右
  • 高度:3px

Divi CTA 布局块

动画片

并相应地修改动画设置:

  • 动画风格:幻灯片
  • 动画方向:左
  • 动画时长:2000ms
  • 动画延迟:500ms
  • 动画强度:100%
  • 动画开始不透明度:100%

Divi CTA 布局块

将分隔线 #2 添加到列

能见度

进入下一个分频器模块。 同样,确保启用了“显示分隔线”选项。

Divi CTA 布局块

线

然后,转到模块的设计选项卡并更改行设置,如下所示:

  • 线条颜色:#e1e3e8
  • 线型:实线
  • 线位置:顶部

Divi CTA 布局块

浆纱

接下来修改模块的大小设置。

  • 分隔线重量:3px
  • 高度:3px

Divi CTA 布局块

间距

也添加一些自定义间距值。

  • 左边距:10%
  • 右边距:-20%

Divi CTA 布局块

动画片

并通过修改动画设置完成模块的设置如下:

  • 动画风格:幻灯片
  • 动画方向:左
  • 动画时长:2000ms
  • 动画延迟:500ms
  • 动画强度:100%
  • 动画开始不透明度:100%

Divi CTA 布局块

将分隔线 #3 添加到列

能见度

在这一行中我们需要的下一个也是最后一个分频器模块。 确保启用了“显示分隔线”选项。

Divi CTA 布局块

线

然后,转到设计选项卡并更改线条设置,如下所示:

  • 线条颜色:#fc526e
  • 线型:实线
  • 线位置:顶部

Divi CTA 布局块

浆纱

修改模块的大小。

  • 分隔线重量:3px
  • 高度:3px

Divi CTA 布局块

间距

连同间距设置。

  • 下边距:100px
  • 左边距:-20%
  • 右边距:10%

Divi CTA 布局块

动画片

并通过更改动画设置来完成模块的设置。

  • 动画风格:幻灯片
  • 动画方向:右
  • 动画时长:2000ms
  • 动画强度:100%
  • 动画开始不透明度:100%

Divi CTA 布局块

添加第 2 行

立柱结构

使用以下列结构向该部分添加另一行:

Divi CTA 布局块

浆纱

在不添加任何模块的情况下,打开行设置并更改大小设置,如下所示:

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:70%
  • 行对齐:居中

Divi CTA 布局块

将文本模块 #1 添加到列

添加H2含量

然后,使用您选择的一些 H2 内容将第一个文本模块添加到行的列。

Divi CTA 布局块

H2 文本设置

转到设计选项卡并相应地修改 H2 文本设置:

  • 标题 2 文本颜色:#fc526e
  • 标题 2 文字大小:28px

Divi CTA 布局块

间距

接下来添加一些自定义填充值。

  • 上边距:50px
  • 底部填充:50px
  • 左填充:50px

Divi CTA 布局块

边界

我们也使用左边框。

  • 左边框宽度:2px
  • 左边框颜色:#fc526e

Divi CTA 布局块

动画片

并通过添加自定义动画来完成模块的设置。

  • 动画风格:翻转
  • 动画方向:中心
  • 动画延迟:1500ms

Divi CTA 布局块

将文本模块 #2 添加到列

添加内容

在前一个文本模块的正下方添加另一个文本模块,其中包含您选择的一些内容。

Divi CTA 布局块

间距

移动模块的设计选项卡并相应地修改填充值:

  • 上边距:50px
  • 底部填充:50px
  • 右内边距:50px

Divi CTA 布局块

边界

接下来添加顶部和右侧边框。

  • 顶部和右侧边框:2px
  • 顶部和右侧边框颜色:#fc526e

Divi CTA 布局块

动画片

并通过修改动画设置完成模块的设置如下:

  • 动画风格:翻转
  • 动画方向:中心
  • 动画延迟:1700ms

Divi CTA 布局块

将按钮模块添加到列

添加副本

我们在这一行中需要的下一个也是最后一个模块是按钮模块。 添加一些您选择的副本。

Divi CTA 布局块

按钮设置

转到模块的设计选项卡并修改按钮设置,如下所示:

  • 为按钮使用自定义样式:是
  • 按钮文字大小:13px
  • 按钮文字颜色:#ffffff
  • 渐变色 1:#ff5b84
  • 渐变色 2:#f94857
  • 渐变类型:线性
  • 渐变方向:165度
  • 按钮边框宽度:0px

Divi CTA 布局块

  • 按钮边框半径:0px
  • 按钮字母间距:1px
  • 按钮字体:蒙特塞拉特
  • 按钮字体粗细:半粗体
  • 按钮字体样式:大写

Divi CTA 布局块

间距

接下来添加一些自定义顶部和底部填充。

  • 上边距:16px
  • 底部填充:16px

Divi CTA 布局块

动画片

并通过添加以下动画完成模块的设置:

  • 动画风格:翻转
  • 动画延迟:1900ms

Divi CTA 布局块

克隆第 1 行并放在部分底部

完成第一行和第二行后,您可以克隆第一行并将副本放在该部分的底部。

Divi CTA 布局块

更改分隔顺序

交换第一个和最后一个分频器模块的位置。

Divi CTA 布局块

更改分隔线 #1 间距

然后,打开行中的第一个 Divider Module 并修改间距设置。

  • 上边距:100px
  • 左边距:10%
  • 右边距:-20%

Divi CTA 布局块

更改分隔线 #2 间距

更改第二个分频器模块的间距设置。

  • 左边距:-20%
  • 右边距:10%

Divi CTA 布局块

更改分隔线 #3 尺寸

然后,打开第三个 Divider Module 并在尺寸设置中使用左模块对齐。

Divi CTA 布局块

移除 Divider #3 动画延迟

移除第三个 Divider Module 的动画延迟,就可以了! 完成 Divi CTA 布局块后,请确保保存更改并更新您的帖子。

Divi CTA 布局块

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

Divi CTA 布局块

移动的

Divi CTA 布局块

最后的想法

在这篇文章中,我们向您展示了如何利用 Divi 的新 Gutenberg 集成,并在您的 Gutenberg 博客文章中添加内联和动画 Divi CTA 布局块。 这是在访问者阅读您的博客文章内容时突出显示您选择的 CTA 的好方法。 您还可以免费下载 Divi CTA 布局块的 JSON 文件! 如果您有任何疑问,请随时在下面的评论部分发表评论!

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请确保订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

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