如何扩展模块以在 Divi 中创建独特的列布局

您使用 Divi Builder 设计的每个新页面都使用许多不同的列布局进行结构化。 Divi 包括每行的内置列布局，范围从一列一直到六列。 但是，有时，您可能会觉得需要调整这些列以获得更独特的布局。 今天，我将向您展示一种创造性的方法来做到这一点。

在本教程中，我将向您展示一种简单的设计技术，它允许您使用负边距扩展模块以占据多列。 这种技术将允许您设计一些您可能认为不可能的独特的自定义布局。

让我们开始吧。

抢先看

为了更好地了解我们将要构建的内容，以下是使用此技术的设计前后版本。

前

这是不使用自定义边距将模块扩展到其他列的布局设计。

后

这是扩展了两个图像模块和三个标有数字“01”、“03”和“05”的文本模块后的布局。

这种变化是微妙的，但您应该能够看到模块已经扩展到占据相邻列。 实现这一目标唯一需要的就是 -100% 的简单边距设置。

平板电脑上的结果更令人兴奋。

理解概念

默认情况下，每个 Divi 模块的宽度为 100%，这意味着您放置在列中的每个模块将跨越它所在列的整个宽度。 装订线宽度是 Divi 用来确定每列之间的空间量的宽度。 因此，对于本教程，将 Gutter 宽度设置为 1 以消除该空间非常重要。

下图说明了每个模块如何跨越设置为 1 的装订线宽度的行中的列的全宽。

现在，如果您向模块添加负边距（左或右），您可以轻松扩展该模块以占据多列。 这允许您为您的页面创建您可能没有考虑过的自定义列布局。

在此图中，您可以看到，通过向第 5 列中的模块添加 -100% 左边距，它将模块向左扩展以占据第 5 列和第 4 列。

使用六列布局的好处之一是设计可以很好地保留在平板电脑上。

此外，由于列从左到右的排序方式，模块通常应向左扩展，以便内容不会隐藏在列后面。 如果您设置了背景颜色，则尤其如此。 因此，如果遇到模块内容隐藏在列后面的问题，您可能是在错误的方向扩展模块。

为什么要使用六列布局？

为这种设计技术使用六列布局有三个主要原因。 第一个原因是它为您提供了更多的列来使用。 第二个原因是六列布局在平板电脑上转换为三列布局，这将很好地保留设计元素。 第三个原因是列将在移动设备上保持其顺序，因此列背景颜色将保持不变。 这对网格布局很有帮助。

这种设计也适用于 1/2 1/6 1/6 1/6 列布局和 1/6 1/6 1/6 1/2 列布局，因为它们都将在平板电脑上保留三列。

实施设计

为了展示这种设计技术的工作原理，我将引导您完成为特色产品构建简单网格布局的过程。 然后，我将向您展示如何将模块扩展到其他列以创建自定义布局设计。

设置您的部分和行

首先，创建一个新页面并部署可视化构建器。 然后选择“从头开始构建”。 然后继续向第一部分添加 1/2 1/6 1/6 1/6 列布局。

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

背景颜色：#222831
天沟宽度：1
均衡柱高：是
自定义边距：0px 顶部，0px 底部
自定义填充：0px 顶部，0px 底部

保存设置。

由于此设计的所有三行都将共享这些行设置。 继续复制该行以创建第二行。 然后将第二行更改为六列布局。

要创建第三行，只需复制第二行。

将模块添加到第 1 行

在顶部第一行的第一列中，添加具有以下设置的文本模块：

文字颜色：浅
文字文字大小：16px
自定义填充：2vw 顶部，2vw 底部，2vw 左，2vw 右

在第一行的第二列中，添加具有以下设置的模糊模块：

标题：[输入标题]
内容：[删除]
图标：[选择图标]
图标颜色：#eeeeee
图标字体大小：50px
文字颜色：浅
文字方向：居中
自定义填充：3vw 顶部，2vw 底部

保存设置

在第三列中，添加图像。

在最后一列中，我们希望将其留空，以便我们可以扩展图像模块以填充该列。 但是我们不想让它完全为空，以便在移动设备上堆叠时该列处于活动状态。 所以，最简单的做法就是添加一个分隔线模块，并选择不显示分隔线。 然后我们可以隐藏智能手机的分隔线。

更新分频器设置如下：

显示分隔线：否
禁用：电话

将模块添加到第 2 行和第 3 行

现在让我们转到第 2 行。在第一列中，复制并粘贴您在第一行第二列中创建的模糊模块。 然后将图标和标题文本更改为黑色。

然后使用以下内容将文本模块添加到第二列：

内容：

<h2>Product</h2>
01

文字文字颜色：#ffffff
文字文字大小：50px
文本行高：1em
文字方向：右
标题 2 文本对齐方式：左
标题 2 文本颜色：#ffffff
标题 2 行高：3em
自定义填充：2vw 顶部，2vw 底部，2vw 左，2vw 右

Next 复制刚刚创建的文本 Module 并将其粘贴到第 4 列和第 6 列中。

您还可以在第 3 行的第 3 列、第 5 列和第 6 列中粘贴相同的文本模块。之后，您可以使用内联编辑器更改每个文本模块的编号，以便您可以查看这些模块如何堆叠稍后移动。

在第 3 行的第 2 列中，添加另一个图像。

之后，通过复制和粘贴您在第 1 行中创建的分隔线，用分隔线填充整个部分的所有空列。

此时您的布局应该是这样的（空方块代表一个分隔模块）：

添加负边距以将模块扩展到其他列

在这一点上，我们可以开始使用负边距扩展我们的模块。 这个过程非常简单。

打开第一行图像的图像模块设置。 由于我们想将图像向右扩展，因此我们将添加 -100% 的右边距。

接下来，将 -100% 左边距添加到第 2 行第 3 列的文本模块。

现在复制模块样式并将它们粘贴到第 2 行第 6 列的文本模块以及第 3 行第 5 列的文本模块中。

剩下的就是扩展第 3 行第 2 列中的图像。使用 -100% Left 的自定义边距更新图像模块。

为您的列添加背景颜色

设计的最后一个阶段是为您的列添加背景颜色。 对于第一行（顶行），添加以下内容：

第 1 列背景颜色：#393e46

对于第二行，添加以下内容：

第 1 列背景颜色：#eeeeee
第 4 列背景颜色：#7971ea
第 5 列背景颜色：#393e46
第 6 列背景颜色：#393e46

对于最后一行，添加以下内容：

第 3 列背景颜色：#7971ea
第 6 列背景颜色：#7971ea

这就是桌面设计。 现在让我们确保在移动设备上一切正常。

调整智能手机显示屏的布局

现在，当前的布局在台式机和平板电脑上看起来很棒，但我们添加的那些负边距需要在智能手机上进行调整。

通常，如果我想修复智能手机的负边距，我只需在智能手机设备的模块设置中将左边距设置为 0%。 但是，仍然需要对 479 像素和 767 像素宽之间的屏幕尺寸进行调整。 因此，修复智能手机负边距的最佳方法是使用自定义 CSS 片段。

转到页面设置并在高级选项卡下添加以下自定义 CSS：

/** Fixes negative margins on smartphone**/

@media only screen and (max-width: 479px){
.et_pb_module {
    margin-left: 0%!important;
    margin-right: 0%!important;
}
}

当屏幕大小等于或小于 479px 宽时，此 CSS 代码段的作用是将所有模块的左右边距设置为 0%。 这很好地解决了问题！

现在让我们看看最终的设计。

最后的想法

使用负边距扩展模块是一种在台式机和平板电脑上获得独特布局设计的便捷方式，而无需求助于一堆 CSS 来更改 Divi 的默认列布局。 关于这种设计技术，我最喜欢的事情之一是布局在平板电脑上看起来有多漂亮。 希望它对您的下一个项目有用。 如果有的话，它总是有助于更深入地了解 Divi。

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

干杯!