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 列
图像尺寸
是时候开始添加所有不同的图像模块了！ 如果您只使用带有 880px 宽和 1320 高. 因此，如果您希望从头开始创建完全相同的示例，则应使用具有该特定尺寸集的图像。 但是，如果您想让这项工作适用于任何类型的图像尺寸集，则必须手动调整每个图像模块的视口单位以适应整体设计。
上传图片
前三列中的每一列都将计算两个图像模块。 将第一个图像模块添加到第 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 列行和视口单元创建令人惊叹且独特的拼贴画。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！