如何在 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 必須提供的所有功能。