在網站設計中，**影片背景（Video Background）**是一種能快速提升視覺吸引力的設計方式。當訪客進入網站時，一段動態影片可以立即抓住注意力，讓網站看起來更專業、更具品牌感。
如果你使用 WordPress 搭配 Elementor 頁面編輯器，其實只需要幾個簡單步驟，就能在網站區塊中加入影片背景。本文將帶你一步一步完成設定，並分享最佳化技巧，讓你的網站更具吸引力。
為什麼網站需要影片背景？
相較於靜態圖片，影片更容易吸引訪客注意並延長停留時間。研究顯示，含有影片的網站往往能提升互動率，並讓使用者停留時間增加。
使用影片背景的優點包括：
- 提升網站的視覺衝擊力
- 更容易傳達品牌氛圍與故事
- 增加訪客停留時間
- 提高整體網站質感與專業度
特別是在首頁 Hero Section（首屏區塊），影片背景往往能帶來非常好的第一印象。
WordPress 加入影片背景前的準備
在開始操作之前，建議先準備以下項目：
- WordPress 網站
- 一段影片（建議來源）
- YouTube
- Vimeo
- 自行上傳 MP4
一般建議使用 MP4 格式影片，因為相容性與效能較佳。
Step 1：使用 Elementor 開啟頁面
首先登入 WordPress 後台。
操作步驟：
- 進入 Pages（頁面）
- 選擇要編輯的頁面
- 點擊 Edit with Elementor
這時候會進入 Elementor 的視覺化編輯器。
Step 2：新增或選擇區塊（Section / Container）
接著需要選擇要加入影片背景的區塊。
操作方式：
- 新增一個 Section（區段）
- 或選擇現有的區塊
- 點擊區塊設定
通常影片背景會使用在：
- 首頁 Banner
- Hero Section
- 產品介紹區
- 品牌形象區塊
Step 3：設定影片背景
選取區塊後，在左側設定欄進行以下操作：
- 點擊 Style（樣式）
- 找到 Background Type（背景類型）
- 選擇 Video（影片）
- 在 Video Link 欄位貼上影片網址
Elementor 支援：
- YouTube 影片
- Vimeo 影片
- 直接影片連結（MP4）
完成後，影片就會顯示為區塊背景。
Step 4：調整影片播放設定
Elementor 提供多種影片控制設定，可以讓背景影片更符合網站需求。
常見設定包括：
影片開始時間
可設定影片從某個時間點開始播放。
影片結束時間
限制影片播放到指定時間後停止。
Play Once
影片只播放一次，不循環。
Play on Mobile
設定是否在手機上播放影片。
Privacy Mode
限制 YouTube 資料傳輸以提高隱私性。
Background Fallback
設定一張圖片，當影片無法播放時顯示。
Step 5：加入背景遮罩（Overlay）
為了讓文字更清晰，通常會在影片上加入一層遮罩。
操作方式：
- 找到 Background Overlay
- 選擇
- 顏色
- 漸層
- 圖片
- 調整 Opacity（透明度）
例如：
- 深色遮罩 → 提高文字可讀性
- 漸層遮罩 → 增加設計感
Step 6：加入內容（文字或按鈕）
影片背景通常會搭配內容，例如：
- 標題
- 副標題
- CTA 按鈕
- 品牌口號
這能讓影片背景不只是裝飾，而是網站內容的一部分。
使用影片背景的最佳化技巧
為了避免網站變慢，建議注意以下幾點：
1️⃣ 壓縮影片
影片大小最好 低於 5MB。
2️⃣ 使用短影片
建議 5–15 秒循環影片。
3️⃣ 行動裝置使用圖片
很多網站會關閉手機影片播放，改用圖片背景。
4️⃣ 避免有聲音
背景影片通常應該 靜音播放。
總結
透過 Elementor，你可以輕鬆為 WordPress 網站加入影片背景，整體流程其實非常簡單：
1️⃣ 開啟 Elementor 編輯頁面
2️⃣ 選擇區塊
3️⃣ 設定 Video Background
4️⃣ 調整播放設定
5️⃣ 加入 Overlay 與內容