在设计服务页面时,您要确保您的 游客 注意您提供的所有不同服务。 在许多情况下,他们只会寻找一种特定的服务,但如果您在服务结构中提供一种简化的方式,则更有可能是您的 游客 处理他们所有。
在本教程中,我们将向您展示如何利用 Divi 并创建无缝的服务过渡。 您还可以免费下载 JSON 文件!
让我们去。
可能的结果
在开始学习本教程之前,让我们看一下不同屏幕尺寸的结果。
1,重新创建元素的结构
添加第1部分
间距
首先在正在处理的页面上添加一个新部分。 打开部分设置并在不同的屏幕尺寸上更改填充值。
- 上方填充:80像素(台式机和平板电脑),0像素(电话)
- 底部填充:80px
添加新行
列结构
使用以下列结构继续添加新行:
浆纱
尚未添加模块,请打开线参数并将以下更改应用于尺寸标注参数:
- 使用自定义装订线宽度:是
- 装订线宽度:1
- 宽度:90%
- 最大宽度:1580像素
间距
然后添加自定义的顶部和底部边距。
- 上边距:200px
- 底边距:200px
将文本模块添加到1列
添加H2内容
是时候添加模块了,从第 1 列中的文本模块开始。输入 内容 您选择的 H2。
H2文字设定
转到模块设计选项卡,并按如下所示更改H2文本设置:
- 标题2警察:每季
- 标头2文字大小:80像素(台式机),50像素(平板电脑),40像素(电话)
- 头部第2行的高度:1.2em
间距
然后在平板电脑和手机上添加较低的边距。
- 底边距:50像素(仅限平板电脑和手机)
将文本模块添加到2列
添加内容
让我们继续第二栏。 我们需要的第一个模块是一个带有特定内容的文本模块 内容 描述。
文字设定
切换到模块设计选项卡,并相应地更改文本设置:
- 文字字体:小屋
- 文字字体样式:大写
- 文字颜色:#000000
- 文字大小:18像素(桌面),15像素(平板电脑),13像素(电话)
- 文字字母间距:3px(桌面),1px(平板电脑和手机)
- 文本行的高度:3em
在第2列中添加一个分离模块
能见度
在此列中,我们需要的下一个也是最后一个模块是分离模块。 确保已启用“显示分隔符”选项。
- 显示分隔符:是
线
然后更改模块的线条颜色。
- 线条颜色:#000000
浆纱
然后对上浆参数进行一些更改。
- 分隔重量:3px
- 宽度:28%
间距
我们还添加了最高利润。
- 上边距:10px
添加第2部分
间距
让我们继续下一个常规部分。 从该部分中删除默认的顶部填充。
- 上边距:0px
溢出
还隐藏溢出。
- 水平溢出:隐藏
- 垂直溢出:隐藏
添加新行
列结构
使用以下列结构继续添加第一行:
浆纱
在不添加更多模块的情况下,打开线参数,访问尺寸标注参数并进行以下修改:
- 使用自定义装订线宽度:是
- 装订线宽度:1
- 均衡柱高:是
- 宽度:90%
- 最大宽度:1580像素
间距
然后删除所有默认的上部和下部填充。
- 上边距:0px
- 底部填充:0px
第1栏设定
背景颜色
然后打开第1列的设置并更改背景颜色。
- 背景颜色:#f7f7f7
间距
通过在不同屏幕尺寸上添加自定义填充值来完成列设置。
- 上方填充:200px(桌面),100px(平板电脑和手机)
- 底部填充:200px(桌面),100px(平板电脑和手机)
- 左填充:8%
- 右填充:8%
第2栏设定
间距
通过打开第2列中的设置继续操作。转到高级选项卡,然后在不同的屏幕尺寸上添加自定义填充值。
- 顶部填充:100像素(桌面),50像素(平板电脑和手机)
- 底部填充:200px
- 左填充:150像素(办公桌),0像素(平板电脑和手机)
在第1列中添加一个分离模块
能见度
在第一列中,我们需要的第一个模块是分离模块。 确保已启用“显示分隔符”选项。
- 显示分隔符:是
线
然后更改模块的线条颜色。
- 线条颜色:#000000
浆纱
同时更改尺寸参数。
- 分隔重量:3px
- 宽度:50%
将文本模块添加到1列
添加H3内容
第 1 列中我们需要的下一个模块是一个文本模块,其中包含 内容 H3。
H3文字设定
切换到模块设计选项卡并更改H3文本设置:
- 标题3警察:每季
- 项目3的文字颜色:#000000
- 第3项文字大小:50像素(台式机),40像素(平板电脑),35像素(手机)
- 头部第3行的高度:1.1em
将文本模块添加到2列
添加内容
在第二列中,我们需要的第一个模块是带有一些描述内容的文本模块。
文字设定
如下更改模块的文本设置:
- 文字字体:小屋
- 文字字体样式:大写
- 文字大小:18像素(桌面),15像素(平板电脑),13像素(电话)
- 文字字母间距:3px(桌面),1px(平板电脑和手机)
- 文本行的高度:3em
将按钮模块添加到2列
添加副本
我们需要的下一个也是最后一个模块是按钮模块。 输入您选择的副本。
按钮设定
然后设置按钮的样式。
- 对按钮使用自定义样式:是
- 按钮文字大小:20像素
- 按钮文字颜色:#ffffff
- 按钮背景色:#000000
- 按钮边框宽度:0px
- 按钮字体:每季度
- 按钮字体粗细:粗体
间距
还添加自定义填充。
- 上边距:50px
- 底部填充:50px
- 左边填充:100px
- 右填充:100px
职务
然后相应地重新放置按钮:
- 位置:绝对
- 位置:左下
尽可能多地复制行
一旦完成了整个生产线及其所有模块,就可以将整个生产线克隆三遍。
更改所有内容
确保以重复的行编辑所有内容。
2.应用滚动效果
第一行滚动效果
水平运动
一旦完成了本节中的所有行,就可以添加滚动效果了。 打开该部分的第一行并添加水平移动。
- 激活水平移动:是
- 起始偏移量:-5
- 平均偏移量:0(26%时)
- 终点偏移:0
- 触发动作效果:元素中间
淡入和淡出
还可以使用传入和传出的淡入淡出效果。
- 激活淡入和淡出:是
- 初始不透明度:100%
- 平均不透明度:100%(50%时)
- 最终不透明度:0%(至53%)
- 触发动作效果:元素中间
中排滚动效果
垂直运动
接下来,我们将向该部分的第一行和最后一行之间的所有行添加滚动效果。 首先使用垂直运动:
- 激活垂直运动:是
- 起始偏移量:-4
- 平均偏移量:0(26%时)
- 终点偏移:0
- 运动触发效果:元素中间
淡入和淡出
还可以激活淡入淡出效果。
- 激活淡入和淡出:是
- 初始不透明度:0%
- 平均不透明度:100%(从27%到50%)
- 终点偏移:0(在53%时)
- 触发动作效果:元素中间
最后一行滚动效果
垂直运动
然后打开该部分的最后一行,并添加以下垂直移动:
- 激活垂直运动:是
- 起始偏移量:-4
- 平均偏移量:0(26%时)
- 终点偏移:0
- 触发动作效果:元素中间
淡入和淡出
随着传入和传出的淡入淡出效果,您就完成了!
- 激活淡入和淡出:是
- 初始不透明度:0%
- 平均不透明度:100%(从27%到50%)
- 最终不透明度:100%(至53%)
- 触发动作效果:元素中间
最终结果
现在我们已经完成了所有步骤,让我们最后看一下它在不同屏幕尺寸下的外观。
最后的想法
在本文中,我们向您展示了如何使用滚动效果创建漂亮的发球过渡 Divi. 甚至在一个发球消失之前,另一个就开始出现,给人一种很舒服的过渡效果。 这种方法将帮助您在单个级别上突出显示每项服务。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。