将 WordPress 视频背景添加到您的网站的 3 种轻松方法

已发表: 2021-12-11

在您的 WordPress 网站上使用视频背景是使其从竞争对手中脱颖而出并吸引更多观众的好方法。 那是因为视频背景可以让您更好地向观众传达您的信息并让他们保持娱乐。

如果您正在寻找一种将 WordPress 视频背景添加到您的网站的方法,那么以下提示和指南将非常有帮助。

目录
[显示隐藏]
  1. 为什么要为您的网站添加 WordPress 视频背景?
  2. 关于如何将 WordPress 视频背景添加到您的网站的一些有用提示
  3. 您在哪里可以获取 WordPress 视频背景?
  4. 将 WordPress 视频背景添加到您的网站的 3 种方法
    1. 使用支持视频背景的 WordPress 主题
    2. 使用页面构建器
      1. 古腾堡
      2. Elementor 页面构建器
    3. 使用 WordPress 视频背景插件
      1. 智能滑块 3
      2. 视频播放器和全屏视频背景
      3. 图像和视频全屏背景 WordPress 插件
  5. 最后的话

为什么要为您的网站添加WordPress 视频背景

以下是将 WordPress 视频背景添加到您的网站的几个好处。

  • 为您的 WordPress 网站添加酷炫独特的样式。
  • 视频背景很有吸引力。 当用户访问您的网站时,他们会停下来观看您的视频,而不是滚动浏览。
  • 帮助您突出业务的一些重要方面。
  • 轻松带出您网站的领先愿景。
  • 使您的网站更具共享性,这将为网站带来更多流量。

关于如何将WordPress 视频背景添加到您的网站的一些有用提示

在我们继续之前,这里有一些有用的提示,您在将 WordPress 视频背景添加到您的网站时应该牢记这些提示。

  • 确保您上传的视频具有高分辨率。
  • 确保视频不会过多影响页面加载速度。 如果需要,压缩它。
  • 视频背景应该是完全响应的。 所以它在所有屏幕和设备上都会很好看。
  • 关闭有声自动播放。 如果您想这样做,请确保您的访问者可以选择关闭音频。
  • 为浏览器不支持视频背景的访问者设置后备背景图像
  • 您应该上传短视频背景。

您在哪里可以获取 WordPress 视频背景

您的视频背景可能会获得大量流量,特别是如果它们位于您的主页上。 因此,您将希望它脱颖而出并尽可能吸引您的访问者。

如果您的预算不紧,请联系当地的摄像师为您拍摄视频。 确保清楚地表达您的想法,以确保视频满足您的品牌需求。

没有时间或金钱拍摄视频? 没问题。 您可以在 Storyblocks 和 Pixabay等网站上找到免版税的高质量视频片段。

将 WordPress 视频背景添加到您的网站的3 种方法

使用支持视频背景WordPress 主题

将 WordPress 背景视频添加到您的网站的最快、最简单的方法是使用支持它的主题。 WordPress 视频背景已经是许多主题的默认功能。

您可以使用 Woostify 主题或在市场上查找主题。 网络上有很多地方可以找到支持视频背景的付费或免费 WordPress 主题,例如 WordPress 主题、ThemeForest 等。

安装主题后,前往其文档页面或联系支持人员以了解如何添加 WordPress 背景视频。

使用页面构建器

古腾堡

默认的 WordPress 编辑器和页面构建器 - Gutenberg - 已经允许您轻松添加视频背景。

  1. 单击“ + ”号以添加新块。 搜索“封面”。 然后单击Cover块以添加它。
wordpress-视频-背景-1
  1. 上传视频或从媒体库添加视频(如果您已上传)。
wordpress-视频-背景-2
  1. 单击“编写标题...”文本以添加标题。
wordpress-视频-背景-3
  1. 使用工具栏和侧边栏自定义 Gutenberg 视频背景。 您可以添加一个 CSS 类来进一步自定义它。
wordpress-video-background-4
wordpress-video-background-5
wordpress-视频-背景-6

以下是边栏中选项的含义:

  • 叠加:设置出现在视频上的颜色。
  • 背景不透明度:调整透明度。 值越低,它就越透明。

如您所见,默认选项非常有限。 但这也是最直接的方式,因为它从一开始就集成到 WordPress 中。 所以你不需要安装任何东西。

Elementor 页面构建器

Elementor 被认为是 WordPress 最受欢迎的页面构建器,它允许您将 YouTube 视频和 .mp4 文件添加到您的网站背景中。

一些主题具有对 Elementor 的原生支持,例如 Woostify。 因此,如果您的主题也是如此,这是最好的选择。

还有一些高级选项可以添加效果、设置后备图像、选择开始和结束时间等。

下载并激活 Elementor Website Builder 插件后,按照以下指南添加 Elementor 视频背景 到您的网站。

  1. 使用 Elementor 打开一个新的或现有的帖子/页面。
  2. 通过单击“+”按钮从编辑器中添加一个部分。
wordpress-视频-背景-7
  1. 选择所需的截面宽度。 在这种情况下,我将选择全角部分。
wordpress-video-background-8
  1. 将出现一个左侧面板。 您可以从“布局”选项卡中选择该部分的外观。 在下面的照片中选择标记为“1”的内容宽度。 我会选择它作为盒装。 您也可以选择全角选项。
wordpress-视频-背景-9
  1. 单击上图中标记为“2”的样式选项卡以添加视频。 在背景部分,您可以从三种背景样式中进行选择:纯色、渐变和视频背景。 单击下面照片中标记为“1”的视频背景选项。
wordpress-视频-背景-10
  1. 您还可以通过单击上图中分别标记为“2”和“3”的按钮来使用悬停效果和粒子效果。
  2. 您可以提供 YouTube 链接作为背景视频。 或者,您可以使用媒体库上传任何 .mp4 视频。 然后输入它的永久链接。
wordpress-视频-背景-11
  1. 您可以指定开始和结束时间,并提供一个后备图像,分别在上面的照片中标记为“2”和“3”。
  2. 你可能有身高问题。 如果是这种情况,请从“布局”选项卡调整最小高度。
wordpress 视频背景 12

这就对了! 尽管此方法要复杂得多,但您拥有更多控制和高级功能来调整 Elementor 背景视频以满足您的需求。

使用WordPress 视频背景插件

如果您希望在视频背景上获得更多自定义选项,您应该使用支持此功能的第三方插件。

如今,您可以从许多免费和付费的 WordPress 插件中进行选择,这些插件让您可以选择在后台使用 YouTube、Vimeo 和 MP4 视频。 在本文中,我们将仅列出一些值得注意的。

智能滑块 3

wordpress-视频-背景-13

如果您正在寻找最好的免费 WordPress 视频背景插件,Smart Slider 3 将是最佳选择。

有了它,您可以创建视频块。 然后将它们作为单独的部分或具有视差滚动效果的英雄图像嵌入到您的站点中。

该插件支持来自 YouTube 和 Vimeo 的视频。 它还允许您上传 .mp4 文件并使用它们。

Smart Slider 3 还允许您向视频块添加任意数量的图层,包括文本、按钮、徽标、缩略图等。您还可以调整不透明度、静音音频、循环视频等等。

要将 WordPress 视频背景添加到帖子/页面,您可以将短代码或简短的 PHP 脚本直接插入到 WordPress 站点的模板文件中。

视频播放器和全屏视频背景

wordpress 视频背景 14

这是创建有吸引力的全宽视频背景的终极工具。 它允许您将自托管、YouTube 或 Vimeo 视频添加到 WordPress 网站的任何页面。

您还可以将该插件用作视频播放器,以使您的内容适应所有设备类型。

图像和视频全屏背景 WordPress 插件

wordpress-视频-背景-15

此插件允许您在 WordPress 网站的全角背景中显示视频背景、图像背景滑块、多媒体画廊和视频画廊。

它与移动设备兼容,并包含许多值得注意的功能,包括动态文本、循环计时器、可自定义的交易等等。

最后的话

当访问者登陆您的网站时,您只有几秒钟的时间来吸引他们的注意力并让他们停留更长时间。 WordPress 视频背景 是最有效的方法之一,可以放大您的品牌理念。 通过使用我们在这篇文章中提供的提示和指南,我们希望您可以轻松地将 WordPress 视频背景添加到您网站上的任何页面。