如何使用 Divi 的视频模块创建令人惊叹的网格布局（第 3 部分）
已发表: 2017-06-22欢迎在我们的迷你系列如何使用 Divi 的视频模块创建令人惊叹的网格布局中发布 5 个中的 3 个。 在本系列中，我们将向您介绍如何使用 Divi Visual Builder 从头开始创建令人惊叹的网格布局。 如果您担心这太复杂，请再想一想！ 所有这些布局都可以使用 Visual Builder 创建和设置样式，而无需额外的代码。
欢迎来到系列的第 3 部分！ 我有一种感觉，这个会给你带来一点惊喜。 今天，我将向您展示如何使用半透明背景颜色和渐变来创建多个边框颜色变化。 最后，我将向您展示如何只需单击几下即可完全更改配色方案。 这种布局由两个 1/4 1/2 1/4 列结构行和一个 1/4 1/4 1/4 1/4 列结构行的组合组成。
我将使用视频模块添加视频，并使用模糊模块作为网格中间的标题和描述部分。 与本系列中的所有布局一样，这个布局也很容易使用 Divi 实现。
这是最终结果的样子
概念与灵感
实际上，最初的布局想法来自流行的网站 giphy.com，因为它在中间列中展示了一个较大的特色 gif，周围是较小的 gif。 我认为这个想法适用于视频网格布局，因为这将允许您展示更大的视频以及围绕它的其他视频。 然而，我并不关心周围 giphy 图像的砖石风格，所以在这篇文章中，我采用了偶数列方法来使所有内容更加对称。
除了布局之外，我还想更多地探索 Divi 的半透明背景功能，以创造一些独特的东西。
让我们开始吧。
使用 Divi 实现设计
首先，添加具有 1/4 1/2 1/4（2 列）结构的常规部分。 
接下来将视频模块添加到第一列。
更新视频设置如下：
内容选项
视频 MP4/URL：[输入视频的 URL]
图像叠加 URL：[为您的视频上传自定义图像或从视频自动生成图像]
保存设置
然后直接在Video Module下面添加一个Divider Module。
在分隔线设置中，在
现在因为我们要添加很多视频，我发现复制刚刚创建的视频模块并拖到正确的位置更容易。 然后我可以回去更改视频 URL 并稍后覆盖图像。
首先，让我们复制刚刚创建的视频模块并将其拖到第一列的分隔模块下。
之后，您可以继续复制第一列元素（视频、分隔线和视频）并将它们拖到最右侧的列。 然后您可以复制其中一个视频模块并将其拖动到中心列。 更新所有视频内容后，您应该会看到如下所示的内容……
在我们继续之前，继续将您的背景颜色添加到您的部分和行列。 转到部分设置（蓝色区域）并更新以下内容：
内容选项
背景颜色：#333333
设计选项：
自定义填充：0px 顶部，0px 底部
保存设置
现在使用以下更新编辑您的行设置：
内容选项：
背景渐变颜色：rgba(255,255,255,0.58) 和 #b684e8
渐变方向：360度
第 1 列背景颜色：rgba(0,0,0,0.69)
第 2 列背景颜色：rgba(255,255,255,0.45)
第 1 列背景颜色：rgba(0,0,0,0.85)
设计选项
使这一行全宽：是
使用自定义装订线宽度：是
天沟宽度：1
均衡柱高：是
自定义填充：0px 顶部，0px 底部
自定义边距：0px 顶部，0px 底部
第 1 列自定义填充：顶部 20 像素、右侧 20 像素、底部 20 像素、左侧 20 像素
第 2 列自定义填充：顶部 20 像素，右侧 20 像素，底部 20 像素，左侧 20 像素
第 3 列自定义填充：顶部 20 像素，右侧 20 像素，底部 20 像素，左侧 20 像素
保存设置
现在是添加第二行的时候了。 继续在第一个下面添加另一个 1/4 1/2 1/4（3 列）结构行。
为了让自己在设置行设置选项方面领先一步，请使用右键单击功能复制第一行的样式并将其粘贴到第二行。
现在，对于您的行设置，您需要更新的只是内容选项，如下所示：
背景渐变：无（擦除被复制的那个）
第 1 列背景颜色：rgba(0,0,0,0.69)
第 2 列背景颜色：rgba(0,0,0,0.0) – 这与无或透明相同
第 3 列背景颜色：rgba(0,0,0,0.35)
现在您的行设置已完成，继续复制并拖动（或复制并粘贴）视频模块到第一行（最左侧）和第三行（最右侧）中。 然后更新视频内容。
对于中间列，添加一个模糊模块并更新设置如下：
内容选项
标题：[输入页面或视频的标题]
内容：[输入视频或页面的内容或描述]
设计选项
文字颜色：浅
文字方向：居中
标题字体：PT Sans
标题字体大小：52px
标题字母间距：1px
正文字体：PT Sans
正文字体大小：20px
现在终于到了最后一排的时候了。 当然，如果需要，您可以添加更多。
继续并在前一行下方添加一个 1/4 1/4 1/4 1/4（4 列）结构行。
像之前一样，复制前一行的设计并粘贴到当前行，让您在设计上有一个小小的领先。
然后按如下方式更新行设置：
内容选项
第 1 列背景颜色：rgba(0,0,0,0.34)
第 2 列背景颜色：rgba(0,0,0,0.69)
第 3 列背景颜色：rgba(0,0,0,0.34)
第 4 列背景颜色：rgba(0,0,0,0.69)
设计选项
第 4 列自定义填充：20px 20px 20px 20px
保存设置
接下来将视频模块复制或复制到四列中的每一列。 更新完所有视频内容后，您就完成了！
看看你的新网格布局…
创建轻版本
要将之前的深色视频网格设计更改为浅色版本，您只需更新一些设计选项即可。
更新部分设置如下：
内容选项：
背景颜色：rgba(0,0,0,0.12)
更新所有行设置如下：
基本上回到三行设置中的每一个，无论你在哪里看到正在使用的背景颜色，只需单击白色调色板选项。 这会将所有深色半透明的深色背景变成半透明的浅色背景。
更新 Blurb 模块设置如下：
设计选项
文字颜色：深色
这样就可以了！ 看看轻版。
使用剖面背景选项轻松更改设计
由于网格是用半透明背景构建的，您可以轻松更改部分背景颜色、渐变或图像，使您的网站焕然一新，与您的网站完美匹配。
看看它可以通过将背景图像添加到部分设置而产生的差异。
另一种匹配您网站的方法是匹配我们在第一行中添加的背景渐变的颜色。
接下来…
本系列的下一篇文章将是一种完全不同的感觉。 这一切都是为了让事情保持干净和简单。 还有一些背景渐变技巧。
在此之前，我期待在评论中收到您的来信。
享受！