WordPress divi主题

如何在 Divi 中的滚动上创建移动图像阴影

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

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

在网页设计领域,我们通常将阴影视为可以在 Photoshop 中添加的内容或 CSS 属性(如 box-shadow 或 text-shadow)。 但是使用 Divi,我们可以跳出框框(或框阴影)思考。 只需对 Divi 的内置滤镜和滚动效果选项进行一些调整,我们就可以将任何图像转换为栩栩如生的阴影。

google广告开户

在本教程中,我们将向您展示如何在 Divi 中创建滚动的移动图像阴影。 诀窍是找到具有独特形状的PNG图像,这样,一旦图像被转换,它将保持形状并看起来像图像的真实阴影。 图像/阴影准备好后,我们可以添加一些滚动效果来随着用户滚动移动阴影。 这种不寻常(但熟悉)的效果将添加一个令人惊叹的设计元素,为您的网站带来新的活力。

让我们开始吧!

抢先看

下面是我们将在本教程中构建的设计的快速浏览。

免费下载布局

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

要将部分布局导入 Divi 库,请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中,选择导入选项卡并从您的计算机中选择下载文件。

然后单击导入按钮。

迪维通知框

WordPress divi主题

完成后,部分布局将在 Divi Builder 中可用。

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

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

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

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

第 1 部分:设计部分布局

在这第一部分中,我们将设计一个快速的部分布局来补充移动图像阴影滚动效果。

添加两列行

首先,在常规部分添加一个两列行。

divi 运动图像阴影

添加文本模块

在左栏中,添加一个新的文本模块。 这将作为我们的模拟文本内容。

divi 运动图像阴影

fiverr建站WordPress程序员

文字内容

然后将以下 HTML 粘贴到正文内容中:


<h2>Our Wedding</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>


divi 运动图像阴影

文字设计

在设计选项卡下,更新设置如下:

  • 文字文字大小:16px
  • 文本行高:2em

divi 运动图像阴影

  • 标题 2 字体:comforta
  • 标题 2 文字颜色:#444235
  • 标题 2 文字大小:60px(桌面),40px(平板)

divi 运动图像阴影

独立站选品工具

添加图像设计口音

在文本模块下,我们将添加一个图像,作为文本的设计重点。 我们将使用 Holistic Healer Layout Pack 中的树枝图像。 这将与我们稍后将用于移动图像阴影的图像相同。

添加图片

在文本模块下添加一个新的图像模块。

divi 运动图像阴影

然后上传图片。

divi 运动图像阴影

高质量外链购买

形象设计

在设计选项卡下,使用过滤器设置降低图像的不透明度。

divi 运动图像阴影

接下来,使用以下变换选项将图像向左和向上移动:

  • 变换平移 X 轴:-20%
  • 变换平移 Y 轴:-90%

divi 运动图像阴影

图像位置

然后给图像一个绝对位置。

JasperAI 10000字免费额度试用

divi 运动图像阴影

第 2 部分:创建运动图像阴影

一旦左栏中的模拟内容完成,我们就可以开始创建图像和那些移动的图像阴影了。

添加主图像

将新的图像模块添加到右列。

divi 运动图像阴影

然后上传至少 800 像素宽的图片。 由于我们要添加树枝的运动图像阴影,因此使用外部某处的图片是有意义的。

WordPress备份工具updrafplus

divi 运动图像阴影

然后取出模块下默认的下边距如下:

创建运动图像阴影 1

现在我们准备创建第一个移动图像阴影。 基本思想是使用PNG文件格式的图像,这样图像的透明背景就不会显示出来。 然后我们将使用滤镜效果来调整亮度、不透明度和模糊度,以将图像转换为阴影。 因为 PNG 图像具有独特的形状,所以阴影也会保持相同的形状。

让我们首先从 Holistic Healer Layout Pack 添加一个分支的相同 PNG 图像。

这里是…

divi 运动图像阴影

在右栏中的图像下添加图像模块。

divi 运动图像阴影

然后将图像上传到模块。

divi 运动图像阴影

图像过滤器

在设计选项卡下,更新过滤器以使图像看起来像阴影。

  • 亮度:0%
  • 不透明度:25%
  • 模糊:8px

divi 运动图像阴影

图像位置

然后给图像阴影一个绝对位置,使其位于上面的主图像之上。

divi 运动图像阴影

图像滚动效果

要移动图像阴影,请更新以下滚动效果。

在水平运动选项卡下…

  • 启用水平运动:是
  • 起始偏移量:0(在 0% 时)
  • 中偏移:-3(在 50% 时)
  • 结束偏移:-6(100%)

在放大和缩小选项卡下…

  • 启用向上和向下扩展:是
  • 起始比例:160%(0%)
  • 中档:160%(50%)
  • 结束比例:160%(100%)

(注意:这会将阴影放大到 160% 并在整个滚动效果中保持不变。但可以随意调整不同点的比例百分比。)

在旋转选项卡下…

  • 启用水平运动:是
  • 起始旋转:30°(0%)
  • 中间旋转:0°(50%)
  • 结束旋转:-30°(1​​00%)

divi 运动图像阴影

到目前为止检查结果

此时,我们可以暂时在section中添加以下边距,这样我们就可以向下滚动实时页面来查看到目前为止的结果。

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

divi 运动图像阴影

这是到目前为止的效果。

隐藏列溢出

为了将图像阴影包含在主图像的同一列中,请打开第 2 列的设置,并更新溢出选项,如下所示:

  • 水平溢出:隐藏
  • 垂直溢出:隐藏

divi 运动图像阴影

现在查看结果。

创建运动图像阴影 2

一旦我们有了第一个图像阴影,就很容易创建另一个。 我们需要做的就是复制现有的图像阴影并更新滚动效果。 双重运动图像阴影将为图像创造美丽的揭幕效果。

复制现有图像阴影

使用图层模式,复制阴影图像。

divi 运动图像阴影

更新滚动效果

然后打开副本的设置并更新滚动效果如下:

在水平运动选项卡下…

  • 启用水平运动:是
  • 起始偏移量:0(在 0% 时)
  • 中偏移:3(50%)
  • 结束偏移:6(100%)

在旋转选项卡下…

  • 启用水平运动:是
  • 起始旋转:210°(0%)
  • 中间旋转:180°(50%)
  • 结束旋转:150°(100%)

divi 运动图像阴影

这是结果……

向主图像添加放大效果

由于列溢出是隐藏的,我们可以在滚动时缩放主图像以创建微妙的放大(或 ken burns 效果),以​​补充移动图像的阴影。

为此,请打开主图像的设置并更新以下内容:

在放大和缩小选项卡下…

  • 启用向上和向下扩展:是
  • 起始比例:100%(0%)
  • 中档:115%(50%)
  • 结束比例:130%(100%)

这将在用户滚动时创建放大效果。

divi 运动图像阴影

最后结果

这是最终的结果。

最后的想法

我希望这些动态图像阴影对你来说和对我一样有趣。 这是一个简单但令人惊叹的设计元素,具有更多创意的潜力。 随意探索添加不同的颜色、混合模式和其他滚动效果,使设计成为您自己的设计。

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

干杯!