如何在滚动上扇出图像以在 Divi 中宣传图片库

知道如何使用 Divi 的滚动效果扇出图像可能是一个微妙而令人印象深刻的设计元素，有助于在登录页面上宣传图片库。 这个想法是在用户向下滚动页面时通过展开像扑克牌一样的图像来吸引用户。

在本教程中，我们将创建一个干净的部分布局，用于宣传包含一系列在滚动时散开的图像的图库。 您可以在此设计中使用您想要的任何图像，这将是任何登录页面的一个很好的补充。

抢先看

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

免费下载布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

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

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

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

第 1 部分：创建布局和模拟内容

对于本教程的第一部分，我们将使用两列行构建部分布局，该行在左列中有一个标题和一个按钮。 在第二部分，我们将扇出图像添加到右列。

部分设置

在向布局添加任何内容之前，请按如下方式更新默认部分的设置：

• 填充物：10vw 顶部，10vw 底部
• 水平溢出：隐藏
• 垂直溢出：隐藏

添加行

接下来，添加一个具有三分之二和三分之一列结构的新行。

行设置

然后使用自定义背景图像更新行设置。 我正在使用文具店登陆页面预制布局中的一个。 之后更新以下内容：

• 背景图片尺寸：实际尺寸
• 背景图片位置：左上角
• 最大宽度：900px

添加文本模块以创建标题

行准备好后，将新的文本模块添加到第 1 列以创建标题。

文字内容

将以下 H1 Heading 添加到正文内容：

<h1>Our Gallery</h1>

文字设置

然后按如下方式更新文本设置：

• 标题字体：Bellefair
• 标题文本对齐（平板电脑和手机）：右
• 标题文字大小：150px（桌面和平板电脑），110px（手机）

添加按钮

在文本模块下，添加一个新的按钮模块。

按钮文字

使用“查看图库”更新按钮文本。

按钮设置

在设计选项卡下，更新以下内容：

• 对齐方式（平板电脑和手机）：右
• 按钮文字大小：14px
• 按钮文字颜色：#ffffff
• 按钮背景颜色：#121212
• 按钮边框宽度：0px
• 按钮字母间距：3px
• 按钮字体：蒙特塞拉特
• 按钮字体样式：TT
• 边距：7vw 顶部

第 2 部分：使用扇出滚动效果创建图像

在本教程的第二部分，我们将创建具有扇出滚动效果的图像。 我们将从中间的图像开始。 我正在使用 Fashion Gallery Page Premade Layout 中的图像。 为了一致的设计，它们应该都是相同的尺寸。 我使用的是 400 像素 x 600 像素。

创建中间图像

在右栏中添加一个新的图像模块。

然后将图像上传到模块。

图像设置

更新移动显示的最大宽度和边距如下：

• 最大宽度（平板电脑和手机）：200px
• 边距（平板电脑和手机）：左 0px

创建右中图像

要创建第二个图像（或右中图像），请复制第一个图像模块。

图像设置

然后打开复制图像模块的设置并更新以下内容：

位置

• 位置：绝对

变换原点

• 变换原点：底部中心

滚动效果

在水平运动下，更新以下内容：

• 启用水平运动：是
• 起始偏移：0（20%）
• 中间偏移：0.5（50%）
• 结束偏移：0.5（100%）

在旋转下，更新以下内容：

• 启用旋转：是
• 起始旋转：0 度（在 20% 时）
• 中间旋转：20 度（50% 时）
• 结束旋转：20 度（100%）

创建正确的图像

要创建将扇出到最右侧的第三张图像，请复制我们创建的第二张图像。

更新滚动效果

在水平运动下，更新以下内容：

• 中间偏移：1
• 结束偏移：1

在旋转下，更新以下内容：

• 中间旋转：40度
• 结束旋转：40 度

如果您没有注意到，我们实际上是将每个图像的水平偏移量增加 0.5 度，旋转偏移量增加 20 度。 这将在图像之间创建相等的间距。 并且因为滚动效果动画是基于底部中心的变换原点，它会给人一种图像像扑克牌一样散开的印象。

在图层框中标记图像

在创建最后两个图像之前，让我们更新当前图像的标签，以免混淆。

创建左中图像

要创建左中图像，我们可以复制右中图像。

然后将其拖动到中间图像上方到列的顶部。

您也可以更新该图像标签。

更新滚动效果

打开左中图像的设置并更新以下滚动效果：

在水平运动下…

• 中间偏移：-0.5
• 结束偏移：-0.5

注意：我们所做的只是将偏移值更改为负数。

在旋转…

• 中间旋转：-20 度
• 结束旋转：-20 度

创建左图

最后，让我们通过复制右侧图像并将其拖动到列的最顶部来创建最终的左侧图像。

您也可以更新标签。

更新滚动效果

打开左侧图像的设置并更新滚动效果：

在水平运动下：

• 中间偏移：-1
• 结束偏移：-1

在旋转…

• 中间旋转：-40 度
• 结束旋转：-40 度

第 1 列 Z 索引

现在列中的图像将与列 1 中的内容重叠。要更改此设置，请打开列 1 的设置并更新 z 索引，如下所示：

• Z指数：10

添加新图像和过滤器

现在，我们需要做的就是用新的/不同的图像更新每个图像。

要获得独特的效果，请将以下滤镜添加到除右侧图像之外的所有图像（使用多选）。

• 饱和度：20%
• 不透明度：85%

结果

这是到目前为止的结果……

旋转列

为了稍微改变设计，我们可以通过旋转父列来旋转图像集合。

为此，请打开第 2 列的设置并添加以下转换选项：

• 变换旋转 Z 轴：40 度

最后结果

这是最终结果。

桌面

药片

电话

最后的想法

在本教程中，我们学习了如何使用 Divi 的滚动效果扇出图像，但您不必止步于此！ 您可以轻松地使用相同的技术来扇出任何模块集合（我认为是简介）。 我用每个图像的滚动效果限制了偏移距离，因此设计并不是真正实用的（即，您无法真正完整地看到每个图像）。 但是，如果需要，您可以增加偏移量以使图像更加可见。

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

干杯!