使用 Divi 为移动设备创建无尽的水平刷卡

浏览内容几乎是每个人每天都会做的事情。 它基本上已成为第二天性，因此不用说，将它添加到您的网站可以帮助改善整体用户体验。 在这篇文章中，我们将向您展示如何创建无休止的水平刷卡，主要针对涉及触摸的移动和平板设备。 虽然这是一个移动优先的教程，但结果在桌面上也能很好地工作。 人们可以使用将包含的滚动条或使用他们的触摸板向左和向右“滑动”。

让我们开始吧！

预览

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

示例 1：一列行

桌面

移动的

示例 2：“滑动列”中的两列行 + 多个模块

桌面

移动的

方法

• 为了创建这种漂亮的效果，我们需要使用几行 CSS 代码将整个垂直列转换为水平滑动/滚动网格机制
• 将此机制使用垂直列（并将其转换为水平网格）将允许您添加任意数量的刷卡，您可以确定有多少列
• 换句话说; 您将向下添加模块，滑动/滚动机制会将下摆置于水平列中
• 对于第一个示例，我们将使用单列行
• 这将允许滑动机制占据屏幕的整个宽度
• 另一方面，第二个示例仅将两列中的一列转换为滑动/滚动机制，并使另一列保持静态
• 我们还将向您展示如何将多个模块添加到滑动/滚动机制的“列”
• 一旦你理解了这个方法，你就可以真正地创建你想要的任何类型的设计，并将它作为你可以在上面的 GIF 中看到的滑动/滚动机制的一部分
• 您可以通过转到“为 Divi 下载 10 个免费流体部分背景图像”帖子找到我们将使用的所有流体背景图像

订阅我们的 YouTube 频道

重新创建示例 #1

添加新部分

让我们开始创建第一个示例！ 向您正在处理的页面添加一个新部分。

添加新行

列结构

然后，添加一行一列。 我们将把整个列变成滑动/滚动机制。

浆纱

尚未添加任何模块，打开行设置并转到大小设置。 在这里，我们将删除部分、行和列之间的所有空间。 换句话说，该列将占据屏幕的整个宽度。

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

列 CSS 代码

如前所述，我们将列本身变成了滑动/滚动网格机制。 为此，我们需要三行自定义 CSS 代码，您可以在下面找到这些代码。 继续将这些添加到行的高级选项卡中的列主要元素。

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 70%);

第一行 CSS 代码启用滚动/滑动。 第二行将列变成水平网格。 第三行 CSS 代码定义了网格。 我们基本上是说我们想要 6 列，每列的宽度为 70%。 根据您希望在滑动/滚动机制中显示的刷卡数量，您必须修改这些值。 因此，假设您希望 10 个不同的刷卡成为机制的一部分，并且您希望将每列的宽度增加到 90%，则必须使用以下 CSS 代码行：

grid-template-columns: repeat(10, 90%);

将 CTA 模块添加到第 1 列

添加内容

完成修改行设置后，继续向列添加 CTA 模块。 添加一些您选择的内容。

关联

您还需要添加按钮链接 URL 以使按钮显示在模块中。

渐变背景

继续添加渐变背景。

• 颜色 1：#802bff
• 颜色 2：#001519

背景图片

在这篇文章的方法部分，我们提到我们将使用流体背景图像，您可以通过转到这篇文章免费下载。 下载流体背景图像后，搜索“ fluid-style-2.png ”图像文件并将其上传到背景图像选项卡。 相应地修改背景图像设置：

• 背景图片尺寸：适合
• 背景图片位置：中心
• 背景图像重复：不重复
• 背景图像混合：叠加

文字设置

转到设计选项卡并确保应用以下文本设置：

• 文字方向：居中
• 文字颜色：浅

标题文字设置

接下来修改标题文本设置。

• 标题字体：Didact Gothic
• 标题字体粗细：粗体
• 标题文字大小：1vw（桌面）、2.5vw（平板电脑）、4vw（手机）
• 标题行高度：1.9em

正文设置

随着正文文本设置。

• 正文字体：Open Sans
• 正文大小：0.6vw（桌面）、1.3vw（平板电脑）、2.5vw（手机）
• 机身线高：2.6em（台式机和平板电脑），2.1em（手机）

按钮设置

我们也在更改此模块中按钮的外观。

• 为按钮使用自定义样式：是
• 按钮文字大小：0.9vw（桌面）、2.1vw（平板电脑）、3.5vw（手机）
• 按钮文字颜色：#000000
• 按钮背景颜色：#ffffff
• 按钮边框宽度：10px
• 按钮边框颜色：#ffffff
• 按钮字体：Didact Gothic

浆纱

在大小设置中稍微减小 CTA 模块的宽度也很重要。 这将确保此模块与滑动/滚动机制中的下一个模块之间始终存在间隙。

• 宽度：95%
• 模块对齐：居中

间距

当然，我们希望在所有不同的屏幕尺寸下一切都看起来很棒。 这就是我们将在间距设置中添加各种自定义填充值的原因。

• 上边距：50px
• 下边距：50px
• 顶部填充：12vw（桌面）、5vw（平板电脑）、14vw（手机）
• 底部填充：12vw（桌面）、5vw（平板电脑）、14vw（手机）
• 左填充：20vw（桌面）、3vw（平板电脑）、8vw（手机）
• 右填充：20vw（桌面）、3vw（平板电脑）、8vw（手机）

边界

最后但并非最不重要的一点是，我们还在模块的每个角落添加了“20px”。

根据需要多次克隆 CTA 模块

完成自定义 CTA 模块后，您可以继续克隆该模块，次数不限。

更改副本 1 的渐变背景和背景图像

更改第一个副本的渐变背景。

• 颜色 1：#7a010d
• 颜色 2：#001519

并改用“ fluid-style-9.png ”背景图像。

• 背景图片尺寸：封面
• 背景图片位置：中心
• 背景图像重复：不重复
• 背景图像混合：叠加

更改副本 2 的渐变背景和背景图像

接下来更改第二个副本的渐变背景。

• 颜色 1：#26ccff
• 颜色 2：#001519

上传“fluid-style-10a.png”图像文件作为背景图像。

• 背景图片尺寸：适合
• 背景图片位置：左上角
• 背景图像重复：不重复
• 背景图像混合：叠加

更改副本 3 的渐变背景和背景图像

更改第三个副本的渐变背景。

• 颜色 1：#ff21b8
• 颜色 2：#001519

上传“ fluid-style-6.png ”背景图片。

• 背景图片尺寸：适合
• 背景图片位置：中心
• 背景图像重复：不重复
• 背景图像混合：叠加

更改副本 4 的渐变背景和背景图像

更改第四个副本的渐变背景。

• 颜色 1：#4400aa
• 颜色 2：#001519

使用“ fluid-style-4.png ”作为背景图片。

• 背景图片尺寸：适合
• 背景图片位置：中心
• 背景图像重复：不重复
• 背景图像混合：叠加

更改重复 5 的渐变背景和背景图像

更改最后一个副本的渐变背景。

• 颜色 1：#ff2626
• 颜色 2：#001519

使用“ fluid-style-7.png ”作为背景图片。

• 背景图片尺寸：适合
• 背景图片位置：右上角
• 背景图像重复：不重复
• 背景图像混合：叠加

将列 CSS 调整为模块数

我们之前已经提到过这一点，但要再次确保 CSS 代码与您在专栏中拥有的模块数量相匹配。

滚动条样式

将 CSS 类添加到列

您还可以设置此滑动/滚动网格机制随附的滚动条的样式。 将以下 CSS 类添加到您的列中：

• 列 CSS 类：swipe-scrollbar

将自定义 CSS 添加到页面设置

然后，打开页面设置，转到高级选项卡并添加以下自定义 CSS 代码：

.swipe-scrollbar::-webkit-scrollbar {
width: 10px;
}
.swipe-scrollbar::-webkit-scrollbar-track {
background: #fff;
}
.swipe-scrollbar::-webkit-scrollbar-thumb {
background: #333;
border-radius: 50px;
}

重新创建示例 #2

克隆上一节

继续下一个例子！ 克隆您在本文前一部分中创建的部分。

更改 CTA 间距设置

然后，更改第一个 CTA 模块的间距设置。

• 上边距：50px
• 下边距：50px
• 顶部填充：5vw（台式机和平板电脑），14vw（手机）
• 底部填充：5vw（台式机和平板电脑），14vw（手机）
• 左填充：4vw（桌面）、3vw（平板电脑）、8vw（手机）
• 右填充：4vw（桌面）、3vw（平板电脑）、8vw（手机）

将间距设置扩展到列中的所有模块

通过右键单击并单击“扩展间距样式”来扩展这些新的间距设置。

• 至：所有号召性用语
• 全文：本专栏

更改列结构

继续更改行的列结构。

将模块移动到第二列

并将每个模块放在第二列中。

将 CSS 移动到第二列并更改值

由于我们已将模块从一列移至另一列，因此我们还需要对 CSS 代码执行相同的操作。 将 CSS 类添加到第 2 列。

• 第 2 列 CSS 类：swipe-scrollbar

将 CSS 代码行放在第 2 列主要元素中。 我们还将每列的宽度更改为“80%”。

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 80%);

将标题文本模块添加到第 1 列

添加内容

继续向第一列添加一个新的文本模块。 添加一些您选择的 H2 含量。

标题文字设置

转到设计选项卡并修改 H2 文本设置。

• 标题 2 字体：Didact Gothic
• 标题 2 字体粗细：粗体
• 标题 2 文本对齐：居中
• 标题 2 文字大小：2.5vw（桌面）、5vw（平板电脑）、6vw（手机）

间距

添加一些自定义上边距。

• 上边距：100px

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

能见度

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

• 显示分隔线：是

颜色

接下来更改分隔线颜色。

• 颜色：#333333

浆纱

随着尺寸设置。

• 分隔线重量：7px
• 高度：0px
• 宽度：10%
• 模块对齐：居中

间距

通过在不同的屏幕尺寸上添加一些自定义上边距来完成分隔器模块。

• 上边距：1.8vw（桌面）、2.5vw（平板电脑）、4vw（手机）

将正文模块添加到第 1 列

添加内容

第一列中我们需要的下一个也是最后一个模块是描述文本模块。 添加一些选择的内容。

文字设置

继续更改设计选项卡中的文本设置。

• 文字字体：Open Sans
• 文字大小：0.7vw（桌面）、1.6vw（平板电脑）、2.3vw（手机）

浆纱

也修改大小设置。

• 宽度：43%（桌面）、68%（平板）、70%（手机）
• 模块对齐：居中

间距

并添加一些自定义的顶部和底部边距。

• 上边距：50px
• 下边距：50px

切换到线框视图

修改完第 1 列中的所有模块后，继续并切换到线框视图。

将文本模块添加到第 2 列的顶部

在这里，我们将在第二列的顶部添加一个文本模块。 我们添加的 CSS 代码帮助我们创建了 6 个不同的列。 这意味着，如果您希望在这 6 列中的每一列中显示两个不同的模块，则总共需要有 12 个模块。 模块放置水平发生，因此第 2 列中的前 5 个模块将彼此相邻显示。 然后，该机制将切换到另一行并添加剩余的 6 个模块。

添加内容

打开您在第二列顶部添加的新文本模块并添加一些选择的内容。

文字设置

然后，转到设计选项卡并修改文本设置。

• 文字字体：Didact Gothic
• 文字字体粗细：粗体
• 文字颜色：#000000
• 文字大小：1.1vw（桌面）、3vw（平板电脑）、3.5vw（手机）

克隆文本模块 5x

继续克隆这个文本模块 5 次。 现在，您将拥有 6 个不同的文本模块，这也等于我们拥有的 CTA 模块的数量。 因此，如果您改用 10 个 CTA 模块，则需要添加 10 个文本模块（或任何其他模块）以平衡列结构。

更改重复内容

更改每个副本的内容以匹配将出现在其下方的 CTA 模块，您就完成了！

预览

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

示例 1：一列行

桌面

移动的

示例 1：“滑动列”中的两列行 + 多个模块

桌面

移动的

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 创建无限的水平刷卡。 创建这些刷卡不仅可以帮助您为网站添加额外的维度，还可以帮助访问者无缝浏览您网站提供的所有内容。 如果您有任何问题或建议，请务必在下方评论区留言！