如何利用 Divi 的 6 列行和视口单位发挥创意

Divi 的各种柱结构使您基本上可以创建您想到的任何设计。 尽管使用原始形式的列结构是最直接的做法，但您也可以通过将 6 列行中的设计元素与视口单元相结合来更进一步。

例如，您可以创建的东西之一是拼贴画。 您根本不必使用任何图像编辑软件！ 最重要的是，您还可以允许每个图像在单独的灯箱中打开。 在这篇文章中，我们将向您展示如何仅使用 Divi 的内置选项来完成上述所有操作。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸下的结果。

方法

• 我们正在删除部分、行和列之间的所有装订线宽度，以便我们可以手动为每个模块添加自定义边距和填充（使用视口单位）
• 视口单位确保设计元素的定位在所有桌面屏幕尺寸中保持相同
• 我们将单独调整每个设计元素的间距设置以匹配整体拼贴设计
• 由于 Divi 中的响应选项，我们可以确保上述设置不适用于平板电脑和手机

让我们开始创造

后端预览

这是从后端角度来看的最终结果：

添加新部分

您需要做的第一件事是创建一个新页面或打开一个现有页面并向其中添加一个常规部分。

添加新行

列结构

继续使用以下列结构添加新行：

浆纱

在不添加任何模块的情况下，打开行设置并更改大小设置。 这是本教程中的重要步骤。 通过删除部分、行和模块之间的所有默认边距和填充值，我们能够使用视口单位手动为每个设计元素添加间距。

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

也向该行添加一些自定义的左右填充。

• 左填充：6.5vw
• 右填充：6.5vw

将标题文本模块添加到第 6 列

添加内容

是时候开始添加模块了！ 我们将首先向第 6 列添加标题文本模块。包括一些标题 2 副本。

标题文字设置

然后，转到设计选项卡并更改模块的标题文本设置。

• 标题 2 字体：马德望
• 标题 2 字体粗细：粗体
• 标题 2 文字大小：4.2vw（桌面）、10vw（平板电脑）、8vw（手机）
• 标题 2 字母间距：-1px

间距

接下来添加一些自定义间距值，使该行与该行的第 6 列和第 5 列重叠。

• 最高利润率：10vw
• 左边距：-8vw（桌面），0vw（平板电脑和手机）
• 右边距：-50vw（平板电脑和手机）

将描述文本模块添加到第 6 列

添加内容

在第 6 列中我们需要的下一个模块是描述文本模块。 添加一些选择的内容。

间距

然后，转到间距设置并将此模块也推向左侧。

• 最高利润率：2vw
• 左边距：-8vw（桌面），0vw（平板电脑和手机）
• 右边距：-50vw（平板电脑），-3vw（手机）

将按钮模块添加到第 6 列

添加副本

第 6 列中需要的下一个也是最后一个模块是按钮模块。 添加一些选择副本。

按钮设置

然后，转到设计选项卡并更改按钮设置。

• 为按钮使用自定义样式：是
• 按钮文字颜色：#ffffff
• 按钮边框宽度：1px
• 按钮边框颜色：#000000
• 按钮边框半径：0px
• 按钮字母间距：-2px

间距

同样，我们需要通过在间距设置中使用自定义边距值使该模块与第 5 列和第 6 列重叠。

• 上边距：2vw（桌面）、5vw（平板电脑）、10vw（手机）
• 左边距：-8vw（桌面），0vw（平板电脑和手机）
• 右边距：-50vw（平板电脑和手机）
• 左填充：30px
• 右填充：30px

将图像模块 #1 添加到第 1 列

图片尺寸

是时候开始添加所有不同的图像模块了！ 如果您只使用宽度为880 像素、高度为 1320 的图像，我们正在重新创建的示例是 100% 响应的。 因此，如果您希望从头开始创建完全相同的示例，则应该使用具有该特定维度集的图像。 但是，如果您希望对任何类型的图像尺寸集进行此操作，则必须手动调整每个图像模块的视口单位以适应整体设计。

上传图片

前三列中的每一列都将计算两个图像模块。 将第一个图像模块添加到第 1 列。

间距

然后，转到间距设置并使用视口单位增加图像的大小。

• 最高边距：0.5vw（仅限平板电脑和手机）
• 下边距：0.5vw（仅限平板电脑和手机）
• 左边距：-5vw（桌面），0.5vw（平板电脑和手机）
• 右边距：-2vw（桌面），0.5vw（平板电脑和手机）

将图像模块 #2 添加到第 1 列

上传图片

也上传第 1 列中的第二个图像模块。

间距

并更改此模块的间距设置。

• 上边距：0.4vw（台式机），0.5vw（平板电脑和手机）
• 下边距：0.5vw（仅限平板电脑和手机）
• 左边距：-8.1vw（桌面），0.5vw（平板电脑和手机）
• 右边距：3.7vw（台式机），0.5vw（平板电脑和手机）
• 左填充：3vw（桌面），0vw（平板电脑和手机）
• 右填充：3vw（桌面），0vw（平板电脑和手机）

将图像模块 #3 添加到第 2 列

上传图片

进入第二列！ 添加新的图像模块并上传图像。

间距

继续在间距设置中使用自定义边距和填充值来减小图像的大小。

• 最高边距：0.5vw（仅限平板电脑和手机）
• 下边距：0.5vw（仅限平板电脑和手机）
• 左边距：-0.5vw（台式机），0.5vw（平板电脑和手机）
• 右边距：0.5vw（仅限平板电脑和手机）
• 左填充：3vw（桌面），0vw（平板电脑和手机）
• 右填充：3vw（桌面），0vw（平板电脑和手机）

将图像模块 #4 添加到第 2 列

上传图片

也将第二个图像模块添加到第 2 列。

间距

并在此处更改间距设置。

• 最高利润率：0.5vw
• 下边距：0.5vw（仅限平板电脑和手机）
• 左边距：-0.5vw（台式机），0.5vw（平板电脑和手机）
• 右边距：0.5vw（仅限平板电脑和手机）
• 左填充：3vw（桌面），0vw（平板电脑和手机）
• 右填充：3vw（桌面），0vw（平板电脑和手机）

将图像模块 #5 添加到第 3 列

上传图片

转到下一列和最后一列。 添加第一个图像模块。

间距

接下来更改图像模块的间距设置。 这些值将有助于增加图像的大小，您可以在下面的打印屏幕中看到。

• 最高边距：0.5vw（仅限平板电脑和手机）
• 下边距：0.5vw（仅限平板电脑和手机）
• 左边距：-2.5vw（台式机），0.5vw（平板电脑和手机）
• 右边距：-17.5vw（台式机），0.5vw（平板电脑和手机）

将图像模块 #6 添加到第 3 列

上传图片

在第 3 列中添加下一个也是最后一个图像模块。

间距

并通过添加自定义边距值来更改其整个位置。 出于响应目的，我们将此模块添加到第 3 列而不是第 2 列。

• 上边距：-26.7vw（台式机），0.5vw（平板电脑和手机）
• 下边距：0.5vw（仅限平板电脑和手机）
• 左边距：-20.5vw（台式机），0.5vw（平板电脑和手机）
• 右边距：17.3vw（桌面），0.5vw（平板电脑和手机）

为图像模块 #1 启用灯箱

准备好所有图像后，您可以继续并在第一个图像模块的设置中启用灯箱选项。

• 在灯箱中打开：是

复制灯箱选项并应用于部分中的所有图像

为第一个图像模块启用灯箱选项后，您可以复制此选项并将其粘贴到该部分中的所有其他图像模块。

将边界半径添加到图像模块 #1

也为第一个图像模块添加一些圆角。

将边框半径扩展到截面中的所有图像

并将这些圆角延伸到该部分中的所有图像模块以节省时间。

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

最后的想法

Divi 新的 6 列行为您提供了无穷无尽的机会。 在这篇文章中，我们向您展示了如何使用 6 列行和视口单位创建令人惊叹的独特拼贴画。 如果您有任何问题或建议，请务必在下方评论区留言！