WordPress divi主题

如何使用 Divi 创建粘性视频滑块

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

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

粘性视频滑块是在用户滚动页面上的内容时将简洁的视频集合保持在最前沿的有效方式。 这对于同时受益于视频和书面说明的教程或食谱非常有用。 在本教程中,我们将向您展示使用 Divi 创建粘性视频滑块是多么容易。 对于我们的示例用例,我们将向食谱页面添加一个粘性视频滑块。

google广告开户

让我们潜入吧!

订阅我们的 Youtube 频道

抢先看

下面是我们将在本教程中构建的设计的快速浏览。

免费下载布局

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

要将部分布局导入 Divi 库,请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中,选择导入选项卡并从您的计算机中选择下载文件。

然后单击导入按钮。

WordPress divi主题

迪维通知框

完成后,部分布局将在 Divi Builder 中可用。

让我们进入教程,好吗?

使用 Divi 创建粘性视频滑块

使用预制布局创建新页面

让我们通过使用我们的预制布局之一启动并运行新页面来开始我们的教程。

这是如何做到的:

  1. 创建一个新页面并给它一个标题
  2. 点击使用 Divi Builder(在前端)
  3. 选择以使用预制布局
  4. 搜索并选择营养师食谱页面布局。
  5. 要将布局加载到页面,只需单击“使用此布局”按钮。

divi 粘性视频滑块

将布局加载到页面后,您就可以将粘性视频滑块添加到页面了。

修改粘滞视频滑块的布局

对于此示例,我们将在两列行的左列添加一个粘性视频滑块。 这将允许我们在用户滚动以准备右列中的内容时保持视频可见。 这种类型的设置非常适合从视频和书面说明中受益的食谱和教程。

要修改布局,首先在包含“成分”和“说明”的页面第二部分中找到第二行。 然后将两个文本模块从左列移动到右列顶部,左列留空。

divi 粘性视频滑块

fiverr建站WordPress程序员

创建粘性视频滑块模块

在同一行的空左列中,添加一个新的视频滑块模块。

divi 粘性视频滑块

模拟视频将使用嵌入的 URL 显示我们的一个 Youtube 视频。 这是您可以将第三方托管视频添加到视频滑块的方法。 要更改视频,请打开视频项目的设置。

divi 粘性视频滑块

然后选择“从 URL 插入”操作。 将新 URL 粘贴到输入框中,然后单击“插入帖子”按钮。

独立站选品工具

divi 粘性视频滑块

要将更多视频添加到滑块,您可以单击“添加新视频”灰色加号图标或简单地复制现有视频。 对于此示例,让我们将现有视频复制两次,以在滑块中制作总共 3 个视频。

divi 粘性视频滑块

在设计选项卡下,更新缩略图叠加颜色以匹配布局。

  • 缩略图叠加颜色:rgba(53,55,82,0.55)

divi 粘性视频滑块

高质量外链购买

使视频滑块“粘性”

要使滑块“粘滞”,请进入高级选项卡并更新以下内容:

  • 粘性位置:粘在顶部(桌面)、不粘(平板电脑和手机)
  • Sticky Top Offset:30px(桌面),0px(平板电脑和手机)
  • 底部粘性限制:行

这将确保视频滑块在向下滚动页面时到达浏览器顶部时会粘在浏览器窗口的顶部。 然后,只要它到达行的底部,它就会停止粘性。

divi 粘性视频滑块

结果

在主视频上使用图像叠加层的 YouTube 视频/嵌入问题

如果您使用 YouTube URL 在视频滑块中嵌入多个视频,最好不要使用 Divi 的内置选项“在主视频上显示图像叠加”。 这将导致视频音频在粘性状态下从头开始自动播放,从而导致重复音频以不同的间隔播放。

divi 粘性视频滑块

JasperAI 10000字免费额度试用

对于 mp4 或 webm 文件格式的自托管视频,情况并非如此。 您可以在自托管视频的主视频上显示图像叠加。 因此,如果您想在 Divi 视频模块中使用 Divi 的叠加图像和播放图标,您应该添加 MP4 和 Webm 视频文件/URL。

也就是说,您仍然可以在视频滑块中为您的 Youtube 视频添加自定义图像叠加层。 它们仍将显示在主视频下方的缩略图控件中。

专业提示:为视频序列中的每个步骤创建缩略图

如果您有专业知识,您可以轻松地为每个视频创建一个简单的缩略图,以按步骤或数字组织它们。

divi 粘性视频滑块

示例叠加图像

WordPress备份工具updrafplus

这是滑块上的外观示例。

在滑块中使用自托管视频

如果要在滑块中使用自托管视频,请打开视频的设置。

divi 粘性视频滑块

单击添加视频。

divi 粘性视频滑块

从您的库中选择文件或将第三方托管 URL 添加到视频中。

divi 粘性视频滑块

为每个视频添加一个 MP4 和一个 Webm 文件总是一个好主意。 结合起来,这两者为包括移动设备在内的大多数网络浏览器提供支持。

divi 粘性视频滑块

不要忘记,您可以添加图像叠加层作为视频的精美缩略图。

divi 粘性视频滑块

在叠加选项下,您甚至可以选择在主视频上显示图像叠加。

divi 粘性视频滑块

最终结果

以下是我们在行动中的粘性视频滑块的另一种看法。

最后的想法

如果您熟悉 Divi 的内置粘性选项,则创建粘性视频滑块模块非常简单。 结果可以有一些很好的应用。 有关更多信息,这也将有助于了解视频在 Divi 中的工作方式。

此外,查看如何使用隐藏/显示切换创建粘性视频。

我期待在评论中收到您的来信。

干杯!

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