WordPress divi主题

使用透明图像创建漂亮的 CTA 列与 Divi 重叠

by | May 10, 2022 | Divi主题使用教程 | 0 comments

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

CTA 在视觉上越吸引人,获得更好转化率的机会就越大。 有很多方法可以设计您的 CTA,但在这篇文章中,我们将向您展示如何使用半透明图像和列重叠创建漂亮的 CTA 列设计。 您可以在下面的下载文件夹中找到半透明图像,但可以随意使用其他图像。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

transp-预览-桌面

移动的

透明手机

免费下载 CTA 列布局

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

订阅我们的 Youtube 频道

让我们开始重建吧!

添加新部分

背景

首先创建一个新页面或将新的常规部分添加到现有页面。 然后,进入部分设置并添加渐变背景。

  • 背景:渐变
  • 背景渐变颜色一:非常浅的灰色#efefef
  • 背景渐变色二:白色#ffffff
  • 渐变类型:径向
  • 径向:中心
  • 起始位置:52%
  • 结束位置:50%

部分设置背景

WordPress divi主题

间距

转到设计选项卡并在间距设置中调整填充。

  • 顶部和底部填充
  • 底部填充

填充部分设置

添加新行

立柱结构

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

首先添加一列行

浆纱

然后,调整行的宽度和最大宽度。

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

行大小 100%

添加文本模块

添加 H2 和文本内容

是时候添加模块了! 首先,添加一个文本模块并插入一些您选择的 H2 和段落内容。

添加文本模块农场一天

文本

转到设计选项卡并按如下方式设置文本样式:

  • 文字字体:Open Sans
  • 文本对齐:居中
  • 文字颜色:绿色#5bba1b
  • 字体大小:
    • 台式机:1.2vw
    • 平板电脑:2.8vw
    • 电话:3.6vw
  • 文字字母间距:0.2vw
  • 文字行高:1.8em

文字设置参观我们的农场

fiverr建站WordPress程序员

标题 2 文本

在为段落文本设置样式后,也为 H2 文本设置样式。

  • 标题:H2
  • H2 字体粗细:Doppio One
  • H2 文本对齐:居中
  • H2 文字颜色:深灰色 #3d3d3d
  • H2 文字大小:
    • 台式机:4.4vw
    • 平板电脑:5.9vw
    • 电话:6.9vw

农场一天标题 2 tex 设置

间距

并添加一些顶部填充。

文本模块的顶部填充

添加分频器模块

能见度

在文本模块下方,添加一个分隔模块并将可见性设置为“是”。

独立站选品工具

在文本下方添加分隔线

线

接下来更改分隔线颜色。

  • 线条颜色:深灰色 #545454

为分隔线着色

浆纱

现在,调整分隔线的大小,使其看起来更小。

  • 分隔线重量:4px
  • 宽度:9%
  • 模块对齐:中心

缩短分隔线

高质量外链购买

间距

也添加一些负上边距。

  • 最高边距:
    • 桌面:-40px
    • 平板电脑+手机:-15px

调整分隔线的边距

添加新行

立柱结构

继续添加具有三个相同大小列的新行。 这将是 CTA 列设计的基础。

3列行

背景

在添加任何模块之前,在行设置的背景中添加渐变。

JasperAI 10000字免费额度试用
  • 背景:渐变
  • 背景颜色渐变一:白色#ffffff
  • 背景色渐变二:透明
  • 渐变类型:径向
  • 径向中心
  • 起始位置:42%
  • 结束位置:50%

为行添加背景

浆纱

现在,调整行的大小。

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

调整行的大小

间距

接下来转到间距设置并添加一些自定义填充值。

  • 顶部填充:22vw
  • 底部填充:10vw
  • 左右填充:10vw

WordPress备份工具updrafplus

第 1 列设置

背景

继续打开第 1 列设置并添加渐变背景。

  • 背景:渐变
  • 背景渐变色一:蓝色#2a4eed
  • 背景渐变色二:浅蓝色#91f5f7
  • 渐变类型:线性
  • 渐变方向:38度
  • 起始位置:23%

第 1 栏背景

边界

接下来在边框设置中给列圆角。

  • 圆角:所有角落 2vw

列边框设置

盒子阴影

也添加一个微妙的盒子阴影。

  • 盒子阴影:第二种选择
  • 盒子阴影水平位置:6px
  • 盒子阴影垂直位置:-10px
  • 盒子阴影模糊强度:50px

柱箱阴影

溢出

确保列的溢出也是可见的。

  • 水平和垂直溢出:可见

调整列溢出

第 2 列设置

背景

移动到第二列并添加以下渐变背景:

  • 背景:渐变
  • 背景渐变色一:#1ba038
  • 背景渐变色二:#c6f727
  • 渐变类型:线性
  • 渐变方向:38度
  • 起始位置:23%

绿柱背景

边界

也为列添加一些边框半径。

  • 圆角:2vw 所有四个角

圆角

盒子阴影

以及一个微妙的盒子阴影。

  • 盒子阴影:第二种选择
  • 盒子阴影水平位置:6px
  • 盒子阴影垂直位置:-10px
  • 盒子阴影模糊强度:50px

箱影柱 2

转换

这一列比其他列高一点。 为了创建这种效果,我们将调整第 2 列的变换转换设置。

  • 变换翻译:
    • 桌面:-8vw,y 轴
    • 平板电脑 + 手机:30vw,y 轴

转换转换第 2 列

溢出

使该列的溢出也可见。

  • 水平和垂直溢出:可见

第 2 列的可见性

第 3 列设置

背景

进入下一栏和最后一栏! 添加渐变背景。

  • 背景:渐变
  • 背景渐变颜色一:#f0562c
  • 背景渐变色二:#f1a526
  • 渐变类型:线性
  • 渐变方向:38度
  • 起始位置:23%

橙色背景列 3

边界

转到设计选项卡并为每个角添加一些边框半径。

  • 圆角:所有角落 2vw。

圆角

盒子阴影

也添加一个盒子阴影。

  • 盒子阴影:第二种选择
  • 盒子阴影水平位置:6px
  • 盒子阴影垂直位置:-10px
  • 盒子阴影模糊强度:50px

箱影柱 3

转换

在较小的屏幕尺寸上,我们需要使用自定义转换转换值重新定位列。

60vw 边距

溢出

最后,调整溢出设置。

  • 水平和垂直溢出:可见

可见溢出

添加图像模块

上传剪切的半透明图像

完成所有列设置后,就可以添加模块了。 将图像模块添加到第 1 列并上传您选择的半透明图像。 您可以在本文开头下载的压缩文件夹中找到我们使用的图像。

添加图像

浆纱

使模块全宽。

使图像全宽1

间距

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

  • 最高边距:
    • 桌面:-11vw
    • 平板电脑 + 手机:-24vw
  • 左右填充:
    • 台式机:5vw
    • 平板电脑+手机:20vw

图像上的边距和填充

悬停时变换比例

我们正在使用变换设置中的变换比例选项为图像添加微妙的悬停效果。

  • 悬停时变换比例:两个轴上 120%。

悬停变换

Z指数

为了确保图像出现在列的顶部,我们将在高级选项卡中增加 z 索引值。

能见度

复制和拖动图像模块

现在,克隆图像模块两次,并将副本放在剩余的两列中。 在线框视图中此过程更容易。

  • 首先,将图像模块复制两次
  • 然后,将新的图像模块拖到第 2 列和第 3 列
  • 上传不同的图片

二重奏和拖动

添加文本模块

添加H3内容

在第 1 列的图像下方,添加一个文本模块并插入您选择的一些 H3 内容。

H3标题

标题 3 文本

转到设计选项卡并设置 H3 文本设置的样式。

  • 标题文字:H3
  • H3字体:Doppio One
  • H3 字体粗细:粗体
  • H3对齐:中心
  • H3 文字颜色:白色#ffffff
  • H3 文字大小:
    • 台式机:1.8vw
    • 平板电脑:5vw
    • 电话:6vw

H3 样式

复制和拖动文本模块

克隆文本模块两次,并将重复的内容放在剩余的两列中。

  • 首先,将文本模块复制两次
  • 然后,将它们拖到第 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

按钮样式 2

间距

通过在间距设置中添加一些自定义边距和填充值来塑造按钮并创建底部重叠。

  • 底边距:
    • 桌面:-1.5vw
    • 平板电脑:-4vw
    • 电话:-6vw
  • 顶部和底部填充:
    • 台式机:1vw
    • 平板电脑+手机:3vw
  • 左右填充
    • 台式机:4vw
    • 平板电脑+手机:10vw

间距按钮

盒子阴影

最后但同样重要的是,为按钮添加一个微妙的框阴影。

  • 盒子阴影:第一个选项
  • 盒子阴影水平位置:0px
  • 盒子阴影垂直位置:2px
  • 盒子阴影模糊强度:50px

框阴影按钮

复制和拖动按钮模块

就像前面的模块一样,克隆按钮两次,并将重复项放在该行的剩余两列中。

  • 克隆按钮模块两次
  • 将重复项放在第 2 列和第 3 列中

dup 和拖动按钮

按钮 2 文本和图标颜色

更改第 2 列中按钮模块的按钮和图标颜色。

  • 按钮文字颜色:绿色#1ba038
  • 图标颜色:#1ba038

绿色按钮

按钮图标颜色

按钮 3 文本和图标颜色

对最后一列中的按钮执行相同操作,您就完成了!

  • 按钮文字颜色:橙色 #f0562c
  • 图标颜色:#f0562c

橙色按钮文本

按钮颜色橙色

预览

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

桌面

transp-预览-桌面

移动的

透明手机

这是一个包装

在这篇文章中,我们向您展示了如何使用半透明图像来创建漂亮的 CTA 栏设计。 我们使用 Divi 列溢出设置来使图像和按钮无缝重叠。 尝试在您的下一个 Divi 项目中使用此设计,并在评论部分告诉我们它是如何进行的!