如何使用 Divi 的位置选项创建图像包

无论您是在寻找图片库的全新外观，还是只是想要一个漂亮的产品图片展示，本教程都应该有所帮助。 通常，在向 Divi 网站添加图像时，我们可能会将设计限制为每列一张图像。 虽然这在传统上是一种安全且干净的设计，但您可能会发现将同一列中的图像分组可以创建漂亮的图像束设计，在单列或多列布局中看起来很棒。

在本教程中，我们将向您展示如何使用 Divi 的内置位置选项来设计 3 个可以以各种方式用于您的网站的创意图像包。

让我们开始吧。

抢先看

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

图像包设计 #1

开始建筑设计#1

图像包设计 #2

开始建筑设计#2

图像包设计 #3

开始建筑设计#3

免费下载布局

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

下载文件

免费下载

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

下载

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

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

单击导入按钮。

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

然后点击导入按钮。

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

让我们进入教程，好吗？

你需要什么开始

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

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

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

设计图像包 #1

对于第一个图像包设计，我们将在中心图像的每一侧放置两个（稍微旋转的）图像。

首先向常规部分添加一列行。

添加中间图像

在列内，添加一个图像模块。

然后将图像上传到模块。

对于这些图像，我们将使用 Fitness Coach Layout Pack 中的屏幕截图。 它们中的每一个都应该是 880 像素 x 1200 像素。

打开图像设置并更新以下内容：

• 宽度：50%
• 模块对齐：居中

添加框阴影如下：

• 盒子阴影：见截图
• 框阴影垂直位置：0px
• 框阴影模糊强度：38px
• 框阴影传播强度：5px
• 阴影颜色：rgba(0,0,0,0.2)

然后将 Z 索引设置为 1，使其位于束中的其他图像之上。

• Z指数：1

添加左图

要在包中创建左侧图像，请在中间图像下添加一个新图像。

使用新图像更新图像（确保它们的大小相同以获得最佳效果）。

在设计选项卡下，按如下方式更新宽度：

• 宽度：30%

然后添加框阴影如下：

• 盒子阴影：见截图
• 阴影颜色：rgba(0,0,0,0.2)

接下来，在左侧中心位置为图像提供一个绝对位置，使其与左侧的中间图像相邻。

• 位置：绝对
• 位置：左中

要使图像稍微旋转，请按如下方式更新变换旋转选项：

变换旋转 Z 轴：-10deg

添加正确的图像

要创建右侧图像，请打开图层框，然后复制左侧图像。

标记图像模块（左图、右图等），以便您以后可以轻松识别它们。 然后打开复制图片的设置，调整位置如下：

• 位置：右中心

然后调整变换旋转选项如下：

• 变换旋转 Z 索引：10deg

不要忘记用新的图像交换重复的图像。

现在检查到目前为止的结果。

将图像包添加到多列

由于图像位于一列内，因此您可以轻松地将此图像束设计添加到多列布局中。

要将图像包添加到多列，请复制包含当前图像包的行。

在重复行中，复制该列以创建包含图像包的另一列。 这将在两列布局中创建图像包。

要创建一行包含三个图像包，请复制两列行，然后复制复制行中的一列。 这将为您提供三列布局。

最后结果

这是图像包 #1 的最终设计。

设计图像包 #2

下一个设计包含一个包含五个图像的图像包 - 一个图像在中心，四个在列的每个角。

首先，创建一个新的常规部分，其中包含四分之一二分之一列的行。

添加中心图像

在中间列中，添加一个图像模块。

然后将图像上传到模块。 我们使用来自家具店布局包的图像（每个 800 像素 x 1200）。

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

• 背景颜色：#f7f3ec

• 宽度：55%
• 模块对齐：居中

• 边距：0px
• 填充：顶部 5%，底部 5%，左侧 5%，右侧 5%

在高级选项卡下，将 Z 索引向上加 1，以确保图像在 Z 空间中保持在其他图像之上。

• Z指数：1

添加左上角图像

要添加左上角的图像，请在中间列的中心图像下添加一个新的图像模块。

将新图像上传到模块。

然后更新设计设置如下：

• 宽度：40%
• 边距：0px 底部

列间距

列的高度由中心图像的高度和我们添加的顶部和底部填充量决定。 因此，为了给我们绝对定位的图像提供适当的间距，我们需要通过增加顶部和底部填充来增加列的高度。

• 填充（桌面）：顶部 12%，底部 12%
• 填充物（平板电脑）：顶部 24%，底部 24%

接下来，给左上角的图像一个绝对位置，如下所示：

• 位置：绝对
• 位置：左上角

添加右上角图像

现在左上角的图像已就位，复制该图像以创建右上角的图像。

（此时，最好为每个图像添加标签，以便以后轻松识别。）

打开复制（右上）图像并更新绝对位置位置：

• 位置：右上角

添加左下角图像

要创建左下角的图像，请复制右上角的图像，并根据需要更新标签。

打开复制（左下）图像的设置并更新绝对位置位置：

• 位置：左下角

添加右下角图像

要创建右下角的图像，请复制左下角的图像，并根据需要更新标签。 然后更新图像并给它一个新的位置：

• 位置：右下角

添加框阴影设计口音

为了添加一个漂亮的设计口音，我们可以为左上角的图像添加一个框阴影，如下所示：

• 盒子阴影：见截图
• 框阴影水平位置：-170px
• 框阴影垂直位置：170px
• 阴影颜色：RGBA(36,57,74,0.07)

在右上角的图像中添加一个免费的框阴影设计口音，如下所示：

• 盒子阴影：见截图
• 框阴影水平位置：170px
• 框阴影垂直位置：170px
• 阴影颜色：RGBA(36,57,74,0.07)

将文本添加到左列

要在设计中添加一些文本，请在左栏中添加一个新的文本模块。

内容

然后使用以下内容更新内容：

<h2>Image Bundle</h2>

文字设计

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

• 标题 2 字体：蒙特塞拉特
• 标题 2 字体样式：TT
• 标题 2 文本对齐方式：右
• 标题 2 文本颜色：#24394a
• 标题 2 文字大小：34px
• 标题 2 字母间距：4px
• 标题 2 行高：1.3em

左列填充

要稍微降低文本，请打开左列的设置，并更新以下填充：

• 填充：剩余 20%

将文本添加到右列

要创建右列文本，请复制左列中的文本模块，然后将其粘贴到右列中。 然后打开文本设置并更新以下内容：

• 标题 2 文本对齐方式：左

右列填充

就像我们对左列所做的一样，将以下填充添加到右列（第 3 列）以关闭文本模块。

• 填充：33% 顶部

部分背景

要完成设计，请打开部分设置并添加以下背景颜色：

• 背景颜色：#f7f3ec

这是到目前为止的结果。

将图像包添加到多列

要将这个图像包添加到多列，复制该行，然后删除重复行中的左右列，只留下带有图像包的列。

使用多选，选择左上角的图像和右上角的图像。 打开设置，取出box-shadow。

然后复制该列一两次以创建包含图像包的多列。

如果您要为图像包创建三列布局，请打开每列的列设置并按如下方式更新填充：

• 填充：顶部 8%，底部 8%

最后结果

这是最终结果。

这是在手机上。

图像包设计 #3

对于最后一个图像包设计，我们将通过微妙的 3D 旋转并排放置 5 个图像，以便为子主题或布局包等内容创建漂亮的显示效果。

添加行

首先，向常规部分添加一列行。

添加中间图像

在行内，添加一个图像模块。

然后将图像上传到图像模块。 我们使用的是来自我们用于设计 #1 的 Fitness Coach Layout Pack 的相同 880px x 1200px 屏幕截图。

在设计选项卡下，更新大小选项如下：

• 宽度：30%
• 模块对齐：居中

然后给图像一个微妙的框阴影：

• 盒子阴影：见截图
• 框阴影垂直位置：-12px
• 框阴影模糊强度：28px
• 阴影颜色：rgba(0,0,0,0.11)

接下来，通过将其设置为 0px 来取出默认的底部边距。

• 边距：0px 底部

要确保图像在重叠时保持在其他图像之上，请调整 Z 索引。

• Z指数：2

添加列透视

在我们将其余的图像添加到图像包之前，我们需要将自定义 CSS 添加到列中，当使用变换选项旋转图像时，它将为图像添加透视图。 这将创建逼真的 3D 效果。

添加左中图像

现在我们已经有了我们的视角，我们可以开始添加其他图像。

要创建左中图像，请复制中间图像。

根据需要更新图层框中的图像标签，然后使用新图像更新复制图像模块。

打开图像的设置并更新绝对位置位置和 Z 索引，如下所示：

• 位置：左下角
• Z指数：1

然后添加以下变换选项来定位和旋转图像。

• 变换平移 X 轴：75%
• 变换旋转 X 轴：30 度

添加左图

要创建左侧图像，请复制我们刚刚创建的中间左侧图像。

打开新图像的设置并更新宽度：

• 宽度：20%

然后调整transform translate选项如下：

• 变换平移 X 轴：0px

然后调整 Z 索引，使图像保持在左中间图像的后面。

• Z 指数：0

添加中右图像

接下来，我们将向图像包中添加右中图像。

要创建图像，请打开图层弹出窗口。 然后复制左中图像，将复制的图像拖到左图像下方，然后相应地标记它（即“右中图像”）。

打开中间右图的设置，改变绝对位置位置如下：

• 位置：右下角

然后调整变换选项如下：

• 变换平移 X 轴：-75%
• 变换旋转 X 轴：-30deg

添加右图

要创建正确的图像（最后一个），我们可以复制左图像。 然后将复制的图像拖到中间的右图下方，并将其标记为“右图”。

打开右侧图片设置，更新绝对位置位置如下：

• 位置：右下角

接下来，调整变换旋转。

• 变换旋转 X 轴：-30deg

查看到目前为止的结果。

这是添加到多列的相同图像包。

最后的想法

一旦我们了解了 Divi 的绝对位置选项的工作原理，我们就可以使用它来创建一些非常棒的图像包设计。 这些图像包最好的部分是它们存在于单个列中，因此它们在多列上看起来很棒，并且在移动设备上也能完美缩放。

我希望这会给你一些灵感，为你的下一个项目创建惊人的图像显示。

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

干杯!