滑块在网页设计中一直很受欢迎。 它们最大的优势之一是访问者可以在移动设备上滑动浏览它们。 如今，滑动是一种新的点击方式，因此不言而喻，包括滑块可以帮助改善访问者在您的网站上的移动用户体验。 使用 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
间距
我们还为该行添加了一些底部填充。
边界
接下来，将“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
我们还需要特别为 Slider Module 的按钮添加一些自定义填充和边距值。 由于此元素与每张幻灯片中的不同元素组合在一起，因此您必须使用高级选项卡中的 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 帖子并在其末尾下载图像来找到本教程中使用的两个插图。
更改链接
更改按钮链接。
修改渐变背景
您还可以通过更改第一个渐变颜色来自定义每个重复幻灯片的调色板。
更改按钮背景颜色
使用相同的颜色来更改按钮背景颜色。 对您创建的每个副本重复这些步骤，然后您就完成了！
- 按钮背景颜色：#ffccaa
免费下载移动演练部分
要掌握免费的移动演练部分，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
预览
在深入学习本教程之前，让我们快速浏览一下我们将在不同屏幕尺寸上重新创建的结果。
静止的
动图
最后的想法
在这篇文章中，我们向您展示了如何使用 Divi 的滑块模块来创建华丽的移动演练。 尽管它最初是为移动屏幕尺寸设计的，但它在平板电脑和台式机上看起来同样出色。 您可以使用这种方法在您的网站上创建各种幻灯片部分，并与您的访问者无缝交互。 我们希望本教程能激发您使用 Divi 的滑块模块发挥创意。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！
