在设计服务页面时,您要确保您的 游客 注意您提供的所有不同服务。 在许多情况下,他们只会寻找一种特定的服务,但如果您在服务结构中提供一种简化的方式,则更有可能是您的 游客 处理他们所有。 

在本教程中,我们将向您展示如何利用 Divi 并创建无缝的服务过渡。 您还可以免费下载 JSON 文件!

让我们去。

可能的结果

在开始学习本教程之前,让我们看一下不同屏幕尺寸的结果。

分区之间的过渡

1,重新创建元素的结构

添加第1部分

间距

首先在正在处理的页面上添加一个新部分。 打开部分设置并在不同的屏幕尺寸上更改填充值。

  • 上方填充:80像素(台式机和平板电脑),0像素(电话)
  • 底部填充:80px
Divi参数部分

添加新行

列结构

使用以下列结构继续添加新行:

浆纱

尚未添加模块,请打开线参数并将以下更改应用于尺寸标注参数:

  • 使用自定义装订线宽度:是
  • 装订线宽度:1
  • 宽度:90%
  • 最大宽度:1580像素
Divi间距配置

间距

然后添加自定义的顶部和底部边距。

  • 上边距:200px
  • 底边距:200px
Divi行距配置

将文本模块添加到1列

添加H2内容

是时候添加模块了,从第 1 列中的文本模块开始。输入 内容 您选择的 H2。

我们的服务由当下的专家提供

H2文字设定

转到模块设计选项卡,并按如下所示更改H2文本设置:

  • 标题2警察:每季
  • 标头2文字大小:80像素(台式机),50像素(平板电脑),40像素(电话)
  • 头部第2行的高度:1.2em
警察总长

间距

然后在平板电脑和手机上添加较低的边距。

  • 底边距:50像素(仅限平板电脑和手机)
Divi文字间距配置

将文本模块添加到2列

添加内容

让我们继续第二栏。 我们需要的第一个模块是一个带有特定内容的文本模块 内容 描述。

内容div文本框

文字设定

切换到模块设计选项卡,并相应地更改文本设置:

  • 文字字体:小屋
  • 文字字体样式:大写
  • 文字颜色:#000000
  • 文字大小:18像素(桌面),15像素(平板电脑),13像素(电话)
  • 文字字母间距:3px(桌面),1px(平板电脑和手机)
  • 文本行的高度:3em
Divi文字参数

在第2列中添加一个分离模块

能见度

在此列中,我们需要的下一个也是最后一个模块是分离模块。 确保已启用“显示分隔符”选项。

  • 显示分隔符:是
可见分频器

线

然后更改模块的线条颜色。

  • 线条颜色:#000000
分频器颜色背景

浆纱

然后对上浆参数进行一些更改。

  • 分隔重量:3px
  • 宽度:28%
Divi分隔器尺寸

间距

我们还添加了最高利润。

  • 上边距:10px
Divi分隔器模块间距

添加第2部分

间距

让我们继续下一个常规部分。 从该部分中删除默认的顶部填充。

  • 上边距:0px
第2节div间距

溢出

还隐藏溢出。

  • 水平溢出:隐藏
  • 垂直溢出:隐藏
隐藏divi模块溢出

添加新行

列结构

使用以下列结构继续添加第一行:

选择divi布局

浆纱

在不添加更多模块的情况下,打开线参数,访问尺寸标注参数并进行以下修改:

  • 使用自定义装订线宽度:是
  • 装订线宽度:1
  • 均衡柱高:是
  • 宽度:90%
  • 最大宽度:1580像素
装订线配置分区

间距

然后删除所有默认的上部和下部填充。

  • 上边距:0px
  • 底部填充:0px
Divi 1线路模块间距设置

第1栏设定

背景颜色

然后打开第1列的设置并更改背景颜色。

  • 背景颜色:#f7f7f7
Divi线路模块后台配置

间距

通过在不同屏幕尺寸上添加自定义填充值来完成列设置。

  • 上方填充:200px(桌面),100px(平板电脑和手机)
  • 底部填充:200px(桌面),100px(平板电脑和手机)
  • 左填充:8%
  • 右填充:8%
行模块列设置

第2栏设定

间距

通过打开第2列中的设置继续操作。转到高级选项卡,然后在不同的屏幕尺寸上添加自定义填充值。

  • 顶部填充:100像素(桌面),50像素(平板电脑和手机)
  • 底部填充:200px
  • 左填充:150像素(办公桌),0像素(平板电脑和手机)
Divi模块间距设置

在第1列中添加一个分离模块

能见度

在第一列中,我们需要的第一个模块是分离模块。 确保已启用“显示分隔符”选项。

  • 显示分隔符:是
显示div 1分隔符

线

然后更改模块的线条颜色。

  • 线条颜色:#000000
Divi分隔符设置

浆纱

同时更改尺寸参数。

  • 分隔重量:3px
  • 宽度:50%
Divi分隔器尺寸

将文本模块添加到1列

添加H3内容

第 1 列中我们需要的下一个模块是一个文本模块,其中包含 内容 H3。

Divi内容部分设置

H3文字设定

切换到模块设计选项卡并更改H3文本设置:

  • 标题3警察:每季
  • 项目3的文字颜色:#000000
  • 第3项文字大小:50像素(台式机),40像​​素(平板电脑),35像素(手机)
  • 头部第3行的高度:1.1em
Divi 设计美甲

将文本模块添加到2列

添加内容

在第二列中,我们需要的第一个模块是带有一些描述内容的文本模块。

Divi文字模块设置

文字设定

如下更改模块的文本设置:

  • 文字字体:小屋
  • 文字字体样式:大写
  • 文字大小:18像素(桌面),15像素(平板电脑),13像素(电话)
  • 文字字母间距:3px(桌面),1px(平板电脑和手机)
  • 文本行的高度:3em
Divi文字模具字体调整

将按钮模块添加到2列

添加副本

我们需要的下一个也是最后一个模块是按钮模块。 输入您选择的副本。

文字模块内容设定

按钮设定

然后设置按钮的样式。

  • 对按钮使用自定义样式:是
  • 按钮文字大小:20像素
  • 按钮文字颜色:#ffffff
  • 按钮背景色:#000000
  • 按钮边框宽度:0px
Divi按钮样式设置
  • 按钮字体:每季度
  • 按钮字体粗细:粗体
Divi按钮颜色设置

间距

还添加自定义填充。

  • 上边距:50px
  • 底部填充:50px
  • 左边填充:100px
  • 右填充:100px
Divi模块按钮间距设置

职务

然后相应地重新放置按钮:

  • 位置:绝对
  • 位置:左下
Divi按钮模块位置调整

尽可能多地复制行

一旦完成了整个生产线及其所有模块,就可以将整个生产线克隆三遍。

克隆divi模块

更改所有内容

确保以重复的行编辑所有内容。

编辑分区部分的内容

2.应用滚动效果

第一行滚动效果

水平运动

一旦完成了本节中的所有行,就可以添加滚动效果了。 打开该部分的第一行并添加水平移动。

  • 激活水平移动:是
  • 起始偏移量:-5
  • 平均偏移量:0(26%时)
  • 终点偏移:0
  • 触发动作效果:元素中间
应用divi滚动效果

淡入和淡出

还可以使用传入和传出的淡入淡出效果。

  • 激活淡入和淡出:是
  • 初始不透明度:100%
  • 平均不透明度:100%(50%时)
  • 最终不透明度:0%(至53%)
  • 触发动作效果:元素中间
配置淡入淡出动画分区

中排滚动效果

垂直运动

接下来,我们将向该部分的第一行和最后一行之间的所有行添加滚动效果。 首先使用垂直运动:

  • 激活垂直运动:是
  • 起始偏移量:-4
  • 平均偏移量:0(26%时)
  • 终点偏移:0
  • 运动触发效果:元素中间
Divi滚动动画配置

淡入和淡出

还可以激活淡入淡出效果。

  • 激活淡入和淡出:是
  • 初始不透明度:0%
  • 平均不透明度:100%(从27%到50%)
  • 终点偏移:0(在53%时)
  • 触发动作效果:元素中间
Divi Line淡入淡出动画

最后一行滚动效果

垂直运动

然后打开该部分的最后一行,并添加以下垂直移动:

  • 激活垂直运动:是
  • 起始偏移量:-4
  • 平均偏移量:0(26%时)
  • 终点偏移:0
  • 触发动作效果:元素中间
动画滚动分割线模块

淡入和淡出

随着传入和传出的淡入淡出效果,您就完成了!

  • 激活淡入和淡出:是
  • 初始不透明度:0%
  • 平均不透明度:100%(从27%到50%)
  • 最终不透明度:100%(至53%)
  • 触发动作效果:元素中间
Divi线路模块外观动画设置

最终结果

现在我们已经完成了所有步骤,让我们最后看一下它在不同屏幕尺寸下的外观。

最终演示

最后的想法

在本文中,我们向您展示了如何使用滚动效果创建漂亮的发球过渡 Divi. 甚至在一个发球消失之前,另一个就开始出现,给人一种很舒服的过渡效果。 这种方法将帮助您在单个级别上突出显示每项服务。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。