如何创建在 Divi 中滚动时更改的文本和图像
已发表: 2020-07-17Divi 滚动效果非常适合创建有趣的布局。 自该功能推出以来，我们已经发布了很多。 在本教程中，我们将向您展示如何使用滚动时更改的文本和图像创建布局。 此设计可用于服务页面或您需要的任何类型的页面。 我们保持干净和简单，让滚动效果成为焦点。
您可以将布局下载为 JSON 文件，也可以在您自己的 Divi 网站上重新创建。
让我们开始吧。
预览
在开始之前，让我们来看看不同屏幕尺寸上的布局。
桌面
移动的
免费下载在滚动部分更改的文本和图像
要使用随滚动更改的文本和图像的免费部分，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
使用滚动时更改的文本和图像重新创建部分
添加新部分
背景
要开始重新创建设计，请在新页面或现有页面上添加新部分。 添加我们在上面的下载中提供的背景图像。
- 背景图片：盒子和圆点设计
- 桌面：图像 1
- 平板电脑：图 2
- 电话：图 3
- 图片尺寸：封面
- 背景图像重复：重复 Y（垂直）
间距
为该部分添加一些间距。
- 顶部和底部填充：30%
能见度
也隐藏溢出。
- 水平和垂直溢出：隐藏
添加新行
能见度
现在添加第一行并在高级选项卡中调整可见性设置。
- 水平：隐藏
- 垂直溢出：默认
添加文本模块
文本
为标题添加第一个文本模块。 插入一些您选择的 H1 内容。
- 正文：H1 内容 – 制作团队
标题文字
转到设计选项卡并设置标题文本的样式。
- 标题级别：H1
- 字体：弗雷多克一号
- 重量：粗体
- 颜色：黑色
- 尺寸
- 桌面：100px
- 平板电脑：75px
- 电话：33px
- 字母间距
- 桌面：4px
- 平板电脑：3px
- 电话：2px
浆纱
然后，调整宽度。
- 宽度：100%
添加新行
浆纱
现在添加第二行并相应地调整大小设置：
- 宽度：80%
- 最大宽度：1000px
能见度
也隐藏溢出。
- 水平和垂直溢出：隐藏
添加第一个文本模块
文本
添加另一个文本模块。 这次，输入一些您选择的 H2 内容。
- 正文：H2 内容 – 布景摄影
标题文字
下一个标题样式。
- 标题级别：H2
- 重量：粗体
- 风格：TT
- 颜色：黑色#000000
- 尺寸
- 桌面：50px
- 平板电脑：40px
- 电话：28px
- 字母间距：3px
间距
也为模块设置一些间距。
- 上下边距：0px
滚动效果
通过添加以下滚动效果来完成模块设置：
- 淡入淡出：启用
- 视口底部
- 位置：42%
- 起始不透明度：0%
- 中等不透明度
- 底部位置：43%
- 最高位置：53%
- 中等不透明度：100%
- 视口顶部
- 位置：54%
- 结束不透明度：0%
复制文本模块两次
克隆文本模块两次。
调整第二个文本模块
文本
更改新文本模块中的内容。
- 正文：H2 内容 – 艺术指导
位置
也向模块添加绝对定位。
- 位置：绝对
- 位置：左上角
滚动效果
接下来，更新滚动效果设置。
- 淡入淡出：启用
- 视口底部
- 位置：56%
- 起始不透明度：0%
- 中等不透明度
- 底部位置：57%
- 最高位置：67%
- 中等不透明度：100%
- 视口顶部
- 位置：68%
- 结束不透明度：0%
调整第三个文本模块
文本
现在调整第二个文本模块副本。 先改变内容。
- 主体：H2 含量 – 道具和衣柜
位置
接下来添加一个绝对位置。
- 位置：绝对
- 位置：左上角
滚动效果
然后，修改滚动效果。
- 淡入淡出：启用
- 视口底部
- 位置：70%
- 起始不透明度：0%
- 中等不透明度
- 底部位置：71%
- 最高位置：80%
- 中等不透明度：100%
- 视口顶部
- 位置：81%
- 结束不透明度：0%
添加图像模块
图片
现在是添加图像模块的时候了。 使用图像大小为 350 x 350 像素的方形图像。
- 图像：方形图像 350 x 350 像素
结盟
将对齐设置为左侧。
- 图像对齐：左
间距
也调整间距。
- 在图像下方显示空间：否
- 上边距：-60px
过滤器
然后，添加过滤器使图像去饱和。
- 饱和度：0%
能见度
现在，移至高级选项卡并将溢出设置为隐藏。
- 水平和垂直溢出：隐藏
滚动效果
最后但并非最不重要的是，添加淡入淡出滚动效果。
- 淡入淡出：启用
- 视口底部
- 位置：70%
- 起始不透明度：0%
- 中等不透明度
- 位置：71%
- 中：100%
- 视口顶部
- 位置：100%
- 结束不透明度：0%
添加号召性用语模块
文本
进入下一个模块，即号召性用语模块。 包括您选择的一些内容。
- 作品名称：杰森的艺术团队
- 按钮：预订杰森的艺术团队
- 正文：描述性内容
关联
接下来加个链接。
- 链接：你的链接
背景
也删除默认的背景颜色。
- 使用背景颜色：否
文本
然后，将对齐设置为右侧。
- 文本对齐：右
标题文字
标题文本的样式也是如此。
- 标题级别：H3
- 字体：弗雷多克一号
- 标题文本对齐方式：左
- 颜色：黑色#oooooo
- 尺寸
- 桌面：48px
- 平板电脑：42px
- 电话：33px
- 字母间距
- 台式机和平板电脑：1px
- 电话：0px
- 线高
- 台式机和平板电脑：1.6em
- 电话：1.1em
文章主体
然后是正文。
- 字体: Verdana
- 颜色：黑色#000000
- 尺寸：14px
- 字母间距：0.5px
按钮
调整按钮样式。
- 自定义样式
- 文字大小：17px
- 文字颜色：白色#ffffff
- 背景：黑色#000000
- 字母间距：1px
- 字体: Verdana
- 上边距：20px
- 顶部和底部填充：10px
- 左右填充：25px
位置
移至高级选项卡并按如下方式更改位置设置：
- 职位：相对
- 偏移原点：左上角
- 水平偏移：25px
能见度
然后，隐藏溢出。
- 水平和垂直溢出：隐藏
滚动效果
最后但并非最不重要的是，启用淡入淡出滚动效果。
- 淡入淡出：启用
- 视口底部
- 位置：54%
- 起始不透明度：0%
- 中等不透明度
- 底部位置：55%
- 最高位置：80%
- 中：100%
- 视口顶部
- 位置：100%
- 结束不透明度：0%
复制第二行
克隆包含所有模块的行。
调整第一个文本模块
文本
现在更改克隆文本模块的内容。 从顶部开始。
- 主体：H2 含量/预生产
文本
将对齐更改为右侧。
- 文本对齐：右
扩展文本对齐
将对齐应用于同一行中的所有克隆文本模块。
- 扩展文本对齐：到该行中的所有文本模块
调整第二个文本模块
文本
现在更新第二个克隆文本模块中的内容。
- 正文：H2 内容/现场制作
位置
也在位置设置中更改位置。
- 位置：右上角
调整第三个文本模块
文本
现在更改第三个克隆文本模块的内容。
- 正文：H2 内容/团队之间的协调
位置
也在位置设置中更改位置。
- 位置：右上角
调整新的图像模块
图片
接下来，更改图像模块中的照片。
- 图像：新图像 350 x 350 像素
结盟
还要更改图像对齐方式。
- 图像对齐：右
调整新的号召性用语模块
文本
接下来打开号召性用语模块并更改所有内容。
- 片名：爱丽丝的制作团队
- 按钮：预订爱丽丝的制作团队
- 正文：新的描述性内容。
关联
也换个链接。
- 链接：新链接
文本
还要修改对齐方式。
- 文本对齐方式：左
标题文字
也更改标题文本的对齐方式。
- 标题文本对齐方式：左
文章主体
以及正文。
- 正文对齐方式：左
浆纱
不要忘记在大小设置中更改整个模块的对齐方式。
- 模块对齐：左
位置
最后，将位置设置重置为默认值，您就大功告成了！
- 位置：重置为默认值
预览
让我们最后看一下不同屏幕尺寸上的页面布局。
桌面
移动的
这是布局的包装，文本和图像在滚动时发生变化！
我们已完成重新创建滚动时更改的文本和图像。 由于 Divi 的内置滚动效果，我们能够实现这种效果。 将此布局用于服务页面、关于页面、会见团队页面或任何您喜欢的页面！ 使用提供的背景或将背景保留为白色。
请在留言中让我们知道你的想法！