WordPress divi主题

如何使用 Divi 根据登录状态显示/隐藏视频滑块

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

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

视频滑块非常适合展示课程、食谱页面或教程的视频集合。 它们也是为您网站的会员或订阅者展示优质内容的理想人选。 例如,访问者可以登陆食谱页面,并且只能看到文本格式的说明。 但是,一旦他们成为注册用户,他们就会在同一页面上看到一个视频滑块作为高级内容。 在本教程中,我们将向您展示根据 Divi 的登录状态隐藏/显示视频滑块是多么容易。 这使您可以将视频内容作为高级功能提供给登录用户。

google广告开户

让我们潜入吧!

抢先看

下面是我们将在本教程中构建的设计的快速浏览。 请注意视频滑块是如何对用户隐藏的,直到他们使用登录表单登录。

免费下载布局

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

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

单击导入按钮。

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

然后单击导入按钮。

迪维通知框

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

WordPress divi主题

让我们进入教程,好吗?

使用 Divi 根据登录状态显示/隐藏视频滑块

使用预制布局创建新页面

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

这是如何做到的:

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

divi 粘性视频滑块

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

将视频滑块添加到页面

在食谱页面上,您将在一行下方连续看到一个全角视频,其中包含配料和说明。 我们将用视频滑块模块替换视频。 为此,请删除视频模块。

然后在其位置添加一个新的视频滑块模块。

将视频添加到滑块

要将视频添加到滑块,请打开视频滑块设置。 在内容选项卡下,您将看到一个已经存在的模拟视频。 打开现有视频的设置。

fiverr建站WordPress程序员

接下来,删除默认视频并单击添加视频图标以将新视频添加到滑块。

对于此示例,我添加了一个自托管视频。 上传 MP4 和 Webm 版本的视频文件总是一个好主意。

独立站选品工具

接下来,我们可以为视频添加图像叠加层。

完成后,保存更改。

要创建其他视频,请返回视频滑块设置并将现有视频复制 3 次,总共获得 4 个视频。 然后,在叠加选项下,切换“是”以在主视频上显示图像叠加。

高质量外链购买

添加条件显示选项

对于本教程,我们将仅向已登录的用户显示此视频滑块。为此,请转到高级选项卡并单击以在条件选项组下添加新条件。

在显示条件下拉菜单中,选择 登录状态 从列表中。 确保您选择仅在以下情况下显示 用户已登录. 然后保存更改。

JasperAI 10000字免费额度试用

额外提示:为未登录的用户创建 CTA 或登录表单

对于新访问者,您可能希望创建某种 CTA 进行注册或登录表单,以便会员轻松登录并查看视频。 为此,您可以创建一个新的两列行,其中左列中的图像看起来像视频,右列中的登录表单如下面的屏幕截图所示。

然后打开行设置,根据登录状态添加显示条件。 只有这一次,选择仅在以下情况下显示 用户已注销. 这将仅在用户注销时向用户显示内容。

WordPress备份工具updrafplus

添加登录表单时,请确保将重定向选项更新为 重定向到当前页面. 这将改善想要登录并在同一页面上观看视频的用户的用户体验。

要了解如何从头开始为已注销的用户创建 CTA 部分,请查看我们关于如何使用 Divi 的条件选项创建会员专享博客文章的帖子。

最终结果

这是我们最终的视频滑块。 请注意,在用户使用登录表单登录之前,它们是如何对用户隐藏的。

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

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

divi 粘性视频滑块

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

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

最后的想法

当您想向会员或订阅者提供优质内容时,能够根据登录状态显示/隐藏视频滑块会派上用场。

有关更多信息,请查看有关如何使用 Divi 的条件选项创建会员专享博客文章的类似文章。

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

干杯!

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