如何使用 Divi 中的顯示/隱藏切換創建粘性促銷視頻

宣傳視頻是一種極好的營銷工具，可以向所有寧願觀看視頻而不是瀏覽您的頁面以獲取信息的訪問者宣傳您的產品和服務。 而且，如果您確信自己的視頻有助於提高轉化率，最好讓用戶盡可能多地看到視頻。 考慮到這一點，粘性促銷視頻（固定在頁面頂部的視頻）可能是您網站的寶貴資產。

在本教程中，我們將向您展示如何在 Divi 中創建帶有顯示/隱藏切換的粘性促銷視頻。 這個想法是最初在折疊上方顯示視頻的全尺寸版本。 然後當用戶向下滾動頁面時，視頻會固定在頁面頂部以便於訪問和/或查看，同時用戶瀏覽頁面上的其餘內容。 當然，這對某些訪問者來說可能有點麻煩。 因此，我們還將向您展示如何添加切換按鈕，讓用戶能夠隨時顯示或隱藏視頻。

讓我們開始吧！

搶先看

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

這是沒有切換的粘性視頻。

這是帶有切換按鈕的相同粘性視頻。

下面是切換功能的詳細介紹。

這是它在移動設備上的樣子。

免費下載佈局

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

下載文件

免費下載

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

下載

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

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

單擊導入按鈕。

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

然後點擊導入按鈕。

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

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“選擇預製佈局”選項。
   
4. 上傳數字營銷服務頁面佈局。
   

如何為您的銷售頁面創建帶有顯示/隱藏切換的粘性促銷視頻

為粘性視頻添加行

首先，我們將刪除佈局第一/頂部部分行中的第二個文本模塊。

在頂部的現有行下，添加一個新的單列行。

打開新行的行設置，然後在高級選項卡下，更新 Z 索引，如下所示：

• Z指數：14

這將確保我們添加到行中的視頻在頁面滾動過程中卡住時將保持在頁面上的其他內容之上。

添加視頻

在行的列內，添加一個新的視頻模塊。

打開視頻設置並上傳您選擇的視頻的 mp4 和 webm 格式。

如果需要，可以向視頻添加疊加圖像。

在“設計”選項卡下，更新以下大小調整選項：

• 最大寬度：900px
• 模塊對齊：居中

• 圓角：8px
• 盒子陰影：見截圖

使列具有粘性

打開包含視頻的列的設置，並在“高級”選項卡下添加以下 CSS 類：

• CSS 類：et-sticky-video

然後更新搖杆位置如下：

• 粘滯位置：粘在頂部
• 過渡默認和粘性樣式：否

現在粘性位置已生效，將以下自定義 CSS 添加到粘性狀態的主元素：

width: 300px !important;
right: 0px !important;
left: auto !important;
top: 0px;

更新粘性狀態下的視頻播放圖標大小

接下來，再次打開視頻設置，更新粘滯狀態下的播放圖標字體大小如下：

• 使用自定義圖標大小：是
• 播放圖標字體大小（粘性）：50px

結果到此為止

創建粘性視頻切換按鈕

要創建粘性視頻切換按鈕，請在視頻模塊下創建一個新的按鈕模塊。

然後移動視頻模塊上方的按鈕。

打開按鈕設置並更新按鈕文本如下：

• 按鈕文字：隱藏

（注意：當我們稍後添加代碼時，單擊按鈕時，此文本將替換/切換為“顯示”一詞。）

在設計選項卡下，更新以下內容：

• 為按鈕使用自定義樣式：是
• 按鈕文字樣式：14px
• 按鈕文字顏色：#fa50a9
• 按鈕字體粗細：半粗體
• 按鈕字體樣式：TT
• 按鈕圖標：向右箭頭
• 僅在懸停按鈕時顯示圖標：否

（注意：當我們添加代碼佈局時，您選擇的按鈕圖標將在單擊按鈕時旋轉 180 度，以提供更直觀更好的用戶體驗。

更新按鈕的間距：

• 填充：頂部 0.5em，底部 0.5em，左側 1em，右側 1.7em

在高級選項卡下，將以下 CSS 類添加到按鈕：

• CSS 類：et-sticky-video-toggle

在高級選項卡下，更新位置選項：

• 位置：絕對
• 位置：左下角

現在通過更新粘性狀態下的轉換轉換選項，將列/視頻外部的按鈕向左移動，如下所示：

• Transform Translate X 軸（粘性）：-100%

為了完成按鈕切換的設計，我們需要隱藏按鈕直到它達到粘滯狀態。 為此，請將自定義 CSS 更新為桌面和粘性狀態的主要元素，如下所示：

對於桌面上的主要元素...

display:none !important;

對於 Sticky 上的主要元素......

display:block !important;

為切換功能添加自定義代碼

為了讓切換按我們需要的方式工作，我們需要在視頻模塊下添加一個代碼模塊。

自定義 CSS

在內容選項卡中，通過以下自定義 CSS，確保將其包裝在樣式標籤中。

.et-sticky-video-toggle.et_pb_button:after, .et_pb_sticky.et-sticky-video {
transition: all 200ms;
}
.et_pb_sticky.et-sticky-video-active {
transform: translate(100%, 0%);
}
.et-sticky-video-toggle:hover {
cursor: pointer;
}
.et-sticky-video-hidden:after {
transform: rotate(180deg) !important;
}

自定義 JQuery

然後在帶有樣式標籤的 CSS 下，添加以下包含在腳本標籤中的 JQuery。

(function($) {
$(document).ready(function(){
var $stickyVideoToggle = $('.et-sticky-video-toggle');

$stickyVideoToggle.on('click',function(e) {
e.preventDefault();

$(e.target).closest('.et-sticky-video').toggleClass('et-sticky-video-active');

$(this).toggleClass('et-sticky-video-hidden');
if ($(this).hasClass('et-sticky-video-hidden')) {
$stickyVideoToggle.text('show');
} else {
$stickyVideoToggle.text('hide');
}
});
});
})(jQuery);

就是這樣！

最後結果

現在查看頁面的實時版本以親自查看結果。

這是沒有切換的粘性視頻。

這是帶有切換按鈕的相同粘性視頻。

下面是切換功能的詳細介紹。

這是它在移動設備上的樣子。

輕鬆將附加模塊添加到粘性列以讚美視頻

因為粘性位置被添加到列（不是視頻）中，所以可以隨意添加額外的模塊/內容來補充視頻。

例如，您可以在同一粘性欄中的視頻底部添加一個按鈕。

然後它會停留在視頻欄的粘性狀態下。

使用此粘性視頻佈局輕鬆添加您自己的自定義視頻選項

將粘性位置應用於列（而不是視頻）對於在列內添加自定義視頻嵌入或 HTML（使用文本或代碼模塊）也很方便。 粘性視頻功能仍然有效。

例如，您可以將 HTML5 視頻添加到同一列中的代碼模塊。

也可以輕鬆更改列結構！

此外，您可以輕鬆地將行更改為您想要與相鄰內容一起顯示視頻的任何列結構。 例如，您可以採用兩列佈局，最初在右列或左列中放置粘性視頻。 只需確保包含視頻內容的列具有與本教程中所述相同的 CSS 類和粘性樣式。 粘性功能將以相同的方式工作。

例如，使用我們現有的設計，我們可以使用圖層視圖添加一個新列，並使用主標題文本填充該新列。

當相鄰的列/內容保持在文檔的正常流中時，粘性列仍將無縫運行。

使用 Divi Overlay Image 選項的 YouTube 視頻/嵌入問題

如果您像本設計一樣使用 YouTube URL 嵌入帶有視頻模塊的視頻，最好不要使用 Divi 的內置疊加圖像（帶播放圖標）選項。 這將導致視頻音頻在粘性狀態下從頭開始自動播放，從而導致以不同的間隔播放重複的音頻。 因此，如果您想在 Divi 視頻模塊中使用 Divi 的疊加圖像和播放圖標，則應添加 mp4 和 WebM 視頻文件/URL。

最後的想法

為您的頁面構建帶有顯示/隱藏切換的粘性促銷視頻，為推廣您的產品和服務的新方法打開了大門。 您不僅可以將那些高轉換率的視頻放在最前面，還可以輕鬆地在視頻上方或下方添加補充信息或 CTA，只需將其添加到 Divi 中的同一列即可。

事實上，您甚至根本不需要包含視頻，只需在粘性欄中填寫您想要在滾動時粘貼到頁面頂部的任何信息即可！

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

乾杯!