[ad_1]
让我们去。
概观
在我们深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸下的结果。
办公室
联络号码
免费下载版面
要获得免费布局，您需要先使用下面的按钮下载它们。 要访问下载，您需要使用以下方式订阅我们的 Divi Daily 邮件列表 形式 以下。 作为新订阅者，您将在每周一获得更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下方输入您的电子邮件地址并单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
让我们开始重建吧！
添加 2x 占位符部分
添加新部分
首先向您正在处理的页面添加一个占位符部分。
浆纱
打开部分设置并在大小设置中更改高度。
克隆部分
克隆该部分一次。 这会在您的页面上留下两个占位符部分。 这些占位符部分将帮助您在完成本教程后看到最终效果。 在实时网站上，占位符部分将替换为您在整个页面中使用的正常部分。
在占位符部分之间添加新部分
占位符部分就位后，在占位符部分之间添加一个新部分。
背景颜色
打开部分设置并使用白色背景色。
- 背景颜色：#ffffff
间距
切换到截面设计选项卡并相应地更改顶部和底部填充值：
- 顶部填充：10vh
- 底部填充：10vh
添加第 1 行
柱状结构
继续使用以下列结构向该部分添加新行：
浆纱
在不添加任何模块的情况下，打开行设置，转到大小设置，并更改最大宽度和宽度值。
- 宽度：100%
- 最大宽度：100%
将文本模块添加到列
添加副本
这一行我们需要的唯一模块是一个文本模块。 添加您选择的副本。
文字设定
切换到模块设计选项卡并相应地更改文本设置：
- 文字字体：蒙特塞拉特
- 文字字体粗细：超粗
- 文字字体样式：大写
- 文字颜色：#fff2ea
- 文字大小：11vw
- 文本行高：1 em
- 文本对齐：居中
添加第 2 行
柱状结构
使用以下列结构向该部分添加另一行：
浆纱
在不添加任何模块的情况下，打开行设置并按如下方式更改大小设置：
- 使用自定义装订线宽度：是
- 天沟宽度：2
- 宽度：90％
- 线对齐：居中
将图像模块添加到列
上传图片
将图像模块添加到行列。 上传您选择的图像。
对准
切换到模块设计选项卡并相应地更改图像对齐方式：
浆纱
然后转到大小设置并在模块上强制全宽。
将按钮模块添加到列
添加副本
我们将添加到该列的下一个也是最后一个模块是按钮模块。 使用您选择的副本。
按钮对齐
转到“设计”选项卡并更改按钮对齐方式。
按钮设定
然后按如下方式设置按钮样式：
- 为按钮使用自定义样式：是
- 按钮文字大小：16px
- 按钮文字颜色：#000000
- 按钮背景颜色：#ffffff
- 按钮边框宽度：0px
- 按钮字母间距：2px
- 按钮字体：蒙特塞拉特
- 按钮字体粗细：粗体
- 按钮字体样式：大写
间距
在间距设置中也使用自定义填充值。
- 顶部填充：20px
- 底部填充：20px
- 左填充：5%
- 右填充：5%
将绝对定位添加到第 1 行
完成第二行后，返回到第 1 行。 打开行设置，转到高级选项卡并使该部分成为绝对。 通过这样做，里面的行和文本模块将被放置在包含图像模块的行下方。
- 位置：绝对
- 地点：中心
克隆第 n ° 1 行并将副本放在第 n ° 2 行下
为了让文本模块出现在图像上方，我们需要另一行具有更高的 z-index 值。 克隆第一行并将副本放在第二行下方。
将效果应用于第 3 行
增加 Z 指数
打开重复行并在高级选项卡中更改 z 索引。
更改文本颜色
打开行中的文本模块并更改文本颜色。
将混合模式应用于线条
然后打开行设置并在过滤器设置中更改混合模式。
在第 3 行的文本模块上使用滚动效果
添加淡入淡出效果
通过重新打开文本窗格、转到滚动效果并打开淡入淡出效果来完成教程。 就是这样！
- 启用淡入淡出：是
- 起始不透明度：0%
- 中等不透明度：0%（至 26%）
- 最终不透明度：100%（28%）
- 运动效果触发器：元素中间
概观
现在我们已经完成了所有步骤，让我们最后看一下它在不同屏幕尺寸下的外观。
办公室
联络号码
最后的想法
在本文中，我们向您展示了如何利用 Divi 的内置滚动效果发挥创意。 具体来说，我们向您展示了如何随机播放滚动副本。 起初，副本似乎在图像下方。 滚动后，副本显示在图像上方并与图像合并。 您还可以免费下载 JSON 文件！ 如果您有任何问题或建议，请随时在下面的评论部分发表评论。
如果您想了解更多关于 Divi 的信息并获得更多 Divi 免费赠品，请务必订阅我们的 通讯 通过电子邮件发送至我们的 YouTube频道 这样您就永远是最先了解并利用此免费内容的人之一。
[ad_2]
