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

已发表: 2017-06-21

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

我们进入了该系列的第 2 部分！我不得不说我真的很喜欢构建这些布局。今天，我将向您展示如何为您的视频创建类似于产品页面或登录页面的功能部分的网格布局。此布局由一系列 1/2 1/2 列的行组成，每行包含一个视频及其在两列中的每一列中的相应描述。然后下一部分将视频和说明的顺序从左到右，然后从右到左交替。由于每一行都拉伸页面的全宽，并且每一列保持相同的垂直高度，因此布局在所有屏幕尺寸上看起来都很棒。

我将使用视频模块添加视频，并使用模糊模块作为与视频相邻的标题和描述部分。与本系列中的所有布局一样，使用 Divi 实现这个布局也非常容易。

这是最终结果的样子

视频网格

概念与灵感

无论如何，这个概念并不新鲜。我实际上受到启发创建这种布局，因为它对用户很熟悉。许多网站使用类似的布局来展示其产品或服务的功能。它允许更大的内容区域，我认为这为文本和视频的醒目图像创造了巨大的负空间。

对于使用视频来宣传产品功能但也有许多其他用途的公司来说，这将是完美的选择。我希望你在下一个项目中利用这个设计。

让我们开始吧。

使用 Divi 实现设计

订阅我们的 YouTube 频道

首先，添加具有 1/2 1/2（2 列）结构的常规部分。

视频网格

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

视频网格

更新视频设置如下：

内容选项

视频 MP4/URL：[输入视频的 URL]
图像叠加 URL：[为您的视频上传自定义图像或从视频自动生成图像]

视频网格

设计选项

播放图标颜色：rgba(255,255,255,0.87)

视频网格

保存设置

接下来在与您刚刚创建的视频模块直接相邻的右栏中添加一个 Blurb 模块。

视频网格

更新 Blurb 设置如下：

内容选项：

标题：[输入视频标题]
内容：[输入视频说明]
链接：[如果需要，您可以输入链接网址到另一个页面]
使用图标：是
图标：[选择图标]

视频网格

设计选项：

图标颜色：#666666
文字颜色：浅
文字方向：居中
标题字体：Roboto
标题字体大小：52px
标题字母间距：1px
正文字体：Open Sans
正文字体大小：20px
正文颜色：#dddddd
桌面上的自定义填充：5% 顶部（您可能需要根据描述中的文本量进行调整）
平板电脑和智能手机上的自定义填充：顶部 20 像素，底部 20 像素

视频网格

高级选项

图像/图标动画：从右到左（此动画与箭头图标结合将进一步引起对左侧视频的注意。

视频网格

保存设置

在我们继续之前，请继续将您的背景图片添加到您的部分。转到部分设置（蓝色区域）并更新以下内容：

内容选项：

背景图片：[输入背景图片（我的是 2000 x 2200）]

使用视差效果：是
视差法：真视差

视频网格

设计选项：

自定义填充：0px 顶部，0px 底部

视频网格

保存设置
接下来使用以下更新编辑行设置：

内容选项

第 2 列背景颜色：rgba(0,0,0,0.69)

设计选项

使这一行全宽：是
使用自定义装订线宽度：是
天沟宽度：1
均衡柱高：是
自定义填充：0px 顶部，0px 底部
自定义边距：0px 顶部，0px 底部
第 1 列自定义填充：顶部 0px，底部 0px
第 2 列自定义填充：顶部 0px，底部 0px

事情现在开始到位。你有你的背景图片，你已经创建了你的第一行。现在您已准备好复制该行。单击可视化构建器中行菜单栏上的重复图标。