WordPress divi主题

如何使用 Divi 的滚动效果创建分离图像过渡

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

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

Divi 的滚动效果使我们能够创建出色的过渡动画,以引人注目的设计让访问者惊叹不已。 尤其是图像,可以以令人惊讶的方式展示这些滚动效果的力量。 在本教程中,我们将逐步解释如何使用 Divi 的滚动效果创建分离图像过渡。 此效果最初出现在演示页面上。 效果包括使用 Photoshop 之类的照片编辑器预先对图像进行切片(这很容易做到)。 图像切片后,我们需要做的就是将它们添加到 Divi 并使用内置的滚动效果来实现魔法。

google广告开户

让我们开始吧。

抢先看

这是今天的设计一瞥。

分离图像过渡

您还可以在标题为“锻炼不必无聊”的演示页面上查看该设计的原始现场演示。

免费下载 Breakaway Image Transition Divi Layout

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

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

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

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

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

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

除了上面的 Divi 设置之外,您还需要:

  • 两张图片(至少 1080 像素 x 540 像素)
  • 像 Photoshop 这样的照片编辑软件,可以在将图像添加到 Divi 之前对图像进行切片。

第 1 部分:在 Photoshop 中切片图像

在我们开始在 Divi 中创建我们的设计之前,我们需要分割我们的两个图像,这些图像将用于分离过渡滚动效果。 这两个图像都需要裁剪,以便它们正好是 1080 像素 x 540 像素。 之后,它们需要被切成 8 等份(4 横,2 下)。 准备好后,我们可以将它们保存到我们的计算机并将图像切片上传到我们的站点。 让我们从第一张图片开始。

图片#1

裁剪图像

我们需要做的第一件事是裁剪图像,使其具有 1080 像素 x 540 像素的精确尺寸。 您可以使用任何图像编辑软件来执行此操作。 在 Photoshop 中,您可以使用裁剪工具。

分离图像过渡

切片图像

接下来,单击以使用切片工具并选择整个图像。 右键单击切片/图像并选择分割切片选项。

分离图像过渡

在分割切片选项框中,更新以下内容:

横向划分为:

  • 2片向下,均匀分布
  • 每片 270 像素

纵向分为:

fiverr建站WordPress程序员
  • 4片,均匀分布
  • 每片 270 像素

然后单击确定。

分离图像过渡

保存图像切片

现在我们将图像切成 8 个相等的块,每个块都是 270 像素 x 270 像素。

要保存图像切片,请导航到文件 > 导出 > 保存为 Web。

分离图像过渡

独立站选品工具

然后选择文件格式并单击保存。

分离图像过渡

在弹出框中,确保更新以下内容:

  • 另存为: [enter name for image(s)]
  • 格式:仅图像
  • 设置:默认设置
  • 切片:所有切片

然后单击保存。

分离图像过渡

高质量外链购买

现在您所有的图像切片都将保存到计算机,准备上传到 Divi。

图片 #2

要创建此分离图像过渡滚动效果所需的第二个图像,我们应该遵循与创建第一个图像相同的过程(裁剪、切片和保存)。

分离图像过渡

旋转图像切片

但是,由于旋转滚动效果的工作方式,构成第二张图像的每个图像切片都需要向左或向右旋转 90 度。

要旋转图像,您可以使用 Photoshop 或操作系统中的内置图像编辑软件(您甚至可以使用 WordPress 媒体库在将图像上传到您的站点后对其进行编辑和旋转。)。

JasperAI 10000字免费额度试用

分离图像过渡

以下是切片图像时应如何在原始位置内旋转图像的指南。

这是原始图像。

分离图像过渡

以下是在将图像切片上传到您的站点之前应如何旋转它们。

WordPress备份工具updrafplus

分离图像过渡

这是必要的,这样我们才能最终获得以下滚动效果。

分离图像过渡

现在这两个图像都已被裁剪、切片、保存和旋转,您可以将它们添加到您的 Divi 站点。 您应该总共有 16 张图片(图片 1 中的 8 张和图片 2 中的 8 张)。

第 2 部分:在 Divi 中创建分离图像过渡滚动效果

一旦图像切片准备就绪,我们就可以在 Divi 中开始设计过程。 这是如何做到的。

添加第 1 行

首先,创建一个四列的行。

分离图像过渡

行设置

打开行设置并更新以下内容:

  • 天沟宽度:1
  • 最大宽度:1080px(桌面),540px(平板电脑和手机)
  • 内边距:0px 顶部,0px 底部
  • 水平溢出:可见
  • 垂直溢出:可见

分离图像过渡

更新部分填充

由于我们要将第二行绝对定位在第一行的顶部,因此我们需要取出该部分的顶部(和底部)填充,这样它就不会偏离第二行的位置。 打开部分设置并更新以下内容:

  • 内边距:0px 顶部,0px 左侧

分离图像过渡

添加图像

在第一行中,我们将添加构成第一张图像的 8 个图像/切片中的每一个。 图像应该准确地定位在列中,它们在 Photoshop 中是如何切片的(4 个横向和 2 个向下)。

这是每个标有数字的图像的插图。 这是将所有图像添加到行后的样子。

图片#1

将第一个图像模块添加到第 1 列。

分离图像过渡

然后将第一个图像切片上传到模块。

分离图像过渡

滚动效果

在高级选项卡下,为图像添加以下滚动效果。

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

分离图像过渡

单击“比例”选项卡并更新以下内容:

  • 启用向上和向下扩展:是
  • 起始比例:100%(在 20% 视口处)
  • 中比例:70%(在 32% – 48% 视口)
  • 结束比例:100%(在 60% 视口)

分离图像过渡

单击旋转选项卡并更新以下内容:

  • 启用旋转:是
  • 起始旋转:0 度(在 0% 视口处)
  • 中间旋转:0 度(在 20% 视口)
  • 结束旋转:-90 度(在 60% 视口)

分离图像过渡

向下滚动页面时,滚动效果将如下所示。

分离图像过渡

图片 #2

要创建图像 #2,复制图像 #1 并将副本放在第 2 列中。

分离图像过渡

使用图像#2 更新重复的图像模块。

分离图像过渡

更新滚动效果

我们将保留图像#1 中大部分相同的滚动效果。 我们唯一需要改变的是旋转。 转到高级选项卡并将结束旋转更改为 90 度(而不是 -90 度),以便它向相反方向旋转。

分离图像过渡

图片#3

要创建图像 #3,请将图像 #1 复制并粘贴到第 3 列,然后将图像更改为图像 #3。

分离图像过渡

图片#4

要创建图像 #4,请将图像 #2 复制并粘贴到第 4 列,然后将图像更新为图像 #4。

分离图像过渡

图片#5

要创建图像 #5,请复制图像 #1,以便副本位于第 1 列的正下方。 分离图像过渡

将图像更新为图像#5。 然后更新淡入淡出滚动效果如下:

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

分离图像过渡

然后更新 Scaling Up 和 Down 滚动效果如下:

  • 起始比例:100%(在 0% 视口)
  • 中比例:70%(在 12% – 28% 视口)
  • 结束比例:100%(在 40% 视口)

分离图像过渡

最后,更新旋转滚动效果如下:

  • 起始旋转:0 度(在 0% 视口处)
  • 中间旋转:0 度(在 0% 视口)
  • 结束旋转:90 度(在 40% 视口)

分离图像过渡

图片#6

要创建图像 #6,复制图像 #5 并将其移动到第 2 列(在图像 #2 下)。

分离图像过渡

使用图像#5 更新图像模块。 然后将旋转滚动效果调整到相反的方向(-90 度)如下:

分离图像过渡

图片 #7

要创建图像 #7,复制图像 #5 并将其移动到第 3 列中的图像 #3 下。然后使用图像 #7 更新复制图像模块。

分离图像过渡

图片#8

要创建图像 #8,复制图像 #6 并将其移动到第 4 列中的图像 #4 下。然后使用图像 #8 更新复制图像模块。

分离图像过渡

现在,所有图像切片都已添加到第 1 行,并具有分离滚动效果。

这是迄今为止的结果。

分离图像过渡

添加第 2 行

第二行图像不会花费太多时间来设计。 我们需要做的就是复制第 1 行,用正确的图像更新所有图像,然后给它一个绝对位置。

继续复制第 1 行。

分离图像过渡

更新第 2 行图像

记住我们为图像#2 创建的旋转图像。 现在,我们需要做的就是将它们中的每一个上传到第 2 行中正确的图像模块位置。

分离图像过渡

更新图像滚动效果

一旦新的旋转图像就位,我们需要从第 2 行中的所有图像中取出淡入和淡出滚动效果。

这样做,部署线框视图模式并使用多选来选择第 2 行中的所有 8 个图像。 然后打开所选图像之一的设置以部署元素设置。 在淡入和淡出滚动效果选项下,更新以下内容:

  • 启用淡入淡出:否

分离图像过渡

位置第 2 行

我们的最后一步是将第 2 行直接放在第 1 行的后面。 一个简单的方法是给出行和绝对位置。 打开第 2 行的设置并更新以下内容:

  • 职位:绝对
  • 位置:顶部中心

分离图像过渡

最后结果

要查看结果,您可能需要为您的部分提供大量的顶部和底部边距,或者在设计上方和下方创建其他部分。 这将为您提供正确查看滚动效果所需的空间。

让我们看看最终结果。

分离图像过渡

它在移动设备上。

分离图像过渡

最后的想法

这种分离的图像转换本身就是一个令人印象深刻的设计,但您可以轻松地使用它向访问者传达转换类型的信息(如之前和之后)。 而且您也不必满足于这种设计。 随意尝试不同的滚动效果,以创建更惊人的图像过渡。 有什么想法吗?

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

干杯!