WordPress divi主题

如何为 Divi 中的应用插图创建扩展层滚动效果

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

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

在您的网站上展示任何应用程序或产品不必局限于静态图像或图形。 借助 Divi 的滚动效果,您可以通过添加微妙而有效的动画来吸引访问者,从而使应用插图栩栩如生。 在本教程中,我们将揭示一种在 Divi 中创建扩展层滚动效果的简单方法。 所需要的只是三个具有相同尺寸的图像(或屏幕截图)以及 Divi builder 的所有内置魔法。

google广告开户

让我们直接进入并开始吧。

抢先看

免费下载布局

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

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

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

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

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

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

WordPress divi主题

在 Divi 中为引人入胜的应用插图创建扩展层滚动效果

添加行

让我们从添加一个 2 列(一半一半)的行开始。

扩展图层滚动效果

将临时边距添加到部分

为了以后能够预览滚动效果,请在该部分添加一些顶部和底部边距,如下所示:

  • 边距:80vh 顶部,80vh 底部

扩展图层滚动效果

添加 3 个图像作为图层

我们将创建三个图像,作为应用程序插图的三层。 这个想法是使用应用程序功能的三张图像(或屏幕截图),它们具有相同的大小/尺寸,以便图像完美地叠放在一起。 然后我们将使用 Divi 滚动效果移动三层。

让我们从第一张图片开始。

创建图像 1

将图像模块添加到左列。

扩展图层滚动效果

然后将第一张图片上传到模块。 记住要确保所有三个图像都具有相同的尺寸。 这个是 500 像素 x 1050 像素。

扩展图层滚动效果

fiverr建站WordPress程序员

图 1 设置

打开图像模块设置并更新以下内容:

宽度和边距
  • 宽度:300px(台式机和平板电脑),150px(手机)
  • 模块对齐:左
  • 边距:0px 底部

扩展图层滚动效果

边界
  • 圆角:40px
  • 边框宽度:15px
  • 边框颜色:#ffffff

扩展图层滚动效果

盒子阴影
  • 盒子阴影:见截图
  • 盒子阴影垂直位置:0px
  • 盒子阴影模糊强度:48px
  • 阴影颜色:rgba(0,0,0,0.2)

扩展图层滚动效果

创建图像 2

要创建图像 2,请复制图像 1。

独立站选品工具

扩展图层滚动效果

然后使用相同尺寸(500 像素 x 1050 像素)的新图像更新重复图像模块。

扩展图层滚动效果

图 2 设置

然后通过更新以下内容取出边框:

边界

扩展图层滚动效果

高质量外链购买

我们不需要此图像的边框,但我们确实需要用填充替换边框间距以确保图像无缝堆叠。

填充
  • 内边距:顶部 15px,底部 15px,左侧 15px,右侧 15px

扩展图层滚动效果

位置

然后将图像 2 的位置更新为绝对。 这将使图像与图像 1 完美重叠。

扩展图层滚动效果

有关更多信息,请查看我们关于如何在 Divi 中使用绝对位置的完整帖子。

JasperAI 10000字免费额度试用
滚动效果

现在是时候添加在向下滚动页面时移动我们的图层(图 2)的滚动效果了。

更新滚动效果如下:

在下面 垂直运动 标签…

  • 启用垂直运动:是
  • 起始偏移:0(在 0% 视口处)
  • 中间偏移:0(在 0% 视口处)
  • 结束偏移:-1(在 100% 视口)

扩展图层滚动效果

在下面 水平运动 标签…

WordPress备份工具updrafplus
  • 启用水平运动:是
  • 起始偏移:0(在 0% 视口处)
  • 中偏移:1(在 50% 视口处)
  • 结束偏移:-1.5(在 100% 视口)

扩展图层滚动效果

在下面 淡入淡出 标签…

  • 启用淡入淡出:是
  • 起始不透明度:0%(在 0% 视口)
  • 中等不透明度:100%(在 10%-15% 视口)
  • 结束不透明度:70%(在 30% 视口)

扩展图层滚动效果

创建图像 3

将所有滚动效果添加到图像 2 后,我们就可以创建图像 3。

打开构建器底部的设置菜单,然后选择“图层”按钮以部署图层弹出窗口。 然后在第 1 列中复制图像模块 2 以创建图像 3。为此使用图层功能很有帮助,因为很难选择重叠的模块。

扩展图层滚动效果

现在打开复制图像的设置(图 3)并上传新图像。 确保保持相同的尺寸(500 像素 x 1050 像素)。

扩展图层滚动效果

图 3 滚动效果

在高级选项卡下,更新图像 3 的滚动效果选项。

在下面 垂直运动 选项卡,更新垂直运动偏移量如下:

  • 结束偏移:-2(在 100% 视口)

扩展图层滚动效果

在下面 水平运动 选项卡,更新水平运动如下:

  • 中偏移:2(在 50% 视口处)
  • 结束偏移:3(在 100% 视口)

扩展图层滚动效果

在下面 淡入淡出 选项卡,更新淡入和淡出设置,如下所示:

  • 起始不透明度:5%(视口为 0%)
  • 中等不透明度:100%(在 30%-40% 视口)
  • 结束不透明度:100%(在 50% 视口)

扩展图层滚动效果

结果

看看到目前为止的结果。

扩展图层滚动效果

将变换倾斜添加到第 1 列

这是一个看起来很棒的效果,但我们将倾斜列以创建更多的 3D 效果。

打开第 1 列的设置并添加变换倾斜,如下所示:

变换倾斜(X 和 Y 轴):8 度

扩展图层滚动效果

这将在扩展层上创建一个很好的 3d 效果。

就是这样!

可选:将 CTA 添加到第 2 列

现在我们可以在右栏中添加任何标题和按钮(或任何 CTA),并带有一些免费的滚动效果。 查看上面此布局的免费下载,以在此插图中获得相同的 CTA。

扩展图层滚动效果

最后结果

这是最终结果。

扩展图层滚动效果

这是它在平板电脑和手机上的堆叠方式。

扩展图层滚动效果

扩展图层滚动效果

使用 Divi 布局包中的图像

本教程中使用的图像是来自 Shutterstock 的模拟图像,也出现在我们的滚动效果演示页面上。

要更改设计以满足您自己的需求,您可以使用我们免费布局包中的图像或创建自己的屏幕截图。 这是一个使用移动应用布局包中的图像的示例设计。 我还添加了渐变背景来补充用于扩展图层的浅色图像。

几分钟后,我们就有了完全不同的设计!

最后的想法

扩展层滚动效果是展示应用程序或产品的优雅解决方案,无需求助于更复杂的 CSS 技术或照片编辑。 而且,您可以使用相同的技术来说明几乎所有内容。 我喜欢用 Divi 中的一个简单选项为自己切换图像并倾斜整个图像/图层集合是多么容易。 希望这能给你一些灵感,让你能够创造出令人惊叹的 Divi 设计。

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

干杯!

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