您在设计的页面中展示 CTA 的方式会对访问者采取行动的方式产生重大影响。 您可以使用最常用的方式，使用中间有副本的按钮格式，但您也可以使用它来获得创意。 在今天的教程中，我们将向您展示一种在 Divi 设计中包含号召性用语的创造性方法。 准确地说，我们将包括悬停动画角按钮箭头。 一旦箭头悬停，箭头方向将随着样式而改变。 您也可以免费下载此设计的 JSON 文件！
让我们开始吧。
预览
在深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
免费下载布局
要掌握免费布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
让我们开始重建吧！
添加新的专业部分
向您正在处理的页面添加一个新的专业部分。 为其选择以下列结构：
渐变背景
打开部分设置并应用以下渐变背景：
- 颜色 1：#fff8f5
- 颜色 2：#f9f3ef
- 渐变类型：径向
- 径向：左下
- 起始位置：40%
- 结束位置：40%
浆纱
转到该部分的设计选项卡并更改尺寸设置，如下所示：
- 均衡柱高：是
- 使用自定义装订线宽度：是
- 天沟宽度：1
- 内宽：90%
- 内部最大宽度：1580px
间距
然后，转到间距设置并在第 1 列添加一些右填充。
- 第 1 列右填充：6%
将文本模块 #1 添加到第 1 列
添加H2含量
是时候添加模块了，从第 1 列中的文本模块开始。添加一些您选择的 H2 内容。
H2 文本设置
样式模块的 H2 文本设置如下：
- 标题 2 字体：Kumbh Sans
- 标题 2 字体粗细：粗体
- 标题 2 文字颜色：#08665c
- 标题 2 文字大小：
- 桌面：75px
- 平板电脑：60px
- 电话：45像素
间距
接下来添加一些顶部和底部边距。
- 上边距：50px
- 下边距：50px
将文本模块 #2 添加到第 1 列
添加描述内容
在前一个文本模块下方添加另一个文本模块，其中包含您选择的一些描述内容。
文字设置
更改模块的文本设置如下：
- 文字字体：Kumbh Sans
- 文字颜色：#08665c
- 文字大小：16px
- 文字行高：1.8em
间距
在较小的屏幕尺寸上添加一些底部边距。
- 底边距：
- 桌面： /
- 平板电脑和手机：50px
将第 1 行添加到第 2 列
立柱结构
到该部分的第二列。 在那里，使用以下列结构添加第一行
浆纱
在不添加模块的情况下，打开行设置并更改大小设置，如下所示：
- 使用自定义装订线宽度：是
- 天沟宽度：2
间距
接下来删除所有默认的顶部和底部填充。
- 顶部填充：0px
- 底部填充：0px
第 1 列设置
背景颜色
然后，打开第 1 列设置并应用您选择的背景颜色。
- 背景颜色：#cccccc
间距
转到列的间距设置并使用以下响应值：
- 顶部填充：
- 桌面：100px
- 平板电脑和手机：70px
- 左填充：
- 台式机和平板电脑：8%
- 电话：10%
- 右填充：
- 台式机和平板电脑：8%
- 电话：10%
边界
也为边框设置添加一些圆角。
能见度
通过将溢出设置为在高级选项卡中可见来完成列设置。
- 水平溢出：可见
- 垂直溢出：可见
将文本模块 #1 添加到第 1 列
添加内容
是时候添加模块了，从第 1 列中的第一个文本模块开始。添加一些您选择的内容。
文字设置
更改模块的文本设置：
- 文字字体：Kumbh Sans
- 文字字体粗细：轻
- 文字颜色：#08665c
- 文字大小：30px
- 文本行高：1em
间距
也应用一些底部边距。
将分隔模块添加到第 1 列
能见度
然后，添加一个分频器模块。 确保启用了“显示分隔线”选项。
线
转到模块的设计选项卡并更改线条颜色。
浆纱
同时修改大小设置。
- 分隔线重量：2px
- 高度：2px
间距
也添加一些底部边距。
将文本模块 #2 添加到第 1 列
添加H3内容
将另一个文本模块添加到第 1 列。使用您选择的一些 H3 内容。
H3 文字设置
转到模块的设计选项卡并更改 H3 文本设置，如下所示：
- 标题 3 字体：Kumbh Sans
- 标题 3 字体粗细：粗体
- 标题 3 文字颜色：#08665c
- 标题 3 文字大小：
- 桌面：48px
- 平板电脑：38px
- 电话：32px
间距
也使用一些底部边距。
将文本模块 #3 添加到第 1 列
添加内容
将最后一个文本模块添加到第 1 列，其中包含您选择的一些描述内容。
文字设置
相应地更改文本设置：
- 文字字体：Kumbh Sans
- 文字颜色：#08665c
- 文字大小：16px
- 文字行高：1.8em
间距
包括一些底部边距。
- 底边距：
- 桌面：200px
- 平板电脑和手机：150px
将 Blurb 模块添加到第 1 列
将内容框留空
在本专栏中我们需要的最后一个模块是 Blurb 模块。 将内容框留空。
默认图标
接下来选择箭头图标。
悬停图标
更改悬停时的图标。
添加链接
也使用此模块的链接。
悬停背景颜色
然后，添加悬停背景颜色。
- 悬停背景颜色：#08665c
默认图标设置
导航到设计选项卡并更改图标设置，如下所示：
- 图标颜色：#ffffff
- 图像/图标位置：顶部
- 图像/图标对齐：右
- 使用图标字体大小：是
- 图标字体大小：80px
悬停图标设置
修改悬停时的图标字体大小。
- 悬停图标字体大小：40px
浆纱
然后，在尺寸设置中添加一些宽度。
悬停间距
修改悬停时的顶部和右侧填充。
- 悬停顶部填充：25px
- 悬停右填充：10px
边界
在边框设置中也包括一些圆角。
悬停比例
然后，在悬停时使用变换比例选项。
主要元素和模糊图像 CSS
接下来，导航到高级选项卡，并为主要元素使用以下 CSS 代码行：
cursor: pointer;
将此行用于 Blurb Image css 框：
margin-bottom: 0px;
位置
通过在位置设置中重新定位来完成模块设置：
- 职位：绝对
- 位置：右下角
重用第 1 列
删除第 2 列
完成第一列后，您可以将其重复用于第二列。 为此，请先删除第二列。
克隆列 1
然后，克隆第一个。
更改第 2 列背景颜色
当然，您需要对重复的列进行一些更改，从背景颜色开始。
- 第 2 列背景颜色：#f0c7b1
将转换转换添加到第 2 列
我们也在较小的屏幕尺寸上添加了转换转换值。
- 对：
- 桌面： /
- 平板电脑和手机：50px
更改重复内容
确保更改所有重复的内容。
更改 Blurb 模块链接
通过更改 Blurb 模块内的链接来完成重复的列。
重用行
完成第一行及其列后，您可以克隆整行。
删除第 2 列
删除行设置内的第二列。
更改列背景颜色
然后，更改剩余列的背景颜色。
- 列背景颜色：#dfe7f2
将顶部边距添加到行
返回到常规行设置并添加一些响应式上边距。
- 最高边距：
- 桌面：50px
- 平板电脑和手机：100px
更改重复内容
然后，更改列中的所有重复内容。
更改 Blurb 模块链接
通过更改 Blurb 模块中的链接来完成教程。 就是这样！
预览
现在我们已经完成了所有步骤，让我们最终看看不同屏幕尺寸的结果。
桌面
移动的
最后的想法
在这篇文章中，我们向您展示了如何利用 CTA 发挥创意。 更具体地说，我们向您展示了如何添加悬停动画角按钮箭头。 这种方法可以帮助您在设计具有多个 CTA 的部分时保持简洁的外观和感觉。 它也增加了额外的交互水平。 您可以免费下载 JSON 文件。 如果您有任何问题或建议，请随时在下面的评论部分发表评论！
如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件通讯和 YouTube 频道，这样您将永远是第一批了解并从这些免费内容中受益的人之一。
