在设置您的“关于”页面时，您很可能还希望在那里展示您的团队成员。 通过这样做，您可以让访问者与您公司背后的人建立联系。 如果您正在寻找一种在滚动上为您的团队成员部分设置动画的方法，您会喜欢本教程的。 我们将重新创建一个漂亮的自滚动团队成员轮播，当您的访问者向下滚动页面时它会移动。 您还可以免费下载 JSON 文件！
让我们开始吧。
预览
在深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸的结果。
桌面
移动的
免费下载团队成员轮播布局
要掌握免费的团队成员轮播布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
让我们开始重建吧！
添加新部分
间距
首先向您正在处理的页面添加一个新的常规部分。 打开部分设置并在不同的屏幕尺寸上添加一些自定义填充。
- 顶部填充：200 像素（桌面）、100 像素（平板电脑和手机）
- 底部填充：200px（桌面），100px（平板电脑和手机）
溢出
为了确保我们的设计中不会出现水平滚动条，我们将在高级选项卡中隐藏部分溢出。
- 水平溢出：隐藏
- 垂直溢出：隐藏
添加第 1 行
立柱结构
继续使用以下列结构向该部分添加新行：
浆纱
在不添加任何模块的情况下，打开行设置，转到设计选项卡并在尺寸设置中修改宽度和最大宽度。
- 宽度：90%
- 最大宽度：1580px
间距
我们也添加了一些自定义的顶部和底部填充。
- 上边距：100px
- 底部填充：100px
将文本模块添加到列
添加H2含量
是时候添加模块了，从第一个文本模块开始。 输入您选择的一些 H2 内容。
H2 文本设置
转到模块的设计选项卡并更改 H2 文本设置，如下所示：
- 标题 2 字体：流沙
- 标题 2 字体粗细：半粗体
- 标题 2 文本颜色：#000000
- 标题 2 文字大小：70 像素（桌面）、50 像素（平板电脑）、40 像素（手机）
将分隔模块添加到列
能见度
然后，添加一个分频器模块。 确保启用了“显示分隔线”选项。
线
接下来对线路设置进行一些更改。
- 线条颜色：#edf000
- 线型：实线
- 线位置：顶部
浆纱
并通过相应地更改大小设置来完成模块设置：
- 分隔线重量：20px
- 宽度：11%
- 模块对齐：左
- 高度：20px
添加第 2 行
立柱结构
到下一行！ 使用以下列结构：
浆纱
在不添加任何模块的情况下，打开行设置并修改大小设置，如下所示：
- 使用自定义装订线宽度：是
- 天沟宽度：2
- 宽度：100%
- 最大宽度：100%
间距
然后，仅在较小的屏幕尺寸上添加一些左右填充。
- 左侧填充：5%（仅限平板电脑和手机）
- 右填充：5%（仅限平板电脑和手机）
列设置 (5x)
现在，在本教程的接下来的三个步骤中，我们将对列进行一些更改。 将所有三个步骤应用于行中的每一列。
渐变背景
首先，为每列添加渐变背景。
- 颜色1：rgba(255,255,255,0)
- 颜色 2：rgba(0,0,0,0.84)
- 渐变类型：线性
- 起始位置：25%
- 结束位置：86%
- 在背景图像上方放置渐变：是
背景图片
然后，上传您选择的背景图片。 此背景图像代表每个团队成员，因此每列使用不同的图像。
- 背景图片尺寸：封面
- 背景图像位置：中心
主要元素
通过向平板电脑每列的主要元素添加一些自定义 CSS 来完成列设置。 这些 CSS 代码行将帮助我们在平板电脑上将列放在彼此下方，而不是让两列彼此相邻。
width: 100% !important; margin: 50px 0px 50px 0px !important;
将人员模块添加到列
添加内容
要共享团队成员信息，我们将使用人员模块。 将第一个 Person Module 添加到第 1 列并使用您选择的一些内容。
删除图像
然后，删除图像。 我们使用的是列背景图像。
背景图片
然后我们将添加一个图像叠加层作为模块的背景图像。 您可以通过下载本教程开头的文件夹来找到我们正在使用的那个。
- 背景图片尺寸：封面
- 背景图像位置：中心
标题文本设置
转到模块的设计选项卡并更改标题文本设置，如下所示：
- 标题标题级别：H3
- 标题字体：流沙
- 标题字体粗细：粗体
- 标题文字颜色：#ffffff
- 标题文字大小：230%
正文文本设置
也修改正文设置。
- 正文字体：Open Sans
- 正文文本颜色：#ffffff
- 车身线高：2.2em
位置文本设置
然后，对位置文本设置进行一些更改。
- 位置字体：Open Sans
- 位置文本颜色：#edf000
间距
并通过在间距设置中添加一些自定义填充值来完成模块设置。
- 顶部填充：70%
- 底部填充：10%
- 左填充：10%
- 右填充：10%
克隆人模块 4x
完成人员模块后，您可以克隆整个模块四次。
在剩余列中放置重复项
将重复的模块放在该行的其余四列中。 确保您也更改了内容。
将行变成自滚动轮播
修改第 2 行大小
现在，要将这一行变成一个自动滚动的团队成员轮播，我们需要重新打开行设置并在尺寸设置中更改宽度和最大宽度。
- 宽度：180%
- 最大宽度：220%（桌面）、100%（平板电脑和手机）
添加第 2 行水平运动
通过在高级选项卡中的滚动效果设置中添加一些水平运动来完成行设置，您就完成了！
- 启用水平运动：是
- 起始偏移量：
- 台式机：2.5
- 平板电脑和手机：0
- 中偏移：0（40%）
- 结束偏移：
- 电脑版：-25（62%）
- 平板电脑和手机：0
- 运动效果触发器：元素中间
预览
现在我们已经完成了所有步骤，让我们最终看看不同屏幕尺寸的结果。
桌面
移动的
最后的想法
在这篇文章中，我们向您展示了如何利用 Divi 的内置滚动效果发挥创意。 更具体地说，我们重新创建了一个漂亮的自滚动团队成员轮播。 当访问者向下滚动页面时，会出现轮播的不同部分。 您还可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。
如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件通讯和 YouTube 频道，这样您将永远是第一批了解并从这些免费内容中受益的人之一。
