如何使用 Divi 根據登錄狀態顯示/隱藏視頻滑塊

視頻滑塊非常適合展示課程、食譜頁面或教程的視頻集合。 它們也是為您網站的會員或訂閱者展示優質內容的理想人選。 例如，訪問者可以登陸食譜頁面，並且只能看到文本格式的說明。 但是，一旦他們成為註冊用戶，他們就會在同一頁面上看到一個視頻滑塊作為高級內容。 在本教程中，我們將向您展示根據 Divi 的登錄狀態隱藏/顯示視頻滑塊是多麼容易。 這使您可以將視頻內容作為高級功能提供給登錄用戶。

讓我們潛入吧！

搶先看

下面是我們將在本教程中構建的設計的快速瀏覽。 請注意視頻滑塊是如何對用戶隱藏的，直到他們使用登錄表單登錄。

免費下載佈局

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

下載文件

免費下載

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

下載

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

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

單擊導入按鈕。

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

然後單擊導入按鈕。

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

讓我們進入教程，好嗎？

使用 Divi 根據登錄狀態顯示/隱藏視頻滑塊

使用預製佈局創建新頁面

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

這是如何做到的：

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

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

將視頻滑塊添加到頁面

在食譜頁面上，您將在一行下方連續看到一個全角視頻，其中包含配料和說明。 我們將用視頻滑塊模塊替換視頻。 為此，請刪除視頻模塊。

然後在其位置添加一個新的視頻滑塊模塊。

將視頻添加到滑塊

要將視頻添加到滑塊，請打開視頻滑塊設置。 在內容選項卡下，您將看到一個已經存在的模擬視頻。 打開現有視頻的設置。

接下來，刪除默認視頻並單擊添加視頻圖標以將新視頻添加到滑塊。

對於此示例，我添加了一個自託管視頻。 上傳 MP4 和 Webm 版本的視頻文件總是一個好主意。

接下來，我們可以為視頻添加圖像疊加層。

完成後，保存更改。

要創建其他視頻，請返回視頻滑塊設置並將現有視頻複製 3 次，總共獲得 4 個視頻。 然後，在疊加選項下，切換“是”以在主視頻上顯示圖像疊加。

添加條件顯示選項

對於本教程，我們將僅向已登錄的用戶顯示此視頻滑塊。為此，請轉到高級選項卡並單擊以在條件選項組下添加新條件。

在顯示條件下拉菜單中，從列表中選擇登錄狀態。 確保選擇僅在用戶登錄時才顯示。 然後保存更改。

額外提示：為未登錄的用戶創建 CTA 或登錄表單

對於新訪問者，您可能希望創建某種 CTA 進行註冊或登錄表單，以便會員輕鬆登錄並查看視頻。 為此，您可以創建一個新的兩列行，其中左列中的圖像看起來像視頻，右列中的登錄表單如下面的屏幕截圖所示。

然後打開行設置，根據登錄狀態添加顯示條件。 僅這一次，選擇僅在User is Logged Out時才顯示。 這將僅在用戶註銷時向用戶顯示內容。

添加登錄表單時，請確保更新重定向選項以重定向到當前頁面。 這將改善想要登錄並在同一頁面上觀看視頻的用戶的用戶體驗。

要了解如何從頭開始為已註銷的用戶創建 CTA 部分，請查看我們關於如何使用 Divi 的條件選項創建會員專享博客文章的帖子。

最終結果

這是我們最終的視頻滑塊。 請注意，在用戶使用登錄表單登錄之前，它們是如何對用戶隱藏的。

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

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

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

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

最後的想法

當您想向會員或訂閱者提供優質內容時，能夠根據登錄狀態顯示/隱藏視頻滑塊會派上用場。

有關更多信息，請查看有關如何使用 Divi 的條件選項創建會員專享博客文章的類似文章。

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

乾杯!