CTA 在视觉上越吸引人，获得更好转化率的机会就越大。 有很多方法可以设计您的 CTA，但在这篇文章中，我们将向您展示如何使用半透明图像和列重叠创建漂亮的 CTA 列设计。 您可以在下面的下载文件夹中找到半透明图像，但可以随意使用其他图像。 您还可以免费下载 JSON 文件！
让我们开始吧。
预览
在深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
免费下载 CTA 列布局
要掌握免费的 CTA 列布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
订阅我们的 Youtube 频道
让我们开始重建吧！
添加新部分
背景
首先创建一个新页面或将新的常规部分添加到现有页面。 然后，进入部分设置并添加渐变背景。
- 背景：渐变
- 背景渐变颜色一：非常浅的灰色#efefef
- 背景渐变色二：白色#ffffff
- 渐变类型：径向
- 径向：中心
- 起始位置：52%
- 结束位置：50%
间距
转到设计选项卡并在间距设置中调整填充。
- 顶部和底部填充
- 底部填充
添加新行
立柱结构
继续使用以下列结构添加新行：
浆纱
然后，调整行的宽度和最大宽度。
- 宽度：100%
- 最大宽度 100%
添加文本模块
添加 H2 和文本内容
是时候添加模块了！ 首先，添加一个文本模块并插入一些您选择的 H2 和段落内容。
文本
转到设计选项卡并按如下方式设置文本样式：
- 文字字体：Open Sans
- 文本对齐：居中
- 文字颜色：绿色#5bba1b
- 字体大小：
- 台式机：1.2vw
- 平板电脑：2.8vw
- 电话：3.6vw
- 文字字母间距：0.2vw
- 文字行高：1.8em
标题 2 文本
在为段落文本设置样式后，也为 H2 文本设置样式。
- 标题：H2
- H2 字体粗细：Doppio One
- H2 文本对齐：居中
- H2 文字颜色：深灰色 #3d3d3d
- H2 文字大小：
- 台式机：4.4vw
- 平板电脑：5.9vw
- 电话：6.9vw
间距
并添加一些顶部填充。
添加分频器模块
能见度
在文本模块下方，添加一个分隔模块并将可见性设置为“是”。
线
接下来更改分隔线颜色。
- 线条颜色：深灰色 #545454
浆纱
现在，调整分隔线的大小，使其看起来更小。
- 分隔线重量：4px
- 宽度：9%
- 模块对齐：中心
间距
也添加一些负上边距。
- 最高边距：
- 桌面：-40px
- 平板电脑+手机：-15px
添加新行
立柱结构
继续添加具有三个相同大小列的新行。 这将是 CTA 列设计的基础。
背景
在添加任何模块之前，在行设置的背景中添加渐变。
- 背景：渐变
- 背景颜色渐变一：白色#ffffff
- 背景色渐变二：透明
- 渐变类型：径向
- 径向中心
- 起始位置：42%
- 结束位置：50%
浆纱
现在，调整行的大小。
- 宽度：100%
- 最大宽度：100%
间距
接下来转到间距设置并添加一些自定义填充值。
- 顶部填充：22vw
- 底部填充：10vw
- 左右填充：10vw
第 1 列设置
背景
继续打开第 1 列设置并添加渐变背景。
- 背景：渐变
- 背景渐变色一：蓝色#2a4eed
- 背景渐变色二：浅蓝色#91f5f7
- 渐变类型：线性
- 渐变方向：38度
- 起始位置：23%
边界
接下来在边框设置中给列圆角。
- 圆角：所有角落 2vw
盒子阴影
也添加一个微妙的盒子阴影。
- 盒子阴影：第二种选择
- 盒子阴影水平位置：6px
- 盒子阴影垂直位置：-10px
- 盒子阴影模糊强度：50px
溢出
确保列的溢出也是可见的。
- 水平和垂直溢出：可见
第 2 列设置
背景
移动到第二列并添加以下渐变背景：
- 背景：渐变
- 背景渐变色一：#1ba038
- 背景渐变色二：#c6f727
- 渐变类型：线性
- 渐变方向：38度
- 起始位置：23%
边界
也为列添加一些边框半径。
- 圆角：2vw 所有四个角
盒子阴影
以及一个微妙的盒子阴影。
- 盒子阴影：第二种选择
- 盒子阴影水平位置：6px
- 盒子阴影垂直位置：-10px
- 盒子阴影模糊强度：50px
转换
这一列比其他列高一点。 为了创建这种效果，我们将调整第 2 列的变换转换设置。
- 变换翻译：
- 桌面：-8vw，y 轴
- 平板电脑 + 手机：30vw，y 轴
溢出
使该列的溢出也可见。
- 水平和垂直溢出：可见
第 3 列设置
背景
进入下一栏和最后一栏！ 添加渐变背景。
- 背景：渐变
- 背景渐变颜色一：#f0562c
- 背景渐变色二：#f1a526
- 渐变类型：线性
- 渐变方向：38度
- 起始位置：23%
边界
转到设计选项卡并为每个角添加一些边框半径。
- 圆角：所有角落 2vw。
盒子阴影
也添加一个盒子阴影。
- 盒子阴影：第二种选择
- 盒子阴影水平位置：6px
- 盒子阴影垂直位置：-10px
- 盒子阴影模糊强度：50px
转换
在较小的屏幕尺寸上，我们需要使用自定义转换转换值重新定位列。
溢出
最后，调整溢出设置。
- 水平和垂直溢出：可见
添加图像模块
上传剪切的半透明图像
完成所有列设置后，就可以添加模块了。 将图像模块添加到第 1 列并上传您选择的半透明图像。 您可以在本文开头下载的压缩文件夹中找到我们使用的图像。
浆纱
使模块全宽。
间距
接下来添加一些自定义边距和填充值。
- 最高边距：
- 桌面：-11vw
- 平板电脑 + 手机：-24vw
- 左右填充：
- 台式机：5vw
- 平板电脑+手机：20vw
悬停时变换比例
我们正在使用变换设置中的变换比例选项为图像添加微妙的悬停效果。
- 悬停时变换比例：两个轴上 120%。
Z指数
为了确保图像出现在列的顶部，我们将在高级选项卡中增加 z 索引值。
复制和拖动图像模块
现在，克隆图像模块两次，并将副本放在剩余的两列中。 在线框视图中此过程更容易。
- 首先，将图像模块复制两次
- 然后，将新的图像模块拖到第 2 列和第 3 列
- 上传不同的图片
添加文本模块
添加H3内容
在第 1 列的图像下方，添加一个文本模块并插入您选择的一些 H3 内容。
标题 3 文本
转到设计选项卡并设置 H3 文本设置的样式。
- 标题文字：H3
- H3字体：Doppio One
- H3 字体粗细：粗体
- H3对齐：中心
- H3 文字颜色：白色#ffffff
- H3 文字大小：
- 台式机：1.8vw
- 平板电脑：5vw
- 电话：6vw
复制和拖动文本模块
克隆文本模块两次，并将重复的内容放在剩余的两列中。
- 首先，将文本模块复制两次
- 然后，将它们拖到第 2 列和第 3 列中的图像模块下方
- 更改每个新文本模块中的内容
添加文本模块
添加内容
在标题模块下方，添加一个新的文本模块。 在内容框中添加一些段落内容。
文本
现在，按如下方式设置文本样式。
- 文字字体：Open Sans
- 文字颜色：白色#ffffff
- 字体大小：
- 台式机：0.6vw
- 平板电脑：2vw
- 电话：2.8vw
- 文字行高：2.2em
间距
要使文本居中，请按如下方式调整模块的间距。
- 底边距：
- 台式机：5vw
- 平板电脑+手机：10vw
- 左右填充
- 台式机：5vw
- 平板电脑+手机：14vw
复制和拖动文本模块
克隆文本模块两次并将重复项拖到剩余的两列。
- 首先，将文本模块复制两次
- 然后，将重复项放在第 2 列和第 3 列中
- 更改每个副本中的内容
添加按钮模块
添加内容
进入最后一个模块！ 使用您选择的一些副本将按钮模块添加到第 1 列。
添加链接
在模块的链接选项中插入一个链接。
结盟
现在，对齐按钮模块。
按钮样式
然后，按如下方式设置按钮样式。
- 按钮文字大小：
- 台式机：1vw
- 平板电脑：2vw
- 电话：3vw
- 按钮文字颜色：亮蓝色 #2a4eed
- 按钮背景颜色：白色#ffffff
- 按钮边框半径：50vw
- 按钮字体：Doppio One
- 按钮字体粗细：粗体
- 按钮图标颜色：亮蓝色 #2a4eed
间距
通过在间距设置中添加一些自定义边距和填充值来塑造按钮并创建底部重叠。
- 底边距：
- 桌面：-1.5vw
- 平板电脑：-4vw
- 电话：-6vw
- 顶部和底部填充：
- 台式机：1vw
- 平板电脑+手机：3vw
- 左右填充
- 台式机：4vw
- 平板电脑+手机：10vw
盒子阴影
最后但同样重要的是，为按钮添加一个微妙的框阴影。
- 盒子阴影：第一个选项
- 盒子阴影水平位置：0px
- 盒子阴影垂直位置：2px
- 盒子阴影模糊强度：50px
复制和拖动按钮模块
就像前面的模块一样，克隆按钮两次，并将重复项放在该行的剩余两列中。
- 克隆按钮模块两次
- 将重复项放在第 2 列和第 3 列中
按钮 2 文本和图标颜色
更改第 2 列中按钮模块的按钮和图标颜色。
- 按钮文字颜色：绿色#1ba038
- 图标颜色：#1ba038
按钮 3 文本和图标颜色
对最后一列中的按钮执行相同操作，您就完成了！
- 按钮文字颜色：橙色 #f0562c
- 图标颜色：#f0562c
预览
现在我们已经完成了所有步骤，让我们最终看看不同屏幕尺寸的结果。
桌面
移动的
这是一个包装
在这篇文章中，我们向您展示了如何使用半透明图像来创建漂亮的 CTA 栏设计。 我们使用 Divi 列溢出设置来使图像和按钮无缝重叠。 尝试在您的下一个 Divi 项目中使用此设计，并在评论部分告诉我们它是如何进行的！