如何为独特的破碎网格设计错开 Divi 列和模块
已发表: 2019-07-10现代网页设计仍然是打破网格。 这是通过在打破网格布局的正常结构的位置交错元素和设计重点来完成的。 你可以看到我们在我们很棒的 Divi 布局中应用了很多这些破碎的网格设计。 通常，这涉及将模块移动到列或行之外的事情，以便它们扩展到容器之外或与页面上的其他元素重叠。 但是您可能没有想过移动实际的列。
在本教程中，我将向您展示如何为独特的破碎网格设计错开 Divi 列和模块。 使用 Divi 的新列选项，您可以轻松移动列及其包含的模块。 这使您可以设计具有独特样式的模块和列，以实现创造性的破碎网格设计。
让我们开始吧！
抢先看
以下是我们将在本教程中构建的设计示例的快速浏览。
免费下载 Stagger Divi 列和模块布局
要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
免费下载
加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！
要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。
让我们进入教程好吗？
基本思想解释
如何为独特的破碎网格设计错开 Divi 列和模块背后的基本思想涉及使用 Divi 的转换转换属性来定位列及其包含的模块。
一旦元素交错排列，您就拥有了柱子和模块的所有设计功能，可以添加设计重点，从而创建独特的破碎网格设计。
因此，例如，您可以为您的列添加一个带有框阴影的独特背景（颜色、图像等），并为您的模块添加一个完全不同的背景和框阴影。
现在您有了基本的想法，让我们从头开始创建设计。
你需要什么开始
首先，您需要具备以下条件：
- 已安装并激活 Divi 主题
- 在前端从头开始构建的新页面（可视化构建器）
- 用于模拟内容的几个图像
之后，您将有一个空白画布开始在 Divi 中进行设计。
在Divi中交错列和模块以创建独特的破碎网格设计
首先，创建一个具有两列行的新常规部分。
然后在第 1 列中添加一个号召性用语模块。
将标题文本更改为“Divi Module”或您选择的其他简短标题。
然后使用深色背景颜色更新模块，然后按如下方式更改标题文本：
背景颜色：#333333
文本对齐：左
标题字体：苦涩
标题文字大小：50px
标题字母间距：2px
然后更新号召性用语模块按钮，如下所示：
按钮文字大小：16px
按钮文字颜色：#333333
按钮背景颜色：
按钮边框颜色：#ffffff
按钮边框半径：25px
按钮字母间距：2px
按钮字体：Raleway
按钮字体粗细：粗体
按钮字体样式：TT
接下来，复制模块并在第 2 列中粘贴副本，以便在每一列中都有相同的号召性用语模块。
更新行间距
现在让我们为行添加一些顶部和底部边距，为设计腾出空间。
保证金：顶部 20%，底部 20%
添加列背景图像
尽管我们还不能看到它们，但我们将向每一列添加背景图像。 一旦我们使用变换翻译将我们的模块移到列容器之外，它们就会变得可见。
继续并打开第 1 列的设置并添加背景图像。
然后打开第 2 列的设置并添加背景图像。
为每列添加一个框阴影
打开第 1 列设置并添加以下框阴影：
盒子阴影：见截图
框阴影水平位置：0px
框阴影垂直位置：0px
框阴影传播强度：100px
阴影颜色：rgba(151,178,193,0.21)
然后将相同的框阴影样式添加到第 2 列。为了加快速度，您可以使用右键单击选项复制第 1 列中的框阴影样式，然后将它们粘贴到第 2 列中的框阴影样式。
您会注意到框阴影会重叠。 使用半透明的盒子阴影颜色将有助于创建一个很酷的重叠效果。 这是在设计中使用框阴影的好处。 与边框不同，您可以添加看起来像边框的大阴影，但它们不会影响布局的实际间距。
使用 Transform Translate 错开 Divi 列
此时，我们准备开始交错列和模块以完成破碎的网格设计。 首先，我们需要将列移动到页面的外边缘。 然后我们可以稍后将模块移向中心。
交错列 1
打开第 1 列设置并添加以下转换转换属性。
变换 X 轴平移：25%
Transform Translate Y 轴：-25%（桌面），-5%（平板）
交错列 2
对于第 2 列，添加以下转换转换属性。
变换 平移 X 轴：-25%
Transform Translate Y 轴：25%（桌面），5%（平板）
使用 Transform Translate 错开模块
现在我们准备通过将模块移出列容器来交错模块。 这将暴露列背景图像，并允许我们向模块添加另一个框阴影，以获得额外的重叠设计元素。
交错模块 1
在第 1 列中打开号召性用语模块的设置并更新以下内容：
变换 平移 X 轴：-60%
Transform Translate Y 轴：50%（桌面），10%（平板）
向模块 1 添加框阴影
然后将以下框阴影添加到第 1 列的号召性用语模块中：
盒子阴影：见截图
框阴影水平位置：0px
框阴影垂直位置：0px
框阴影传播强度：100px
阴影颜色：rgba(151,178,193,0.21)
交错模块 2
要移动第 2 列中的模块，请更新以下内容：
变换 X 轴平移：60%
Transform Translate Y 轴：-50%（桌面），-10%（平板）
向模块 2 添加框阴影
接下来，我们可以在第 2 列的号召性用语模块中添加一个框阴影。我们需要使这个框阴影几乎完全透明，因为它会与模块 1 重叠，我们不想让内容难以阅读。
盒子阴影：见截图
框阴影水平位置：0px
框阴影垂直位置：0px
框阴影传播强度：100px
阴影颜色：rgba(151,178,193,0.09)
添加行框阴影框
为了完成设计，让我们向作为位于背景中的框架设计元素的行添加一个框阴影。
盒子阴影：见截图
框阴影垂直位置：0px
阴影颜色：#97b2c1
最终设计
现在让我们看看最终的设计。
桌面
药片
电话
尝试不同的设计
这种设计很酷的地方在于，它允许您轻松更改新设计的模块数量、颜色和间距。 您也可以在不同位置错开 Divi 列和模块。
为模块添加间距以创建与模块大小相同的列背景图像
因为列的大小是由它包含的内容的大小决定的，所以你向模块添加的任何空间也会增加列的大小。 由于我们的专栏已经与背景图像交错，这是一种让背景图像始终随模块大小缩放以实现平衡设计的简单方法。
例如，打开第 1 列中的号召性用语模块的设置并按如下方式更新填充：
填充：顶部 20%，底部 15%
并注意第 1 列背景图像如何随模块大小缩放。
添加更多模块
同样，向模块添加更多填充会增加列背景的大小，在列中添加更多模块也会增加列背景的大小。
例如，复制第 2 列中的模块并注意背景图像如何扩展以容纳列中两个模块所需的空间。
然后您可以将第 2 列中的顶部模块向右移动一点以获得不错的替代设计。
这是结果。
改变颜色
如果您希望将布局与您自己的配色方案相匹配，一个很好的方法是更新框阴影颜色。
以下是更新第 1 列、模块 1 和模块 2 的半透明框阴影时的外观示例。
最后的想法
我希望本教程能给你一些灵感，让你了解如何交错 Divi 列和模块来创建自己独特的破碎网格设计。 该技术非常简单，主要涉及一些变换转换属性以交错列和模块以及一些框阴影以创建独特的破碎设计。 随意探索更多颜色选项并引入更多模块，看看设计可能带你去哪里。
我期待在评论中收到您的来信。
干杯!