创建关于页面时，您可能还想在那里介绍您的团队成员。 通过这样做，您允许 游客 与您的企业背后的人互动。 如果您正在寻找一种方法来为您的团队成员的滚动部分设置动画，您可能会发现本教程很有帮助。 我们将创建一个自动滚动的团队成员旋转木马，当您 游客 滚动页面。
示范
在开始学习本教程之前，让我们看一下不同屏幕尺寸的结果。
受孕开始
添加新部分
间距
首先在要处理的页面上添加一个新的常规部分。 打开区域设置，然后在不同的屏幕尺寸上添加自定义填充。
- 上方填充：200px（桌面），100px（平板电脑和手机）
- 底部填充：200px（桌面），100px（平板电脑和手机）
溢出
为确保设计中没有水平滚动条，我们将在高级选项卡中隐藏部分溢出。
- 水平溢出：隐藏
- 垂直溢出：隐藏
添加第1行
列结构
使用以下列结构继续向该部分添加新行：
浆纱
尚未添加任何模块，请打开行设置，切换到“设计”选项卡，然后更改尺寸设置中的宽度和最大宽度。
- 宽度：90％
- 最大宽度：1580像素
间距
我们还添加了自定义的上下填充。
- 上边距：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代码行将帮助我们在平板电脑上将这些列一个接一个地放置，而不是并排放置。
宽度：100％！重要；边距：50像素0像素50像素0像素！重要；
将人员模块添加到列
添加内容
为了共享有关团队成员的信息，我们将使用人员模块。 将第一个 Person 模块添加到第 1 列并使用 内容 德VOTRE的喜爱。
删除图片
然后删除图像。 我们改用该列的背景图像。
背景图像
然后，我们将添加一个图像叠加层作为模块的背景图像。 您可以通过在本教程开始时下载文件夹来找到我们正在使用的文件夹。
- 背景图像尺寸：封面
- 背景图片的位置：居中
标题文字设定
转到模块设计选项卡，并如下更改标题文本设置：
- 职称：H3
- 标题字体：流沙
- 标题字体粗细：粗体
- 标题文字颜色：#ffffff
- 标题文字大小：230％
正文文本设置
同时更改正文文本设置。
- 正文字体：Open Sans
- 正文文字颜色：#ffffff
- 车身线条高度：2,2 em
位置文字设定
然后对位置文本设置进行一些更改。
- 字体位置：Open Sans
- 位置文字颜色：＃edf000
间距
并通过将自定义填充值添加到间距设置来完成模块设置。
- 上边距：70％
- 下部填充：10％
- 左填充：10％
- 右填充：10％
复制Person模块4次
完成“人员”模块后，可以将整个模块克隆四次。
将重复项放在其余列中
将重复的模块放置在该行的其余四列中。 确保同时更改 内容.
将行变成自动滚动轮播
更改第2行的大小
现在，要将这一行变成自动滚动的团队成员轮播，我们需要重新打开行设置并更改大小设置中的宽度和最大宽度。
- 宽度：180％
- 最大宽度：220％（办公桌），100％（平板电脑和手机）
添加第2行的水平移动
通过在“高级”选项卡中的滚动效果设置中添加水平移动来完成线条设置，您就完成了！
- 激活水平移动：是
- 起始偏移量：
- 办公室：2,5
- 平板电脑和手机：0
- 平均偏移量：0（40％时）
- 结束偏移量：
- 办公室：-25（占62％）
- 平板电脑和手机：0
- 触发动作效果：元素中间
概观
现在我们已经完成了所有步骤，让我们最后看一下它在不同屏幕尺寸下的外观。
办公室
最后的想法
在本教程中，我们向您展示了如何使用 Divi。 具体来说，我们重新创建了一个漂亮的自动滚动团队成员轮播。 当。。。的时候 游客 滚动页面，会出现轮播的另一部分。
