如何在 Divi 中设计几何网格布局

为您的网站设计几何网格布局可以非常漂亮。 我最喜欢的几何设计元素之一是六边形。 六边形可用于设计均衡和谐的网格布局（想想蜂巢）。 但设计可能会带来挑战。 您已经创建了用作内容背景的形状。 然后你必须将你的内容放入形状中。 然后你必须确保这些形状在不同的屏幕尺寸上正确间隔。 不过别担心。 这并不像你想象的那么难。

至于创建这些几何形状，有一些方法可以使用一些高级自定义 CSS 来实现，但我认为最简单的方法是创建图像。 那么剩下的就可以使用Divi的力量了。

在本教程中，我将向您展示使用 Divi 创建六边形图像来设计几何网格布局是多么容易。

让我们开始吧！

抢先看

这是我们将在本教程中构建的几何网格设计的一瞥。

你需要什么

• 一个照片编辑器（我将使用 Sketch）来创建六边形图像。 或者现在，您只需将此图像拖到桌面上即可使用。
  
• Divi 主题（已安装和活动）

创建六边形背景图像

要构建六边形背景图像，我将使用照片编辑器 Sketch（仅适用于 Mac）。 但是，这应该很容易在任何数量的照片编辑器（如 Photoshop、Illustrator 或 Gimp）上创建。

如果您不想打扰教程的这一部分，您现在可以随时将此图像拖到桌面上。 这是一个黑色的半透明六边形图像，考虑到它可以让背后的背景颜色显示出来，它应该适用于许多设计。

这是在草图中创建图像的方法。 首先，单击右上角的插入图标。 然后将鼠标悬停在形状选项上并选择六边形形状。

现在按住 shift 键并在画布上单击（并按住）并拖动鼠标以创建形状，然后松开鼠标。 按住 shift 可以为您的形状创建完美的方形尺寸。 现在更新右侧栏中形状的属性，如下所示：

尺寸：360宽，360高
面数：6
填充颜​​色：000000 hex, 0 R, 0 G, 0 B, 30 A（基本上这是一个黑色，不透明度为 30%）

然后将您的图像导出为 png 并将其导入您的 WordPress 媒体库以备后用。

创建具有三列的第一部分

这种设计将有三个部分堆叠在一起，每个部分都有一行保存我们不同的列结构。 第一部分将具有我们的三列结构，第二部分将有两列，第三部分将只有一列。

要创建第一部分，请创建一个新页面并部署可视化构建器以从头开始构建新布局。 将为您创建一个新的常规部分，可视化构建器将提示您为您的部分选择列结构。 选择三列结构（三分之一三分之一三分之一）。

现在，在我们开始编辑我们的行并添加我们的模块之前，让我们通过使用以下内容更新部分设置来为我们的部分提供背景颜色渐变：

背景渐变左颜色：#2b87da
背景渐变右颜色：rgba(0,0,0,0.6)

自定义行设置并将六边形图像添加到您的列背景

为了实现我们正在寻找的设计，我们需要将我们的背景图像添加到我们三列行的每一列。 因此，对于每一列，将六边形图像（应为 360 像素 x 360 像素）添加到每一列。 然后将背景图像大小设置为“实际大小”，将背景图像重复设置为“不重复”。

确保对第 1、2 和 3 列背景图像执行此操作。

接下来，我们需要自定义行设置，以创建六边形背景图像在每列中正确显示所需的间距。 这种间距也将有助于保持响应并最大化移动设备上的水平空间。

更新行设置如下：

使用自定义宽度：是
单元： ％
自定义宽度：100%
使用自定义装订线宽度：是
天沟宽度：2
均衡柱高：是

自定义填充（桌面）：0px 顶部，0px 底部，10% 左，10% 右
自定义填充（平板电脑）：左 0%，右 0%

暂时保存您的行设置。

将您的 Blurb 模块添加到每一列

将新的简介模块添加到您的第一列并按如下方式更新简介设置：

内容：“您的内容在这里。 内联或在模块内容设置中编辑或删除此文本。” （保持简短，因为您的六边形图像中只有有限的空间）
使用图标：是
选择图标（显然你想要的任何人）

然后更新设计设置如下：

图标颜色：#66d1ff
图标字体大小：66px
文字方向：居中
文字颜色：浅
宽度：360px（与六边形背景图片的宽度相同）
模块对齐：居中
自定义填充：顶部 85 像素，底部 85 像素，左 10%，右 10%

首先添加您想要在六边形前面显示的内容很重要，以便您现在如何调整模糊模块的间距以完全显示背景图像。 请注意，我添加了 85px 的顶部和底部填充。 这足以暴露六边形背景，即使在将浏览器调整为移动设备尺寸时也是如此。

保存您的简介模块后，继续复制并将其粘贴到第 2 列和第 3 列，以便出现所有三个简介。

现在我们已经成功地将六边形背景添加到我们的第一行简介中。

用两列创建第二个部分

要创建我们的第二部分，请继续复制第一部分，然后使用以下背景颜色更新部分设置：rgba(0,0,0,0.6) 并删除现有的渐变。

然后将您的行的列结构更改为两列并删除右下列中的额外模块。

更新行设置如下：

天沟宽度：3
自定义边距（桌面）：-145px 顶部
自定义边距（平板电脑）：-70px 顶部
自定义填充（桌面）：左 24%，右 24%

我在左边和右边添加了更多的填充来定位上面部分中模糊之间的六边形背景（每边 24% 的填充让我们非常接近）。 我还将装订线宽度改回 3，以适应由于更多行填充而减少的列空间。 然后我使用 -145px 的边距将行拉高一点。

如您所见，网格布局正在融合在一起。

用一列创建第三部分

对于最后一部分，继续复制该部分。 然后转到第一部分并复制背景渐变并将其粘贴到您刚刚创建的第三部分。 然后在将鼠标悬停在渐变颜色预览上时单击“切换”图标来翻转渐变。 然后删除第三部分中的背景颜色。

现在将行列结构更新为一列并删除额外的模糊模块。

为了在较小的浏览器窗口上获得六边形图像背景与其他模糊缩放，我们需要向行添加更多填充。 这将使六边形图像稍微挤压在一起以匹配其他图像。 这只是一个让设计更加一致的小细节。

在行设置中，更新自定义填充如下：

自定义填充（桌面）：左 37%，右 37%

现在让我们看看我们的几何网格布局的最终​​结果。

这是它在移动设备上的样子。

以下是它如何适应不同的屏幕尺寸。

最后的想法

本教程向您展示如何通过向列添加六边形背景来创建几何网格，但您可以轻松地应用相同的技术来添加所需的任何背景图像。 这为设计漂亮的布局以让您的网站与众不同打开了许多大门。

我希望你发现它对你的下一个项目有帮助，我期待在评论中收到你的来信。

干杯!