如何使用 Divi 中的显示/隐藏切换创建粘性促销视频

宣传视频是一种极好的营销工具，可以向所有宁愿观看视频而不是浏览您的页面以获取信息的访问者宣传您的产品和服务。 而且，如果您确信自己的视频有助于提高转化率，最好让用户尽可能多地看到视频。 考虑到这一点，粘性促销视频（固定在页面顶部的视频）可能是您网站的宝贵资产。

在本教程中，我们将向您展示如何在 Divi 中创建带有显示/隐藏切换的粘性促销视频。 这个想法是最初在折叠上方显示视频的全尺寸版本。 然后当用户向下滚动页面时，视频会固定在页面顶部以便于访问和/或查看，同时用户浏览页面上的其余内容。 当然，这对某些访问者来说可能有点麻烦。 因此，我们还将向您展示如何添加切换按钮，让用户能够随时显示或隐藏视频。

让我们开始吧！

抢先看

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

这是没有切换的粘性视频。

这是带有切换按钮的相同粘性视频。

下面是切换功能的详细介绍。

这是它在移动设备上的样子。

免费下载布局

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

下载文件

免费下载

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

下载

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

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

单击导入按钮。

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

然后点击导入按钮。

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

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“选择预制布局”选项。
   
4. 上传数字营销服务页面布局。
   

如何为您的销售页面创建带有显示/隐藏切换的粘性促销视频

为粘性视频添加行

首先，我们将删除布局第一/顶部部分行中的第二个文本模块。

在顶部的现有行下，添加一个新的单列行。

打开新行的行设置，然后在高级选项卡下，更新 Z 索引，如下所示：

• Z指数：14

这将确保我们添加到行中的视频在页面滚动过程中卡住时将保持在页面上的其他内容之上。

添加视频

在行的列内，添加一个新的视频模块。

打开视频设置并上传您选择的视频的 mp4 和 webm 格式。

如果需要，可以向视频添加叠加图像。

在“设计”选项卡下，更新以下大小调整选项：

• 最大宽度：900px
• 模块对齐：居中

• 圆角：8px
• 盒子阴影：见截图

使列具有粘性

打开包含视频的列的设置，并在“高级”选项卡下添加以下 CSS 类：

• CSS 类：et-sticky-video

然后更新摇杆位置如下：

• 粘滞位置：粘在顶部
• 过渡默认和粘性样式：否

现在粘性位置已生效，将以下自定义 CSS 添加到粘性状态的主元素：

width: 300px !important;
right: 0px !important;
left: auto !important;
top: 0px;

更新粘性状态下的视频播放图标大小

接下来，再次打开视频设置，更新粘滞状态下的播放图标字体大小如下：

• 使用自定义图标大小：是
• 播放图标字体大小（粘性）：50px

结果到此为止

创建粘性视频切换按钮

要创建粘性视频切换按钮，请在视频模块下创建一个新的按钮模块。

然后移动视频模块上方的按钮。

打开按钮设置并更新按钮文本如下：

• 按钮文字：隐藏

（注意：当我们稍后添加代码时，单击按钮时，此文本将替换/切换为“显示”一词。）

在设计选项卡下，更新以下内容：

• 为按钮使用自定义样式：是
• 按钮文字样式：14px
• 按钮文字颜色：#fa50a9
• 按钮字体粗细：半粗体
• 按钮字体样式：TT
• 按钮图标：向右箭头
• 仅在悬停按钮时显示图标：否

（注意：当我们添加代码布局时，您选择的按钮图标将在单击按钮时旋转 180 度，以提供更直观更好的用户体验。

更新按钮的间距：

• 填充：顶部 0.5em，底部 0.5em，左侧 1em，右侧 1.7em

在高级选项卡下，将以下 CSS 类添加到按钮：

• CSS 类：et-sticky-video-toggle

在高级选项卡下，更新位置选项：

• 位置：绝对
• 位置：左下角

现在通过更新粘性状态下的转换转换选项，将列/视频外部的按钮向左移动，如下所示：

• Transform Translate X 轴（粘性）：-100%

为了完成按钮切换的设计，我们需要隐藏按钮直到它达到粘滞状态。 为此，请将自定义 CSS 更新为桌面和粘性状态的主要元素，如下所示：

对于桌面上的主要元素...

display:none !important;

对于 Sticky 上的主要元素......

display:block !important;

为切换功能添加自定义代码

为了让切换按我们需要的方式工作，我们需要在视频模块下添加一个代码模块。

自定义 CSS

在内容选项卡中，通过以下自定义 CSS，确保将其包装在样式标签中。

.et-sticky-video-toggle.et_pb_button:after, .et_pb_sticky.et-sticky-video {
transition: all 200ms;
}
.et_pb_sticky.et-sticky-video-active {
transform: translate(100%, 0%);
}
.et-sticky-video-toggle:hover {
cursor: pointer;
}
.et-sticky-video-hidden:after {
transform: rotate(180deg) !important;
}

自定义 JQuery

然后在带有样式标签的 CSS 下，添加以下包含在脚本标签中的 JQuery。

(function($) {
$(document).ready(function(){
var $stickyVideoToggle = $('.et-sticky-video-toggle');

$stickyVideoToggle.on('click',function(e) {
e.preventDefault();

$(e.target).closest('.et-sticky-video').toggleClass('et-sticky-video-active');

$(this).toggleClass('et-sticky-video-hidden');
if ($(this).hasClass('et-sticky-video-hidden')) {
$stickyVideoToggle.text('show');
} else {
$stickyVideoToggle.text('hide');
}
});
});
})(jQuery);

就是这样！

最后结果

现在查看页面的实时版本以亲自查看结果。

这是没有切换的粘性视频。

这是带有切换按钮的相同粘性视频。

下面是切换功能的详细介绍。

这是它在移动设备上的样子。

轻松将附加模块添加到粘性列以赞美视频

因为粘性位置被添加到列（不是视频）中，所以可以随意添加额外的模块/内容来补充视频。

例如，您可以在同一粘性栏中的视频底部添加一个按钮。

然后它会停留在视频下方，处于栏目的粘性状态。

使用此粘性视频布局轻松添加您自己的自定义视频选项

将粘性位置应用于列（而不是视频）对于在列内添加自定义视频嵌入或 HTML（使用文本或代码模块）也很方便。 粘性视频功能仍然有效。

例如，您可以将 HTML5 视频添加到同一列中的代码模块。

也可以轻松更改列结构！

此外，您可以轻松地将行更改为您想要与相邻内容一起显示视频的任何列结构。 例如，您可以采用两列布局，最初在右列或左列中放置粘性视频。 只需确保包含视频内容的列具有与本教程中所述相同的 CSS 类和粘性样式。 粘性功能将以相同的方式工作。

例如，使用我们现有的设计，我们可以使用图层视图添加一个新列，并使用主标题文本填充该新列。

当相邻的列/内容保持在文档的正常流中时，粘性列仍将无缝运行。

使用 Divi Overlay Image 选项的 YouTube 视频/嵌入问题

如果您像本设计一样使用 YouTube URL 嵌入带有视频模块的视频，最好不要使用 Divi 的内置叠加图像（带播放图标）选项。 这将导致视频音频在粘性状态下从头开始自动播放，从而导致以不同的间隔播放重复的音频。 因此，如果您想在 Divi 视频模块中使用 Divi 的叠加图像和播放图标，则应添加 mp4 和 WebM 视频文件/URL。

最后的想法

为您的页面构建带有显示/隐藏切换的粘性促销视频，为推广您的产品和服务的新方法打开了大门。 您不仅可以将那些高转换率的视频放在最前面，还可以轻松地在视频上方或下方添加补充信息或 CTA，只需将其添加到 Divi 中的同一列即可。

事实上，您甚至根本不需要包含视频，只需在粘性栏中填写您想要在滚动时粘贴到页面顶部的任何信息即可！

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

干杯!