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

已发表: 2019-08-31

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

让我们开始吧。

预览

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

桌面

列滑动 CTA

移动的

列滑动 CTA

免费下载英雄章节

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

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

您已成功订阅。请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

订阅我们的 YouTube 频道

让我们开始重建吧！

添加新部分

渐变背景

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

颜色 1：#ffffff
颜色 2：#f5ede5
梯度方向：90度
起始位置：17%
结束位置：17%

列滑动 CTA

间距

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

顶部填充：5vw（桌面）、10vw（平板电脑）、13vw（手机）
底部填充：5vw（桌面）、10vw（平板电脑）、13vw（手机）

列滑动 CTA

添加第 1 行

列结构

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

列滑动 CTA

背景颜色

在不添加任何模块的情况下，打开行设置并更改背景颜色。

背景颜色：#fff6ed

列滑动 CTA

浆纱

移至设计选项卡并更改行的大小设置。

使用自定义装订线宽度：是
天沟宽度：1
宽度：60vw（桌面），100%（平板电脑和手机）
最大宽度：100%
行对齐：右

列滑动 CTA

间距

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

顶部填充：6vw
底部填充：6vw
左填充：5.5vw
右填充：24vw

列滑动 CTA

边界

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

左边框宽度：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

背景图片

连同背景图片。

背景图片尺寸：封面
背景图片位置：中心
背景图像重复：不重复

列滑动 CTA

间距

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

顶部填充：4vw（桌面）、10vw（平板电脑）、12vw（手机）
底部填充：4vw（桌面）、10vw（平板电脑）、12vw（手机）
左填充：2vw（桌面）、5vw（平板电脑）、7vw（手机）
右填充：2vw（桌面）、5vw（平板电脑）、7vw（手机）

列滑动 CTA

边界

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

列滑动 CTA

主要元素

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

width: 100% !important;

列滑动 CTA

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

添加H3内容

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

列滑动 CTA

H3 文本设置

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

标题 3 字体：Poppins
标题 3 字体粗细：轻
标题 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

间距

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

顶部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）
底部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）
左填充：3vw（桌面）、5vw（平板电脑）、7vw（手机）
右填充：3vw（桌面）、5vw（平板电脑）、7vw（手机）

列滑动 CTA

将分频器模块添加到第 1 列

能见度

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

显示分隔线：是

列滑动 CTA

线

移至设计选项卡并更改线条颜色。

线条颜色：#f5ede5

列滑动 CTA

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

添加内容

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

列滑动 CTA

文字设置

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

文字字体： Poppins
文字字体粗细：轻
文字颜色：#f5ede5
文字大小：0.8vw（桌面）、1.9vw（平板电脑）、2.8vw（手机）
文本行高：2.3em

列滑动 CTA

间距

添加一些上边距。

最高利润率：2vw

列滑动 CTA

最多可克隆列 5 次并重复用于其他 CTA

完成第一列及其中的所有模块后，您最多可以克隆整列 5 次，具体取决于要显示的列刷卡 CTA 卡片的数量。确保您更改了每列副本的所有副本以及按钮链接。

列滑动 CTA

添加第 2 行

列结构

到第二排！我们将使用这一行与前一行创建重叠。选择以下列结构：

列滑动 CTA

浆纱

尚未添加任何模块，打开行设置并相应地调整大小设置：

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

列滑动 CTA

间距

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

顶部填充：0px
底部填充：0px

列滑动 CTA