如何使用 Divi 創建粘性視頻滑塊

粘性視頻滑塊是在用戶滾動頁面上的內容時將簡潔的視頻集合保持在最前沿的有效方式。 這對於同時受益於視頻和書面說明的教程或食譜非常有用。 在本教程中，我們將向您展示使用 Divi 創建粘性視頻滑塊是多麼容易。 對於我們的示例用例，我們將向食譜頁面添加一個粘性視頻滑塊。

讓我們潛入吧！

訂閱我們的 Youtube 頻道

搶先看

下面是我們將在本教程中構建的設計的快速瀏覽。

免費下載佈局

要掌握本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂閱者，您將在每週一收到更多 Divi 福利和免費的 Divi Layout 包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送終極 Divi 登陸頁面佈局包的副本，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將立即成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載以訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將部分佈局導入 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後單擊導入按鈕。

完成後，部分佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

使用 Divi 創建粘性視頻滑塊

使用預製佈局創建新頁面

讓我們通過使用我們的預製佈局之一啟動並運行新頁面來開始我們的教程。

這是如何做到的：

1. 創建一個新頁面並給它一個標題
2. 點擊使用 Divi Builder（在前端）
3. 選擇以使用預製佈局
4. 搜索並選擇營養師食譜頁面佈局。
5. 要將佈局加載到頁面，只需單擊“使用此佈局”按鈕。

將佈局加載到頁面後，您就可以將粘性視頻滑塊添加到頁面了。

修改粘滯視頻滑塊的佈局

對於此示例，我們將在兩列行的左列添加一個粘性視頻滑塊。 這將允許我們在用戶滾動以準備右列中的內容時保持視頻可見。 這種類型的設置非常適合從視頻和書面說明中受益的食譜和教程。

要修改佈局，首先在包含“成分”和“說明”的頁面第二部分中找到第二行。 然後將兩個文本模塊從左列移動到右列頂部，左列留空。

創建粘性視頻滑塊模塊

在同一行的空左列中，添加一個新的視頻滑塊模塊。

模擬視頻將使用嵌入的 URL 顯示我們的一個 Youtube 視頻。 這是您可以將第三方託管視頻添加到視頻滑塊的方法。 要更改視頻，請打開視頻項目的設置。

然後選擇“從 URL 插入”操作。 將新 URL 粘貼到輸入框中，然後單擊“插入帖子”按鈕。

要將更多視頻添加到滑塊，您可以單擊“添加新視頻”灰色加號圖標或簡單地複制現有視頻。 對於此示例，讓我們將現有視頻複製兩次，以在滑塊中製作總共 3 個視頻。

在設計選項卡下，更新縮略圖疊加顏色以匹配佈局。

• 縮略圖疊加顏色：rgba(53,55,82,0.55)

使視頻滑塊“粘性”

要使滑塊“粘滯”，請進入高級選項卡並更新以下內容：

• 粘性位置：粘在頂部（桌面）、不粘（平板電腦和手機）
• Sticky Top Offset：30px（桌面），0px（平板電腦和手機）
• 底部粘性限制：行

這將確保視頻滑塊在向下滾動頁面時到達瀏覽器頂部時會粘在瀏覽器窗口的頂部。 然後，只要它到達行的底部，它就會停止粘性。

結果

在主視頻上使用圖像疊加層的 YouTube 視頻/嵌入問題

如果您使用 YouTube URL 在視頻滑塊中嵌入多個視頻，最好不要使用 Divi 的內置選項“在主視頻上顯示圖像疊加”。 這將導致視頻音頻在粘性狀態下從頭開始自動播放，從而導致重複音頻以不同的間隔播放。

對於 mp4 或 webm 文件格式的自託管視頻，情況並非如此。 您可以在自託管視頻的主視頻上顯示圖像疊加。 因此，如果您想在 Divi 視頻模塊中使用 Divi 的疊加圖像和播放圖標，您應該添加 MP4 和 Webm 視頻文件/URL。

也就是說，您仍然可以在視頻滑塊中為您的 Youtube 視頻添加自定義圖像疊加層。 它們仍將顯示在主視頻下方的縮略圖控件中。

專業提示：為視頻序列中的每個步驟創建縮略圖

如果您有專業知識，您可以輕鬆地為每個視頻創建一個簡單的縮略圖，以按步驟或數字組織它們。

示例疊加圖像

這是滑塊上的外觀示例。

在滑塊中使用自託管視頻

如果要在滑塊中使用自託管視頻，請打開視頻的設置。

單擊添加視頻。

從您的庫中選擇文件或將第三方託管 URL 添加到視頻中。

為每個視頻添加一個 MP4 和一個 Webm 文件總是一個好主意。 結合起來，這兩者為包括移動設備在內的大多數網絡瀏覽器提供支持。

不要忘記，您可以添加圖像疊加層作為視頻的精美縮略圖。

在疊加選項下，您甚至可以選擇在主視頻上顯示圖像疊加。

最終結果

以下是我們在行動中的粘性視頻滑塊的另一種看法。

最後的想法

如果您熟悉 Divi 的內置粘性選項，則創建粘性視頻滑塊模塊非常簡單。 結果可以有一些很好的應用。 有關更多信息，這也將有助於了解視頻在 Divi 中的工作方式。

此外，查看如何使用隱藏/顯示切換創建粘性視頻。

我期待在評論中收到您的來信。

乾杯!