WordPress divi主题

如何将图像叠加层添加到 Divi 视频滑块模块

by | Apr 23, 2022 | Divi主题使用教程 | 0 comments

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

视频滑块是在小空间内显示大量视频内容的好方法。 默认情况下,视频幻灯片会显示视频的快照。 有时您希望为视频幻灯片提供不同的外观。 在本文中,我们将了解如何将图像叠加层添加到您的 Divi Video Slider 模块。 我们还将了解如何自定义悬停覆盖和播放图标。

google广告开户

让我们开始吧。

关于视频滑块模块

Video Slider 模块可以显示 MP4 或 Webm 视频。 您可以将它们上传到您的媒体库,或使用它们的 URL 链接到它们,以便它们可以托管在其他地方。 视频滑块模块非常适合教程、课程、产品评论、音乐视频等。

您可以让视频显示其默认屏幕截图或添加您自己的图像。 添加您自己的图像可让您在整个网站上创建一致的设计,而不管视频的内容如何。

每张幻灯片都是在模块本身中添加的子模块。 您可以为模块设置样式以创建默认设置,并且可以单独设置每个子模块的样式。 如果您不设置子模块的样式,它将使用您在常规模块设置中设置的默认样式。 选项包括箭头、图像覆盖、自定义图标和悬停覆盖。

关于视频滑块模块

将视频滑块模块添加到新页面

现在,让我们将 Video Slider 模块添加到页面中,看看如何使用它并设置它的样式。 我正在使用 Divi 中提供的免费顾问布局包中的“关于”页面。 我将在两个部分之间添加模块。

将视频滑块模块添加到新页面

第一的, 启用可视化生成器添加一个新的单列行.

将视频滑块模块添加到新页面

WordPress divi主题

背景样式在该部分中,因此我们可以继续讨论该模块。 接下来,搜索视频并单击 Divi 视频滑块模块.

将视频滑块模块添加到新页面

将您的视频添加到视频滑块模块

Video Slider 模块添加了一个默认的视频子模块来帮助您入门。 点击 齿轮图标 打开其设置。

将您的视频添加到视频滑块模块

下一个, 删除 默认视频,或 选择图标 更改视频。 现在,您可以选择上传 MP4 或 Webm 视频或输入托管在其他地方的视频的 URL。 点击 添加视频 对于您要添加的类型。

将您的视频添加到视频滑块模块

接下来,要么 上传视频 到您的媒体库并选择它或 输入网址 对于您要显示的视频。

将您的视频添加到视频滑块模块

点击 添加新视频 并选择该滑块模块的视频。

将您的视频添加到视频滑块模块

fiverr建站WordPress程序员

重复这个过程 直到您添加了所有视频。 每个视频都是一张新幻灯片。 您还可以通过在其设置中的视频选择区域下添加管理标签来命名它们。

将您的视频添加到视频滑块模块

默认视频滑块图像叠加

接下来,让我们看看它是如何与 默认叠加. 这将帮助我们了解添加新叠加层时的作用。 由于我从 YouTube 添加了 URL,因此我的视频具有 YouTube 控件、信息和链接。 幻灯片显示在当前视频下方。 当前幻灯片有一个深色叠加层。

默认视频滑块图像叠加

将鼠标悬停在主幻灯片上会显示导航箭头并将播放图标更改为红色。

独立站选品工具

默认视频滑块图像叠加

将鼠标悬停在幻灯片上会显示叠加层和白色播放图标。

默认视频滑块图像叠加

添加视频滑块图像叠加

接下来,我们将为每个视频添加叠加层。 首先,我们需要启用覆盖选项。 在滑块模块的内容设置中,向下滚动到叠加并选择 在主视频上显示图像叠加.

  • 在主视频上显示图像叠加层:是

添加视频滑块图像叠加

高质量外链购买

现在为每张幻灯片启用叠加。 您会注意到播放器的默认设置现在已替换为当前视频的 Divi 模块设置。 我们可以为每张幻灯片单独设置样式,也可以将模块作为一个整体设置样式。

样式化视频滑块

我们可以单独设置每个视频的样式,也可以设置模块的样式。 如果可用,视频将使用它们各自的样式。 如果没有,那么它将使用模块样式。 有一些选项仅在模块或视频设置中可用。 我将展示两者的样式选项。

要设置模块样式,请选择 设计 标签。 要单独设置幻灯片的样式,请选择它们的 齿轮图标 然后点击 设计 标签。 对每张幻灯片重复该过程以自定义每一张。

样式化视频滑块

设置视频滑块模块默认设置的样式

我们将从默认的视频滑块模块设置开始。 每张未单独设置样式的幻灯片都将使用这些设置。

JasperAI 10000字免费额度试用

播放图标颜色

选择 设计 标签。 在下面 控件,为播放图标选择自定义颜色。 我正在使用#e3332e。 这是与此页面模板上已使用的图标匹配的红色阴影。 播放器中的图标和缩略图将使用此颜色。

设置视频滑块模块默认设置的样式

图标

接下来,选择 播放图标 从列表中。 搜索 Play 并选择您最喜欢的。 我选择了大三角形,所以它会脱颖而出。

设置视频滑块模块默认设置的样式

播放图标字体大小

接下来,让我们改变 图标大小. 默认值为 96 像素。 我已将其更改为 160px 以使其脱颖而出。 这只会影响大幻灯片。 缩略图不受此选项的影响。

WordPress备份工具updrafplus
  • 使用播放图标字体大小:是
  • 播放图标字体大小:160px

设置视频滑块模块默认设置的样式

缩略图叠加颜色

接下来,更改 缩略图叠加颜色 到 rgba(243,244,239,0.73)。 这会影响主播放器和滑块缩略图的悬停覆盖。

  • 缩略图叠加颜色:rgba(243,244,239,0.73)

设置视频滑块模块默认设置的样式

样式化视频滑块模块幻灯片

接下来,我们将单独设置每张幻灯片的样式。 我将保留两个默认设置并设置其他两个样式。

为视频幻灯片设置样式

通过选择其打开要设置样式的幻灯片 齿轮图标.

样式化视频滑块模块幻灯片

叠加图像

向下滚动到 覆盖 并选择 添加图片.

样式化视频滑块模块幻灯片

上传 或者 选择一张图片 来自您的媒体库。

样式化视频滑块模块幻灯片

您的幻灯片现在将显示您选择的图像,而不是视频中的图像。

播放图标颜色

样式化视频滑块模块幻灯片

前往 设计 选项卡并选择一个新的 播放图标颜色. 我选择了蓝色。 请注意,这只影响幻灯片,而不影响缩略图。

样式化视频滑块模块幻灯片

图标

接下来,选择一个新的 图标 对于这张幻灯片。 我选择了断箭。 这也仅适用于幻灯片。

样式化视频滑块模块幻灯片

为下一个视频幻灯片设置样式

为每张幻灯片继续该过程。 在这个例子中,我打开了我的第四张幻灯片。

叠加图像

向下滚动到 覆盖 并选择您想要的图像。

为下一个视频幻灯片设置样式

播放图标颜色

前往 设计 选项卡并选择 图标颜色 您希望显示此幻灯片。 我选择了橙色。

为下一个视频幻灯片设置样式

图标

接下来,选择 图标 你想显示。 我选择了实心圆圈箭头。 完成幻灯片后,关闭模块并保存您的工作。

  • 图标:填充圆圈箭头

为下一个视频幻灯片设置样式

视频滑块图像叠加结果

这是 Divi Video Slider 模块在我的页面上的外观。 我已经创建了一些示例。 此示例显示了带有播放图标和悬停覆盖的默认设置。

视频滑块图像叠加结果

此示例显示带有自定义播放图标的自定义图像叠加层。 我将鼠标悬停在其缩略图上以显示其图像和图标如何与幻灯片分开工作。

视频滑块图像叠加结果

此示例显示了第二张幻灯片,其中包含自定义图像叠加层和播放图标。 我将鼠标悬停在幻灯片上以显示悬停覆盖,因为它出现在自定义图像上。

视频滑块图像叠加结果

这是如何使用它的另一个示例。 由于您可以添加任何您想要的图像,因此您可以使用图像来描述内容。 此示例适用于课程或教程。 它只有一个渐变背景,但您可以使用任何您想要为您的课程和教程创建特色图像的图像。

视频滑块图像叠加结果

这是另一个例子。 我只更改了图像叠加层,但这使视频具有完全不同的外观和感觉。

视频滑块图像叠加结果

结束的想法

这就是我们对如何将图像叠加层添加到 Divi Video Slider 模块的看法。 视频滑块模块非常适合课程、教程或您想在幻灯片中显示的任何类型的系列。 Divi 可以轻松添加自定义图像叠加层,使每张幻灯片的外观与视频的屏幕截图不同。 您可以独立设置幻灯片的样式,因此它们不必看起来相同。 您还可以为每张幻灯片添加自定义播放图标和悬停重叠,或为所有幻灯片创建默认图标和覆盖。

我们希望收到你的来信。 您是否将图像叠加层添加到 Divi Video Slider 模块? 让我们在评论中知道。

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