WordPress divi主题

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

by | May 10, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

让我们开始吧。

预览

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

桌面

点击视频演练

移动的

点击视频演练

免费下载 Click 视频演练布局

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

订阅我们的 Youtube 频道

让我们开始重建吧!

添加新的常规部分

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

点击视频演练

WordPress divi主题

添加新行

立柱结构

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

点击视频演练

浆纱

在不添加任何模块的情况下,打开行设置并应用以下大小设置:

  • 使用自定义装订线宽度:是
  • 天沟宽度:2
  • 宽度:85vw(桌面),90%(平板电脑和手机)
  • 最大宽度:100%

点击视频演练

第 1 列设置

接下来打开第 1 列设置。

点击视频演练

间距

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

  • 顶部填充:5vw(桌面)、0vw(平板电脑和手机)

点击视频演练

CSS 类

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

  • CSS 类:item-responsive-grid

点击视频演练

fiverr建站WordPress程序员

将 Blurb 模块添加到第 1 列

添加标题

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

点击视频演练

选择图标

接下来选择一个图标。

点击视频演练

默认图标设置

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

独立站选品工具
  • 图标颜色:#e8e9ea
  • 图标位置:左
  • 使用图标字体大小:是
  • 图标字体大小:2vw(桌面)、4.5vw(平板电脑)、7vw(手机)

点击视频演练

悬停图标设置

修改悬停时的图标颜色。

点击视频演练

标题文本设置

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

  • 标题字体: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

点击视频演练

边界

也添加一些圆角。

JasperAI 10000字免费额度试用

点击视频演练

默认框阴影

以及一个微妙的盒子阴影。

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

点击视频演练

悬停框阴影

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

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

点击视频演练

WordPress备份工具updrafplus

CSS ID 和类

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

  • CSS ID:video-walkthrough-item-1
  • CSS 类:视频项光标

点击视频演练

克隆 Blurb 模块 3 次

完成第一个 Blurb 模块后,您可以克隆它 3 次。

点击视频演练

更改内容

更改每个重复的 Blurb Module 的内容。

点击视频演练

更改所有重复的模糊模块 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 Module 标题。

点击视频演练

更改所有第 3 列 Blurb 模块 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%”。

点击视频演练

间距

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

  • 顶部填充:15vw(台式机)、24vw(平板电脑)、26vw(手机)
  • 底部填充:15vw(台式机)、24vw(平板电脑)、26vw(手机)

点击视频演练

边界

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

点击视频演练

盒子阴影

以及一个微妙的盒子阴影。

  • 盒子阴影模糊强度:30px
  • 盒子阴影传播强度:-5px
  • 阴影颜色:rgba(0,0,0,0.11)

点击视频演练

CSS ID

最后但同样重要的是,添加一个 CSS ID。

  • CSS ID:视频演练-1

点击视频演练

克隆文本模块 7 次

完成文本模块后,您可以克隆它七次(每个 Blurb 模块一个)。

点击视频演练

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

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

点击视频演练

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

也更改 CSS ID。 确保通过在 CSS ID 末尾使用相同的数字将每个文本模块连接到正确的模糊模块。 除了原始的文本模块,我们还使用 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 类:video-not-first

点击视频演练

将代码模块 #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 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题