如何使用 Divi 的视频模块创建令人惊叹的网格布局（第 4 部分）

欢迎在我们的迷你系列如何使用 Divi 的视频模块创建令人惊叹的网格布局中发布 4 个（共 5 个）。 在本系列中，我们将向您介绍如何使用 Divi Visual Builder 从头开始​​创建令人惊叹的网格布局。 如果您担心这太复杂，请再想一想！ 所有这些布局都可以使用 Visual Builder 创建和设置样式，而无需额外的代码。

我希望你喜欢到目前为止的网格布局。 今天的布局是系列中的第 4 种布局，它是我最喜欢的布局之一（并且实现速度最快）。 使用 Divi 构建不仅简单（且有趣），而且还可以自定义以适应您网站的配色方案。 背景渐变选项是此设计的主要特征，用于创建由对角线分隔的两种色调。 间距也是有目的的，使视频容易被感知。 可以说，这种设计可能超出了我们通常所说的“网格”的范围，但我认为你会看到它的潜力。

所以我们开始了。 我将向您展示使用视频模块和一些自定义背景元素构建此网格设计是多么容易。

这是最终结果的样子

概念与灵感

我一直在寻找一种漂亮而干净的布局，可以组织小批量的视频，用于教程或课程等内容。 这与我对背景渐变的冲动渴望相结合，我想出了这个。 我希望你喜欢它。

让我们开始吧。

使用 Divi 实现设计

订阅我们的 YouTube 频道

首先，添加一个具有全角（1 列）结构的常规部分。

接下来向该列添加一个文本模块。 这将用作页面部分的标题或标题。

更新文本设置如下：

内容选项
内容：[输入标题文字]

设计选项

文字颜色：浅
文字字体：Arimo
文字字体大小：56px
文字字母间距：1px
文本行高：1em

保存设置

您将无法看到任何内容，因为您在白色背景上有白色文本，但这没关系。 让我们继续添加我们的部分背景渐变。 转到部分设置，然后在内容部分下更新以下选项：

背景渐变颜色：#121212，#ffffff
渐变类型：线性
梯度方向：198deg
起始位置：45%
结束位置：45%

接下来，更新您刚刚添加的行的行设置，如下所示：

设计选项

使这一行全宽：是
使用自定义装订线宽度：是
天沟宽度：4
均衡柱高：是
自定义填充：顶部 1%，右侧 5%，底部 5%，左侧 5%

保存设置

现在在刚创建的行的正下方添加具有 ⅔ ⅓（2 列）结构的另一行。

接下来，将视频模块添加到左列。

更新视频设置如下：

内容选项

视频 MP4/URL：[输入视频的 URL]
图像叠加 URL：[输入叠加图像 URL]

保存设置

接下来，复制（或复制）您刚刚创建的视频模块两次并拖动（或粘贴）两个重复的视频，使它们堆叠在右列上。

更新视频的内容以包含正确的 URL 和封面图片。

继续在右栏中的两个视频模块下添加一个 Blurb 模块。 这可以作为该网格内视频的描述。

更新 Blurb 设置如下：

内容选项

标题：[输入标题]
内容：[输入内容或描述]

设计选项

文字颜色：浅

保存设置

现在编辑包含您刚刚创建的视频的行的行设置，如下所示：

内容选项

背景渐变颜色：#4999c1、#121212
渐变类型：线性
梯度方向：198deg
起始位置：45%
结束位置：45%

设计选项

使这一行全宽：是
使用自定义装订线宽度：是
天沟宽度：4
均衡柱高：是
自定义填充：顶部 5%，右侧 5%，底部 5%，左侧 5%

伟大的！ 你完成了第一部分。 我们快完成了。 查看到目前为止的进度。

要创建下一部分，请通过单击“复制部分”按钮复制您刚刚构建的整个部分。

更新新的部分设置如下：

内容选项

背景渐变颜色：#ffffff、#121212（这些颜色与第一部分的顺序相反）

接下来使用以下内容更新复制部分中的文本模块设置：

设计选项

文字文字颜色：#333333

保存设置

要完成此部分，请使用以下内容更新包含您的视频的行设置：

内容选项

背景渐变颜色：#121212、#4999c1（基本上你是切换颜色的顺序，所以它们与第一部分的顺序相反）

保存设置

现在让我们看看添加第二部分后的结果......

如果您还没有注意到，您可以继续轻松添加更多部分，因为我们已经创建了这两个部分。 让我们再创建一个部分，只是为了更好地衡量。 由于我们的部分背景颜色在底部是黑色的，我们希望在顶部以黑色背景颜色开始下一部分。 这意味着我们需要复制顶部的第一部分并将其拖到页面底部的第二部分下方。 这保持了整个页面设计的连续性。

这是添加第三部分后的样子：

就是这样！ 全部完成了。

有反应吗？

这种布局实际上在移动设备上看起来更好，无需任何修改。 一探究竟！

进一步定制

在使用多个部分构建此网格布局后，您可能已经注意到更改颜色以匹配下一个项目的主题是多么容易。 所需要的只是更改部分和行的背景渐变颜色。

如果您想进一步调整设计，我建议为渐变颜色添加半透明以暴露其背后的背景。 或者尝试完全摆脱一种渐变颜色，看看它是什么样子。 以下是仅更改一种渐变颜色可以执行的操作的几个示例……

您还可以将视频滑块模块添加到左列的网格中。

接下来…

接下来是我们在该系列中的最后一个视频网格布局。 这使您可以选择通过微妙的框架元素或以独特的方式使用颜色来使每个视频脱颖而出，从而使内容保持整洁。

在此之前，我期待在评论中收到您的来信。

享受！