將 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 視頻背景添加到您網站上的任何頁面。