如何將視頻背景添加到 WordPress 網站

正在尋找添加 WordPress 視頻背景的最簡單方法?

製作精良的視頻背景吸引注意力,讓品牌從一開始就看起來很酷。 但是如果做得不好,視頻背景會減慢您的網站速度,佔用空間,並使新訪問者感到困惑。 這就是我們製作本指南的原因,以便您可以避免所有陷阱,而是學習如何以正確的方式添加 WordPress 視頻背景。

👨‍🎓 繼續閱讀以了解將視頻背景添加到您的 WordPress 網站的最佳實踐和步驟,所有這些都無需任何特殊的技術知識。

添加 WordPress 視頻背景的最佳實踐

  • 保持文件較小但解析度較高:沒有什麼比大型視頻和圖像更能降低您網站的性能了; 然而,最好在壓縮期間保持解析度。
  • 不要過度使用:太多的視頻會使您的界面混亂; 僅使用它們來說明觀點或展示相關內容。
  • 包括帶有附加信息的號召性用語:不要讓觀眾想要更多,然後忘記指向更多詳細信息的鏈接。
  • 不惜一切代價避免音頻:當所有人都只想查看您的網站時,這很不和諧。
  • 如果需要音頻,請不要在自動播放中使用它:為用戶提供播放音頻的選項。
  • 考慮為帶有音頻的視頻添加隱藏式字幕:不是每個人都可以收聽您的音頻,無論是因為他們的位置還是聽力障礙。
  • 外部託管:您的網站託管可能不是為提供視頻而設計的,因此請選擇 Vimeo 和 YouTube 等網站以保持性能,或考慮使用專業的視頻託管網站。
  • 堅持最好的格式/解析度:我們只討論 MP4; 至少 720p; h264 編解碼器。

請記住,並非所有網站都需要視頻; 有時它只會使界面雜亂無章,緩慢且沒有重點。 例如,律師應該堅持使用專業照片,而不是陳詞濫調的握手視頻,這些視頻必然會減慢他們的網站速度。

如何添加 WordPress 視頻背景

有幾種方法可以激活 WordPress 中的視頻背景功能。

我們將專註於四種不同的無代碼解決方案:

  1. 內置蓋板
  2. 背景/標題插件
  3. 您最喜歡的頁面構建器插件
  4. 使用支持視頻背景或標題的主題

請按照以下每種方法的步驟操作。 👇

選項 1:內置蓋塊

原生 WordPress 編輯器提供了所謂的封面塊,用於在其他內容(例如文本和按鈕)後面插入背景圖像。

許多 WordPress 用戶沒有意識到 Cover 塊也支持視頻背景。

第 1 步:添加封面塊

要開始,請轉到要添加背景的任何頁面並添加封面塊。

選擇封面塊插入 WordPress 視頻背景

第 2 步:上傳您的視頻

對於封面,選擇上傳或媒體庫按鈕,無論您打算使用哪個來添加視頻。

上傳封面塊

封面塊沒有說明支持視頻,所以你只需要確保從媒體庫中選擇一個視頻(如 MP4)。 選中視頻後,單擊「選擇」按鈕。

添加視頻上傳

第 3 步:插入疊加的前景內容

您現在應該會看到背景視頻的預覽。 歡迎您向封面添加前景塊,例如文本或按鈕。

前台內容

第 4 步:根據需要編輯封面設置

封面設置包括:

  • 顏色疊加:非常適合更輕鬆地閱讀文本
  • 不透明度:也有助於顯示前景內容
  • 最小封面高度:有時需要讓 WordPress 視頻背景覆蓋更多空間

覆蓋的不透明度

第 5 步:查看您的 WordPress 視頻背景

完成後,保存頁面,然後轉到前端查看您的 WordPress 視頻背景!

有相當多的插件可用於添加 WordPress 視頻背景,其中一些提供完整的網站背景,而另一些則適合為您提供視頻標題。

這些是最好的視頻背景插件:

➡️ 我們最喜歡的是高級 WordPress 背景插件; 我們將向您展示如何通過幾個步驟使用該插件添加 WordPress 視頻背景。

第 1 步:安裝 AWB 並添加其內容塊

首先,安裝高級 WordPress 背景 (AWB)。

轉到要添加背景視頻的頁面。

使用 WordPress 編輯器,單擊以添加內容塊。 搜索並選擇背景 (AWB) 塊。

AWB 插件塊

第 2 步:添加視頻

這為您提供了向元素添加顏色、圖像或視頻背景的選項。

選擇視頻,然後粘貼來自 YouTube 或 Vimeo 的視頻 URL。 作為替代方案,該插件有一個用於上傳本地視頻的自託管選項卡。

將視頻鏈接添加到 youtube 或本地 WordPress 視頻背景

第三步:擴大視頻背景的高度和寬度

默認情況下,內容塊不會拉伸以覆蓋大部分頁面區域。 您必須單擊編輯器中的全高按鈕。 還有一個按鈕可以將視頻背景擴展到全形。

您還可以在背景視頻的頂部拖動或插入內容,例如文本、按鈕或圖像。

全高

第 4 步:修改 WordPress 視頻背景設置

在「阻止」選項卡中調整您想要的任何設置:開始時間、結束時間、循環播放、始終播放、視頻不透明度。

WordPress 視頻背景的額外設置

添加不透明度降低的背景顏色疊加層是明智的; 這使得覆蓋文本更易於閱讀。

通過轉到「塊」選項卡並在「背景顏色」下將顏色更改為白色或黑色來執行此操作。 將不透明度滑塊向下移動一點以確保背景仍然顯示。

調整不透明度

第 5 步:查看結果

結果是視頻在其他內容之前播放,理想情況下是循環播放、沒有聲音並且仍將大部分焦點放在前景內容上的視頻。

選項 3:您最喜歡的頁面構建器插件

大多數頁面構建器,如 Elementor、WPBakery 和 Divi,都提供背景功能,可以將圖像或視頻背景添加到幾乎任何內容模塊。

➡️ 隨意選擇您喜歡的頁面構建器,但我們推薦 Elementor,因為它易於使用。

在開始之前,請務必安裝 Elementor 或您打算使用的任何構建器。

第 1 步:使用 Elementor 編輯器打開一個頁面

轉到 WordPress 上的頁面,然後選擇指定為主頁的頁面。 單擊使用 Elementor 編輯按鈕。

用元素編輯

第 2 步:添加部分內容塊

Elementor 中的大多數內容模塊都提供背景設置,但我們建議插入一個部分。 這樣,您可以在該部分中添加多個項目,例如文本、圖像和按鈕。 然後,將視頻背景添加到該部分,使其位於前景中的所有內容後面。

我們在教程的某個部分中添加了一些文本和一個按鈕。 繼續並選擇「編輯部分」圖標,然後選擇「樣式」選項卡。

部分樣式

第 3 步:插入視頻背景

在這裡,您將看到一個背景下拉區域。 選擇背景類型旁邊的視頻選項。 然後在視頻鏈接欄位中粘貼來自 YouTube、Vimeo 或本地文件的 URL。

添加 WordPress 視頻背景

第 4 步:編輯視頻背景設置

您可能需要擴展視頻背景以佔用更多屏幕。 為此,請切換到布局選項卡,然後調整高度和最小高度。

WordPress 視頻背景的最小高度

返回樣式選項卡下,考慮更改背景視頻的設置:

  • 開始時間
  • 時間結束
  • 播放一次
  • 在手機上玩
  • 隱私模式

設置

此外,考慮添加背景疊加層(通常是黑色或白色等中性顏色,以及一些不透明度更改)以使前景中的文本、按鈕和圖像更加可見。

更改 WordPress 視頻背景的顏色疊加

步驟 5:在前端查看 WordPress 視頻背景

完成後,視頻會在該部分中的所有內容後面播放!

選項 4:使用支持視頻背景/標題的 WordPress 主題

各種 WordPress 主題提供內置標題、滑塊和整頁媒體設置; 這些允許您上傳圖像、GIF 或視頻以佔據整個屏幕,通常用作主頁的標題。

要查找具有視頻背景功能的主題,請在熱門市場上搜索「視頻背景」:

➡️一定要掃描功能列表,甚至在下載/購買之前詢問開發者,以確保主題具有視頻背景功能。

例如,Colibri WP 主題提供視頻背景。

第 1 步:安裝並激活主題

要激活視頻背景,請安裝 Colibri WP 主題,然後轉到外觀 > Colibri 設置 > 開始使用。 在這裡,您可以激活 Colibri Page Builder 功能。

添加頁面構建器功能

第 2 步:添加演示站點

單擊演示站點選項卡並導入您選擇的演示模板。

演示站點

第 3 步:自定義英雄形象

導航到外觀 > 自定義,然後選擇英雄模塊旁邊的設置齒輪圖標。

英雄形象設置

第 4 步:添加視頻背景

選擇樣式選項卡,然後將背景切換為視頻。

單擊樣式和視頻以添加 WordPress 視頻背景

最後,選擇 YouTube 粘貼到外部視頻 URL 或自託管上傳本地視頻。

因此,您將在定製器預覽中看到動態的視頻背景。

開始使用完美的視頻背景

並不總是建議添加 WordPress 視頻背景,但如果您擁有能反映您的品牌且不會影響網站性能的高質量視頻內容,則應考慮使用它。

在這篇文章中,您學習了四種不同的方法,其中至少一種適合您的情況。

ℹ️ 有關改進您網站的其他一些方法,請查看我們的帖子,其中包含成功主頁設計的 10 個要素。

有關 WordPress 視頻背景的任何問題,請在下面的評論中分享您的想法。

Total
0
Shares
相關文章