如何使用 Divi 的滑块模块创建移动演练（免费下载！）
已发表: 2019-03-10滑块在网页设计中一直非常流行。 它们最大的优势之一是访问者可以在移动设备上滑动浏览。 如今，滑动是新的点击方式，因此不用说，包含滑块可以帮助改善访问者在您网站上的移动用户体验。 使用 Divi 构建网站时，您可以轻松地将滑块模块添加到您正在处理的任何行或部分。 通过一点创造力和实验，您可以获得令人惊叹的网页设计。
您可以做的一件事是使用滑块模块创建移动演练。 您可以根据需要添加任意数量的幻灯片，并且该演练在台式机和平板电脑上看起来同样出色，尽管它最初是为移动设备设计的。 在这篇文章中，我们将从头开始重新创建一个令人惊叹的示例，并在其末尾提供下载部分。
让我们开始吧！
预览
在我们深入学习本教程之前，让我们快速浏览一下我们将在不同屏幕尺寸上重新创建的结果。
静止的
动图
让我们开始重建吧！
如何使用 Divi 的滑块模块创建移动演练
订阅我们的 YouTube 频道
添加新部分
间距
让我们开始创作吧！ 添加新页面或打开现有页面并向其添加新的常规部分。 打开部分设置并添加一些匹配不同屏幕尺寸的自定义填充值。
- 顶部填充：4vw（桌面）、5vw（平板电脑）、3vw（手机）
- 底部填充：4vw（桌面）、5vw（平板电脑）、3vw（手机）
- 左填充：30vw（桌面）、18vw（平板电脑）、3vw（手机）
- 右填充：30vw（桌面）、18vw（平板电脑）、3vw（手机）
添加新行
列结构
继续使用以下列结构向该部分添加新行：
渐变背景
尚未添加任何模块，打开行设置并添加径向渐变背景。
- 颜色 1：#f9f9f9
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：顶部
- 起始位置：40%
- 结束位置：40%
浆纱
继续转到行的大小设置并删除列之间的所有空间。
- 使这一行全宽：是
- 使用自定义装订线宽度：是
- 天沟宽度：1
间距
我们还在行中添加了一些底部填充。
- 底部填充：30px
边界
接下来，为边框设置中的每个角添加“20px”。
盒子阴影
最后但并非最不重要的一点是，向行添加一个微妙的框阴影以在页面上创建一些深度。
- 框阴影模糊强度：80px
- 阴影颜色：rgba(0,0,0,0.07)
添加滑块模块
更改背景颜色
完成修改行设置后，您可以继续添加滑块模块。 打开模块的设置并修改背景颜色。 您在设计选项卡中所做的所有更改将自动应用于您之后添加的所有幻灯片。
- 背景颜色：rgba(255,255,255,0)
文字设置
然后，转到设计选项卡并更改文本设置。
- 文字方向：居中
- 阴影颜色：rgba(0,0,0,0)
正文设置
接下来修改正文设置。
- 正文字体：默认（Open Sans）
- 正文大小：0.6vw（桌面）、1.5vw（平板电脑）、2.4vw（手机）
- 机身线高：2.2em（桌面）、2.3em（平板）、2.4em（手机）
间距
也添加一些自定义的顶部和底部填充。
- 顶部填充：2vw
- 底部填充：2vw
按钮自定义 CSS
我们还需要特别为滑块模块的按钮添加一些自定义填充和边距值。 由于此元素与每张幻灯片中的不同元素组合在一起，因此您必须使用高级选项卡中的 CSS 代码手动添加内边距和边距。
padding-left: 80px; padding-right: 80px; padding-top: 8px; padding-bottom: 8px; margin-bottom: 80px;
删除活动滑块
完成所有常规幻灯片设置的修改后，您可以继续删除已经存在的活动幻灯片。 我们将在文章的下一部分中从头开始创建一个，而不是使用这些。 这将帮助我们更快地修改和自定义所有内容。
自定义第一张幻灯片
自定义内容框中的内容
将新幻灯片添加到滑块模块并开始自定义内容框中的内容。 在下面的打印屏幕中，您会注意到我们将图像添加到内容框而不是图像设置。 这将允许我们将图像放置在书面内容上方。 您可以通过转到 Graphic Illustrator Layout Pack 帖子并在其末尾下载图像来找到我们使用过的插图。 我们还在内容框中添加和设置 H3 标题而不是标题字段的样式，以使其准确显示在我们想要的位置。
按钮链接
继续转到链接设置并添加指向按钮的链接，该按钮会将访问者重定向到有关相关幻灯片的更详细页面。
渐变背景
然后，使用以下设置添加渐变背景：
- 颜色 1：#aaacff
- 颜色 2：rgba(255,255,255,0)
- 渐变类型：径向
- 径向：顶部
- 起始位置：30%
- 结束位置：30%
导航
接下来修改文本设置。
- 箭头自定义颜色：#f4f4f4
- 点导航自定义颜色：#000000
文字设置
并在幻灯片的文本设置中更改文本颜色。
- 文字颜色：深色
按钮
最后但并非最不重要的一点是，修改按钮以使其看起来完全符合您的要求。
- 为按钮使用自定义样式：是
- 按钮文字大小：0.8vw（桌面）、2vw（平板电脑）、3vw（手机）
- 按钮文字颜色：#ffffff
- 按钮背景颜色：#aaacff
- 按钮边框宽度：0px
- 按钮边框半径：10px
根据需要多次克隆幻灯片
完成第一张幻灯片的创建和自定义后，您可以继续复制幻灯片，次数不限。 您需要对每个副本进行一些手动修改。
更改内容框中的内容
您需要更改的第一件事是内容框中的内容。 这包括正在使用的图像/插图。 您可以通过转到 Graphic Illustrator Layout Pack 帖子并在其末尾下载图像来找到本教程中使用的两个插图。
更改链接
也更改按钮链接。
修改渐变背景
您还可以通过更改第一个渐变颜色来自定义每个重复幻灯片的调色板。
- 颜色 1：#ffccaa
更改按钮背景颜色
使用相同的颜色来更改按钮背景颜色。 对您创建的每个副本重复这些步骤，您就完成了！
- 按钮背景颜色：#ffccaa
免费下载移动演练部分
要使用免费的移动演练部分，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
预览
在我们深入学习本教程之前，让我们快速浏览一下我们将在不同屏幕尺寸上重新创建的结果。
静止的
动图
最后的想法
在这篇文章中，我们向您展示了如何使用 Divi 的滑块模块来创建一个华丽的移动演练。 虽然它最初是为移动屏幕尺寸设计的，但在平板电脑和台式机上看起来同样出色。 您可以使用这种方法在您的网站上创建各种幻灯片部分，并与访问者无缝交互。 我们希望本教程能激发您使用 Divi 的滑块模块发挥创意。 如果您有任何问题或建议，请务必在下方评论区留言！