WordPress divi主题

如何使用 Divi 的滚动效果逐步将步骤闪烁到流程中

| 5月 6, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

公司经常通过提供对其流程步骤的有用说明来教育他们的访问者他们的服务。 例如,网页设计机构可能会展示他们的网页开发过程,或者面包店可能会展示他们制作完美纸杯蛋糕的步骤。

google广告开户

借助 Divi,我们可以使用内置的滚动效果将“流程步骤”提升到一个完全不同的水平。 在本教程中,我们将向您展示一种在用户向下滚动页面时逐步将步骤闪现到流程的简单方法。 这将给设计一个很好的交互提升,创造性地强调预期的信息。

抢先看

处理滚动效果的步骤

免费下载布局

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

要将布局导入您的页面,只需提取 zip 文件并将 JSON 文件拖到 Divi Builder 中。

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。

之后,您将有一个空白画布开始在 Divi 中进行设计。

如何使用 Divi 的滚动效果逐步将步骤闪烁到流程中

要创建布局以将步骤闪烁到滚动过程中,我们必须从添加新行开始。

WordPress divi主题

创建四列行

首先,向该部分添加一个四列行。

处理滚动效果的步骤

在我们开始向列添加模块/内容之前,打开行的设置并更新以下内容:

  • 天沟宽度:2
  • 最大宽度:80%

处理滚动效果的步骤

到目前为止很简单。 现在让我们开始添加一些内容。

向每列添加内容(步骤)

由于此设计具有滚动效果,可将步骤闪烁到流程中,因此我们的每一列都将包含一个步骤。 第 1 列将包含说明第 1 步的内容。第 2 列将包含第 2 步的内容。依此类推。

将文本模块添加到第 1 列

将新的文本模块添加到第 1 列。

处理滚动效果的步骤

文本模块内容和设计

然后更新文本内容如下:

处理滚动效果的步骤

fiverr建站WordPress程序员

打开设计选项卡并更新以下设置:

  • 文字字体:Lato
  • 文字字体粗细:粗体
  • 文字文字颜色:#fc6d71
  • 标题 2 字体:Oswald
  • 标题 2 字体粗细:Light
  • 标题 2 文字大小:32px
  • 标题 2 字母间距:1px
  • 标题 2 行高:1.3em
  • 边距:0px 底部
  • 填充:顶部 10%,底部 10%
  • 边框宽度:1px
  • 边框颜色:rgba(166,166,166,0.16)

处理滚动效果的步骤

将图像模块添加到第 1 列

文本模块到位后,在第 1 列的文本模块下方添加一个图像模块。

处理滚动效果的步骤

然后更新图像边距如下:

独立站选品工具

处理滚动效果的步骤

复制并粘贴第 1 列内容

为了加快设计过程,我们可以使用多选来选择第 1 列中的两个模块,然后将它们粘贴到其余四列中的每一个中。

处理滚动效果的步骤

更新重复模块的内容

复制模块到位后,返回并更新文本内容和图像以反映流程中的四个步骤中的每一个。

处理滚动效果的步骤

高质量外链购买

完成后,您的设计应该看起来像这样。

处理滚动效果的步骤

为每一列添加滚动效果

我们现在准备添加滚动效果,以在用户向下滚动页面时闪烁流程的每个步骤。 我们不会为每个模块添加滚动效果,而是将滚动效果添加到每一列,以便将效果应用于内容中的所有模块。

要创建闪烁滚动效果,我们将为每一列使用淡入和淡出滚动效果。 这个想法是从 0% 不透明度开始效果,继续到 100% 不透明度,然后回到 0%。

第 1 列滚动效果

在行设置中,打开第 1 列的设置并添加以下滚动效果:

JasperAI 10000字免费额度试用

在淡入和淡出选项选项卡下:

  • 启用淡入淡出:是
  • 起始不透明度:0%(在 20% 视口)
  • 中等不透明度:100%(在 25%-45% 视口)
  • 结束不透明度:0%(在 50% 视口)

处理滚动效果的步骤

第 2 列滚动效果

打开第 2 列的设置并添加以下滚动效果:

在淡入和淡出选项选项卡下:

  • 启用淡入淡出:是
  • 起始不透明度:0%(在 35% 视口处)
  • 中等不透明度:100%(在 40%-60% 视口)
  • 结束不透明度:0%(在 65% 视口)

处理滚动效果的步骤

WordPress备份工具updrafplus

第 3 列滚动效果

处理滚动效果的步骤

第 4 列滚动效果

处理滚动效果的步骤

处理滚动效果的步骤

添加标题

最后,我们可以在布局中添加标题。 为此,请在当前行下方添加一个新的单列行。

处理滚动效果的步骤

然后将文本模块添加到具有以下内容的行:

处理滚动效果的步骤

在设计选项卡下,更新以下内容:

  • 文本对齐方式:拉托语
  • 标题 2 字体粗细:Light
  • 标题 2 字体样式:TT
  • 标题 2 文本颜色:#fc6d71
  • 标题 2 文字大小:70px(桌面)、40px(平板电脑)、24px(手机)
  • 标题 2 字母间距:0.5em

处理滚动效果的步骤

最后结果

要在实时页面上查看结果,您需要在该部分的上方和下方添加一些额外的空间,以查看从头到尾的滚动效果。 一种简单的方法是为该部分添加顶部和底部边距。

这是结果。

处理滚动效果的步骤

最后的想法

说明流程的步骤不必局限于静态图像或图形。 借助 Divi 的滚动效果,您可以通过在用户向下滚动页面时逐步将每个步骤闪烁到视图中来使插图栩栩如生。 而且,由于每列都添加了滚动效果,因此您可以轻松更改每列中的模块/内容,而不会破坏功能。 希望这将是一种有用的技术,可以添加到您的设计工具箱中。

我期待在评论中收到您的来信。

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题