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

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

让我们潜入吧！

抢先看

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

免费下载布局

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

下载文件

免费下载

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

下载

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

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

单击导入按钮。

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

然后单击导入按钮。

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

让我们进入教程，好吗？

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

使用预制布局创建新页面

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

这是如何做到的：

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

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

将视频滑块添加到页面

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

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

将视频添加到滑块

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

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

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

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

完成后，保存更改。

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

添加条件显示选项

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

在显示条件下拉菜单中，从列表中选择登录状态。 确保选择仅在用户登录时才显示。 然后保存更改。

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

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

然后打开行设置，根据登录状态添加显示条件。 仅这一次，选择仅在User is Logged Out时才显示。 这将仅在用户注销时向用户显示内容。

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

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

最终结果

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

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

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

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

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

最后的想法

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

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

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

干杯!