如何在 WordPress 中的页面滚动上添加粘性浮动视频

想了解如何在 WordPress 网站的页面滚动上添加粘性浮动视频吗？

粘性视频是吸引观众访问您网站的有效方式。 如今，人们消费的视频内容多于书面内容。 因此，如果您发现您的网站访问者对您的网站的参与度不够，添加视频可以解决该问题。

如果您正在寻找一种轻松的方式来使您的网站视频具有粘性，那么您已经找到了正确的文章。 因为在本博客中，您将学习如何在基于 Elementor 的 WordPress 网站中通过几个步骤和几分钟的时间添加粘性视频。

所以继续阅读……

什么是粘性视频？

粘性视频是固定在网页上的视频，即使用户向上或向下滚动，它也会漂浮在网页窗口的同一位置。

为什么要在 Elementor WordPress 网站中添加粘性视频？

网站上的粘性视频的概念不仅听起来很酷，而且还有很多优点。 以下是您可以通过向 WordPress 网站添加粘性视频来利用的一些好处。

• 提高用户参与度：通过粘性视频，人们可以同时观看和阅读网页内容。 因此，人们倾向于更多地与网站互动。
• 提高视频完成率：由于粘性视频不会阻塞整个页面，因此客户可能会一直观看到最后而不是中途关闭。 因此，使您的视频具有粘性实际上可以增加视频完成时间。
• 抓住用户的注意力：通常，人们会跳过一个站点。 在这种情况下，如果您只依赖文本内容，您的客户可能会错过您希望他们注意的重要内容。 您可以通过视频更有效地将用户的注意力吸引到特定信息上。
• 更好的讲故事：与纯文本内容相比，视频为您提供了更广阔的讲故事的画布。 由于您可以在视频中同时使用文本、动画和语音，因此您更有能力更有效地讲述故事。

确信您应该在您的 WordPress 网站上添加一个粘性视频？ 好吧，如果你是，请转到下一部分，了解如何做到这一点。

如何通过 6 个步骤将粘性视频添加到 Elementor 网站

这是使视频在您的 WordPress 网站上具有粘性和浮动的最简单过程。 稍后完成所有步骤，将粘性视频添加到 Elementor。

第 1 步：安装 Elementor 和 ElementsKit

首先，步骤是安装所有必需的插件。 要按照本教程了解如何在 Elementor 中添加粘性视频，您需要

• 元素和
• ElementsKit （免费版和专业版）。

Elementor 是一个拖放页面构建器，ElementsKit 是 Elementor 的一个插件。 因此，您首先需要安装 Elementor，然后下载 ElementsKit，然后将您的插件升级到 Pro 版本。

如果您需要有关 ElementsKit pro 安装和许可证激活过程的帮助，可以查看文档。

第 2 步：启用 ElementsKit 的粘性内容模块

为了使视频具有粘性，我将使用 ElementsKit 的粘性内容功能。 因此，您需要启用粘性内容模块。

现在导航到ElementsKit ⇒ Modules ⇒ Sticky Content ，打开该选项，然后单击 Save Changes以更新您刚刚所做的更改。

第 3 步：拖放 Elementor Video 小部件

导航到要添加粘性视频的页面，单击“使用 Elementor 编辑”选项。

通过单击+ 图标选择您想要的任何布局。 之后，搜索视频小部件，将小部件拖放到您要添加的位置。

注意：对于本教程，我已经导入了我正在编辑的预制页面以显示整个过程。 您可以使用 ElementsKit 预建部分轻松创建 WordPress 网站。

第 4 步：选择视频源并添加 URL

使用 Elementor 视频小部件，您可以显示来自Youtube、Vimeo、DailyMotion 和 Self Hosted 等来源的视频。

首先，选择您喜欢的来源类型，然后提供视频 URL。 我将在这篇文章中使用 youtube。

注意：在自托管的情况下，您可以将视频上传到您的服务器或提供外部 URL。

您还可以自定义视频的样式。 为此，导航到样式选项卡。 在这里你可以选择纵横比和 CSS 过滤器。 您可以从 1:1、3:2、4:3、16:9 等六种比例中进行选择。单击 CSS 滤镜编辑图标可自定义模糊、亮度、对比度、饱和度和色调。

第 5 步：使 Elementor 视频具有粘性的设置

转到高级选项卡。 然后展开 ElementsKit 粘性选项。 在这里，您可以将粘性类型选择为顶部、底部、列，并在向上滚动时显示。

一旦您选择 Sticky 类型而不是 none，您将获得以下选项：

• 粘性直到：在这里您需要设置您希望视频保持粘性的部分的 CSS ID。 您可以为列设置自定义 CSS ID，然后将其复制并粘贴到 Sticky until 选项中。

• 粘性偏移：在此选项中，设置偏移值。 偏移值表示视频与页面顶部位置之间的距离。

注意：粘性直到选项对粘性选项列不可用，因为它只会在父列在屏幕上可见之前可见。

您可以更改粘性背景颜色并使视频在所有设备上保持粘性，仅限台式机或台式机和平板电脑。

第 6 步：更新以在 Elementor 中添加粘性视频并查看预览

选择视频类型并设置所有粘性设置后，单击更新以保存并单击预览按钮以查看最终结果。

注意：如果您想要一个在点击时弹出视频的粘性视频按钮，那么您可以使用 ElementsKit Video小部件而不是 Elementor Video 小部件。 您可以按照上述相同的过程使用 ElementsKit 视频小部件在 Elementor 中添加粘性视频。

这是使用 ElementsKit 视频小部件的 Sticky Video 的预览。

最后的话

恭喜！ 现在您知道如何在 Elementor 网站中添加粘性视频了。 这比最初听起来要容易得多，对吧？

请尝试 ElementsKit 粘性模块的所有选项和设置，并在您的网站上使用它以获得最佳效果。 如果您对 ElementsKit 粘性模块以及添加在页面滚动上添加粘性浮动视频的简单程度印象深刻。

那么 ElementsKit 所提供的有益健康的小部件和模块集合会让您更加惊讶。 因此，请务必查看 ElementsKit 必须提供的所有功能。