WordPress divi主题

为 Divi 下载免费的 CTA 列滑动英雄部分设计

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

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

您页面的英雄部分值得所有关注。 有无数种方法可以为您的英雄部分设置样式,具体取决于您的网站内容和目标受众的行为方式。 对于某些网站,放置多列 CTA 卡片会派上用场,而不会产生压倒性的体验。 一个很好的方法是创建列刷 CTA 卡。 在今天的 Divi 教程中,我们将向您展示如何从头开始创建一个令人惊叹的设计来解决此技术。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

列滑动 CTA

移动的

列滑动 CTA

免费下载英雄章节

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

订阅我们的 Youtube 频道

让我们开始重建吧!

添加新部分

渐变背景

向您正在处理的页面添加一个新部分,打开部分设置并插入渐变背景。

  • 颜色1:#ffffff
  • 颜色 2:#f5ede5
  • 渐变方向:90度
  • 起始位置:17%
  • 结束位置:17%

列滑动 CTA

WordPress divi主题

间距

转到设计选项卡并在不同的屏幕尺寸上添加一些自定义顶部和底部填充。

  • 顶部填充:5vw(桌面)、10vw(平板电脑)、13vw(手机)
  • 底部填充:5vw(桌面)、10vw(平板电脑)、13vw(手机)

列滑动 CTA

添加第 1 行

立柱结构

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

列滑动 CTA

背景颜色

尚未添加任何模块,打开行设置并更改背景颜色。

  • 背景颜色:#fff6ed

列滑动 CTA

浆纱

转到设计选项卡并更改行的大小设置。

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:60vw(桌面),100%(平板电脑和手机)
  • 最大宽度:100%
  • 行对齐:右

列滑动 CTA

间距

我们还在间距设置中添加了一些自定义填充值。

  • 顶部填充:6vw
  • 底部填充:6vw
  • 左填充:5.5vw
  • 右填充:24vw

列滑动 CTA

fiverr建站WordPress程序员

边界

接下来转到边框设置并使用以下设置添加左边框:

  • 左边框宽度:6px
  • 左边框颜色:#FFFFFF

列滑动 CTA

盒子阴影

添加一个微妙的盒子阴影以在英雄部分创建深度。

  • 盒子阴影模糊强度:100px
  • 阴影颜色:rgba(0,0,0,0.22)

列滑动 CTA

CSS 类

并在高级选项卡中使用 CSS 类。 稍后在这篇文章中,我们将使用这个 CSS 类来隐藏滚动条。

独立站选品工具
  • CSS 类:滑动滚动条

列滑动 CTA

主要元素

要创建水平滚动/滑动,我们需要水平放置列。 我们将通过在行的主要元素中添加一些自定义 CSS 代码来做到这一点。

display: grid;
grid-template-columns: repeat(6, 100%);
grid-column-gap: 2vw;

列滑动 CTA

溢出

转到可见性设置并更改行的溢出。

  • 水平溢出:滚动
  • 垂直溢出:隐藏

列滑动 CTA

高质量外链购买

列设置

完成行设置后,您可以打开第一列的设置。

列滑动 CTA

渐变背景

添加渐变背景。

  • 颜色1:rgba(245,237,229,0.91)
  • 颜色2:rgba(219,34,65,0.84)
  • 起始位置:35%
  • 结束位置:81%
  • 在背景图像上方放置渐变:是

列滑动 CTA

背景图片

连同背景图像。

JasperAI 10000字免费额度试用
  • 背景图片尺寸:封面
  • 背景图像位置:中心
  • 背景图像重复:无重复

列滑动 CTA

间距

转到设计选项卡并在不同的屏幕尺寸上添加一些自定义填充值。

  • 顶部填充:4vw(桌面)、10vw(平板电脑)、12vw(手机)
  • 底部填充:4vw(桌面)、10vw(平板电脑)、12vw(手机)
  • 左填充:2vw(桌面)、5vw(平板电脑)、7vw(手机)
  • 右填充:2vw(桌面)、5vw(平板电脑)、7vw(手机)

列滑动 CTA

边界

继续为边框设置中的每个角添加“20px”边框​​半径。

列滑动 CTA

WordPress备份工具updrafplus

主要元素

完成这项工作的另一个重要部分是在列的主要元素中添加一行 CSS 代码。

width: 100% !important;

列滑动 CTA

将文本模块 #1 添加到第 1 列

添加H3内容

是时候开始添加模块了! 您可以根据需要添加任意数量的模块,并根据自己的喜好设置它们的样式。 但是,如果您想重新创建与本文预览中共享的完全相同的示例,请从文本模块开始并插入一些 H3 内容。

列滑动 CTA

H3 文字设置

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

  • 标题 3 字体:Poppins
  • 标题 3 字体粗细:Light
  • 标题 3 文本颜色:#e92640
  • 标题 3 文本大小:1.5vw(桌面)、3.5vw(平板电脑)、4.5vw(手机)

列滑动 CTA

将文本模块 #2 添加到第 1 列

添加内容

我们需要的下一个模块是另一个文本模块。 输入您选择的一些段落内容。

列滑动 CTA

文字设置

接下来转到文本设置并进行一些更改。

  • 文字字体:Poppins
  • 文字字体粗细:轻
  • 文字颜色:#e92640
  • 文字大小:0.8vw(桌面)、1.9vw(平板电脑)、2.8vw(手机)

列滑动 CTA

间距

我们还添加了一些底部边距以在我们的列刷卡中创建空间。

  • 底边距:18vw(台式机)、30vw(平板电脑)、42vw(手机)

列滑动 CTA

将按钮模块添加到第 1 列

添加副本

进入下一个模块,即按钮模块。 输入您选择的一些副本。

列滑动 CTA

按钮设置

转到设计选项卡并相应地更改按钮设置:

  • 为按钮使用自定义样式:是
  • 按钮文字大小:0.8vw(桌面)、1.8vw(平板电脑)、2.5vw(手机)
  • 按钮文本颜色:#f5ede5
  • 按钮边框宽度:1px
  • 按钮边框颜色:#f5ede5
  • 按钮边框半径:5px
  • 按钮字体:Poppins

列滑动 CTA

列滑动 CTA

间距

通过在不同的屏幕尺寸上添加一些自定义填充值来增加按钮的尺寸。

  • 顶部填充:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 底部填充:1vw(桌面)、2vw(平板电脑)、3vw(手机)
  • 左填充:3vw(桌面)、5vw(平板电脑)、7vw(手机)
  • 右填充:3vw(桌面)、5vw(平板电脑)、7vw(手机)

列滑动 CTA

将分隔模块添加到第 1 列

能见度

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

列滑动 CTA

线

转到设计选项卡并更改线条颜色。

列滑动 CTA

将文本模块 #3 添加到第 1 列

添加内容

本专栏中我们需要的下一个也是最后一个模块是另一个文本模块。 输入您选择的一些段落内容。

列滑动 CTA

文字设置

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

  • 文字字体:Poppins
  • 文字字体粗细:轻
  • 文字颜色:#f5ede5
  • 文字大小:0.8vw(桌面)、1.9vw(平板电脑)、2.8vw(手机)
  • 文字行高:2.3em

列滑动 CTA

间距

还要添加一些上边距。

列滑动 CTA

最多可克隆 5 次色谱柱并重复用于其他 CTA

完成第一列和其中的所有模块后,您最多可以克隆整个列 5 次,具体取决于您要显示多少列滑动 CTA 卡。 确保更改每列重复的所有副本以及按钮链接。

列滑动 CTA

添加第 2 行

立柱结构

上第二排! 我们将使用这一行来创建与前一行的重叠。 选择以下列结构:

列滑动 CTA

浆纱

在不添加任何模块的情况下,打开行设置并相应地调整大小设置:

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%

列滑动 CTA

间距

稍后在帖子中,我们将添加我们需要的模块并创建一个负顶部重叠,使模块看起来像是第一行的一部分。 这意味着我们根本不需要第二行来占用我们设计中的任何空间。 这就是为什么我们要删除所有默认的顶行和底行填充。

  • 顶部填充:0px
  • 底部填充:0px

列滑动 CTA

将文本模块 #1 添加到第 1 列

添加H1内容

是时候开始添加模块了! 从第一个文本模块开始,然后输入您选择的一些 H1 内容。

列滑动 CTA

H1 文字设置

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

  • 标题字体:Poppins
  • 标题文字颜色:#e92741
  • 标题文字大小:3vw(桌面)、5vw(平板电脑)、7vw(手机)

列滑动 CTA

间距

接下来添加一些边距值。

  • 最高边距:-35vw(台式机)、7vw(平板电脑)、10vw(手机)
  • 左边距:5vw
  • 右边距:12vw

列滑动 CTA

将文本模块 #2 添加到第 1 列

添加内容

我们需要的第二个模块是另一个文本模块。 输入您选择的一些段落内容。

列滑动 CTA

文字设置

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

  • 文字字体:Poppins
  • 文字字体粗细:轻
  • 文字颜色:#e92741
  • 文字大小:0.8vw(桌面)、1.9vw(平板电脑)、2.8vw(手机)
  • 文字行高:2.8em

列滑动 CTA

间距

我们也在向文本模块添加一些自定义边距值。

  • 上边距:2vw(台式机)、7vw(平板电脑)、10vw(手机)
  • 底部边距:2vw(桌面)、7vw(平板电脑)、10vw(手机)
  • 左边距:5vw
  • 右边距:13vw(桌面),5vw(平板电脑和手机)

列滑动 CTA

将按钮模块添加到第 1 列

添加副本

我们需要的下一个模块是按钮模块。 输入您选择的一些副本。

列滑动 CTA

按钮设置

然后,转到设计选项卡并设置按钮样式。

  • 为按钮使用自定义样式:是
  • 按钮文字大小:0.9vw
  • 按钮文本颜色:#e92741
  • 按钮背景颜色:#f5ede5
  • 按钮边框宽度:0px
  • 按钮边框半径:5px
  • 按钮字体:Poppins

列滑动 CTA

列滑动 CTA

间距

我们还通过添加一些自定义间距值来增加按钮的大小。

  • 最高边距:2vw
  • 左边距:5vw
  • 顶部填充:1.5vw(台式机)、2.5vw(平板电脑)、3vw(手机)
  • 底部填充:1.5vw(台式机)、2.5vw(平板电脑)、3vw(手机)
  • 左填充:6vw(桌面)、9vw(平板电脑)、15vw(手机)
  • 右填充:6vw(桌面)、9vw(平板电脑)、15vw(手机)

列滑动 CTA

盒子阴影

通过添加一个微妙的框阴影来完成按钮模块设计。

  • 盒子阴影垂直位置:20px
  • 盒子阴影模糊强度:50px
  • 盒子阴影传播强度:-5px
  • 阴影颜色:rgba(0,0,0,0.19)

列滑动 CTA

预览

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

桌面

列滑动 CTA

移动的

列滑动 CTA

最后的想法

在这篇文章中,我们免费分享了一个漂亮的专栏滑动英雄部分,我们还向您展示了如何从头开始重新创建它。 这是在您的英雄部分展示多张 CTA 卡的好方法,而不会让设计看起来过于压倒性。 我们希望您喜欢本教程,如果您有任何问题或建议,请确保将它们留在下面的评论部分!

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

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