如何使用 Divi 重新创建 ET 的点击视频演练

已发表: 2019-08-12

在您的网站上共享视频预览可以增加互动性并帮助访问者更好更快地了解您的产品和/或服务。 现在，在 Elegant Themes 网站上，我们为自己采用了这种方法，并创建了一个直接的点击视频演练设计，允许人们浏览我们一些最受欢迎的功能。 我们已经在 Divi 中重新创建了这个设计，今天，我们将向您展示如何从头开始重新创建它。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

点击视频演练

移动的

点击视频演练

免费下载 Click Video Walkthrough 布局

要使用免费的点击视频演练布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件
免费下载

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

订阅我们的 YouTube 频道

让我们开始重建吧！

添加新的常规部分

首先向您正在处理的页面添加一个新的常规部分。

点击视频演练

添加新行

列结构

继续使用以下列结构添加新行：

点击视频演练

浆纱

尚未添加任何模块，打开行设置并应用以下大小设置：

  • 使用自定义装订线宽度：是
  • 天沟宽度：2
  • 宽度：85vw（桌面），90%（平板电脑和手机）
  • 最大宽度：100%

点击视频演练

第 1 列设置

接下来打开第 1 列设置。

点击视频演练

间距

转到间距设置并在桌面上添加一些顶部填充。

  • 顶部填充：5vw（台式机），0vw（平板电脑和手机）

点击视频演练

CSS 类

转到高级选项卡并添加一个 CSS 类。 稍后，我们将使用这个 CSS 类在平板电脑和移动设备上创建网格效果。

  • CSS 类：项目响应网格

点击视频演练

将 Blurb 模块添加到第 1 列

添加标题

让我们开始添加模块吧！ 对于每个可点击的项目，我们将使用一个 Blurb 模块。 我们将从第一个开始，并将其重用于其余的点击项目。 将新的 Blurb 模块添加到第 1 列并输入您选择的标题。

点击视频演练

选择图标

接下来选择一个图标。

点击视频演练

默认图标设置

继续设计并相应地更改图标设置：

  • 图标颜色：#e8e9ea
  • 图标位置：左
  • 使用图标字体大小：是
  • 图标字体大小：2vw（桌面）、4.5vw（平板电脑）、7vw（手机）

点击视频演练

悬停图标设置

修改悬停时的图标颜色。

  • 图标颜色：#b0c8ff

点击视频演练

标题文字设置

转到标题文本设置并在那里进行一些更改。

  • 标题字体：Lato
  • 标题字体粗细：粗体
  • 标题字体样式：大写
  • 标题文字大小：0.8vw（桌面）、1.7vw（平板电脑）、2.5vw（手机）
  • 标题行高度：2vw（桌面）、4.5vw（平板电脑）、7vw（手机）

点击视频演练

默认间距

我们将使用一些跨不同屏幕尺寸的自定义填充值来塑造 Blurb 模块。

  • 顶部填充：1vw（桌面）、2vw（平板电脑）、3vw（手机）
  • 底部填充：0.5vw（台式机），1.5vw（平板电脑和手机）
  • 左填充：1.2vw（台式机和平板电脑），5vw（手机）
  • 右填充：1.2vw（台式机和平板电脑），5vw（手机）

点击视频演练

悬停间距

通过修改悬停边距值来创建高亮悬停效果。

  • 左边距：-0.5vw
  • 右边距：-0.5vw

点击视频演练

边界

添加一些圆角。

点击视频演练

默认框阴影

伴随着微妙的盒子阴影。

  • 框阴影垂直位置：10px
  • 框阴影模糊强度：70px
  • 阴影颜色：rgba(0,0,0,0.11)

点击视频演练

悬停框阴影

在悬停时更改框阴影颜色。

  • 阴影颜色：rgba(103,151,255,0.22)

点击视频演练

CSS ID 和类

最后但并非最不重要的是，转到 Blurb 模块的高级选项卡并添加 CSS ID 和类。

  • CSS ID：video-walkthrough-item-1
  • CSS 类：video-item-cursor

点击视频演练

克隆 Blurb 模块三次

完成第一个 Blurb 模块后，您可以将其克隆 3 次。

点击视频演练

更改内容

更改每个重复的 Blurb 模块的内容。

点击视频演练

更改所有重复的 Blurb 模块 CSS ID

连同 CSS ID。

  • 1) 可视化构建：video-walkthrough-item-1
  • 2) 效果：video-walkthrough-item-2
  • 3) 形状分隔线：video-walkthrough-item-3
  • 4) 批量编辑：video-walkthrough-item-4

点击视频演练

重用第 1 列

删除第 3 列

完成第一列后，您可以打开行设置并删除第三列。

点击视频演练

克隆第 1 列并放置在底部

克隆第一列（包含 Blurb 模块）并将复制的列放在底部。

点击视频演练

点击视频演练

更改回列结构

将列结构改回本教程开始时选择的结构。

点击视频演练

更改所有第 3 列模糊模块内容

更改第 3 列中每个重复项的 Blurb 模块标题。

点击视频演练

更改所有第 3 列模糊模块 CSS ID

连同 CSS ID。

  • 5) 布局库：video-walkthrough-item-5
  • 6) 转换：video-walkthrough-item-6
  • 7) 悬停状态：video-walkthrough-item-7
  • 8) 查找和替换：video-walkthrough-item-8

点击视频演练

将文本模块添加到第 2 列

将内容框留空

是时候开始添加不同的视频预览了！ 有两种方法可以处理它； 使用视频模块或文本模块。 视频模块要求访问者按播放。 另一方面，使用具有视频背景的文本模块会自动播放视频但没有声音。 在本教程中，我们将使用文本模块，但也可以随意使用视频模块。 确保文本模块内容框保持为空。

点击视频演练

视频背景

转到背景设置并上传您选择的视频。

  • 不在视图中时暂停视频：是

点击视频演练

浆纱

移至设计选项卡并为宽度添加“100%”。

  • 宽度：100%

点击视频演练

间距

接下来，我们将通过在不同的屏幕尺寸上添加一些自定义的顶部和底部填充值来允许视频背景显示出来。 注意：您添加的值需要根据视频的尺寸集进行调整。

  • 顶部填充：15vw（桌面）、24vw（平板电脑）、26vw（手机）
  • 底部填充：15vw（台式机）、24vw（平板电脑）、26vw（手机）

点击视频演练

边界

继续向每个角添加“10px”。

点击视频演练

盒子阴影

伴随着微妙的盒子阴影。

  • 框阴影模糊强度：30px
  • 框阴影扩散强度：-5px
  • 阴影颜色：rgba(0,0,0,0.11)

点击视频演练

CSS ID

最后但并非最不重要的是，添加一个 CSS ID。

  • CSS ID：video-walkthrough-1

点击视频演练

克隆文本模块 7 次

完成文本模块后，您可以将其复制七次（每个 Blurb 模块复制一次）。

点击视频演练

更改所有重复的文本模块视频背景

为每个副本上传不同的视频背景。

点击视频演练

更改所有重复文本模块 CSS ID 并将 CSS 类添加到所有重复文本模块

也更改 CSS ID。 确保使用 CSS ID 末尾的相同数字将每个文本模块连接到正确的 Blurb 模块。 除了原始文本模块之外，我们还使用 CSS 类隐藏了每个文本模块。

  • 文本模块 1：video-walkthrough-1
  • 文本模块 2：video-walkthrough-2
  • 文本模块 3：video-walkthrough-3
  • 文本模块 4：video-walkthrough-4
  • 文本模块 5：video-walkthrough-5
  • 文本模块 6：video-walkthrough-6
  • 文本模块 7：video-walkthrough-7
  • 文本模块 8：video-walkthrough-8
  • CSS 类：视频不是第一

点击视频演练

将代码模块 #1 添加到第 1 列

完成第二行后，就可以开始添加代码了。 为了使点击功能起作用，我们将使用一些 CSS 和 JQuery 代码。 我们将把代码放在两个独立的代码模块中。 首先将第一个代码模块添加到第 1 列。

点击视频演练

插入页面 CSS 代码

添加以下 CSS 代码行： 

<style>
.video-not-first {
display: none;
}
.video-item-cursor {
cursor: pointer;
}

@media all and (max-width: 980px) {
.item-responsive-grid {
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 2vw;
}
}
.video-walkthrough-active {
background-color:#fff;
margin-right:-0.5vw;
margin-left:-0.5vw;
box-shadow:0 10px 70px 0 rgba(103,151,255,.22),0 15px 105px 0 rgba(103,151,255,.22) !important;
}

.video-walkthrough-active .et-pb-icon{
color: #b0c8ff !important;
}
</style>

点击视频演练

将代码模块 #2 添加到第 3 列

继续向第三列添加另一个代码模块。

点击视频演练

插入点击函数 JQuery 代码

输入以下几行 JQuery 代码： 

<script>
jQuery(function($){

$('[id*="video-walkthrough-item"]').click(function() {
	var selector1 = $(this).attr('id').replace('-item', '');
  var $video   = $('#' + selector1);
  
  $video.show().siblings().hide();
  $video.addClass('play-video');
  $(".play-video .et_pb_section_video_bg video").trigger('play');
  $video.removeClass('play-video');

  $('[id*="video-walkthrough-item"]').removeClass("video-walkthrough-active");
  $(this).addClass('video-walkthrough-active');

});
});
</script>

完成此步骤后，您可以保存页面并退出 Visual Builder！

点击视频演练

预览

现在我们已经完成了所有步骤，让我们最后看看不同屏幕尺寸的结果。

桌面

点击视频演练

移动的

点击视频演练

最后的想法

在这篇文章中，我们向您展示了如何使用 Divi 重新创建优雅主题的点击视频演练。 我们还免费为您提供了 JSON 下载！ 随意将此设计用于您创建的任何类型的网站。 这是展示视频和吸引访问者注意力的好方法。 如果您有任何问题或建议，请随时在下面的评论部分发表评论！

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品，请确保订阅我们的电子邮件时事通讯和 YouTube 频道，这样您将永远是第一批了解此免费内容并从中受益的人之一。