如何使用 Divi 重新創建 ET 的點擊視頻演練

已發表: 2019-08-12

在您的網站上共享視頻預覽可以增加互動性並幫助訪問者更好更快地了解您的產品和/或服務。 現在，在 Elegant Themes 網站上，我們為自己採用了這種方法，並創建了一個直接的點擊視頻演練設計，允許人們瀏覽我們一些最受歡迎的功能。 我們已經在 Divi 中重新創建了這個設計，今天，我們將向您展示如何從頭開始重新創建它。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

點擊視頻演練

移動的

點擊視頻演練

免費下載 Click Video Walkthrough 佈局

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

下載文件
免費下載

免費下載

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

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

訂閱我們的 YouTube 頻道

讓我們開始重建吧！

添加新的常規部分

首先向您正在處理的頁面添加一個新的常規部分。

點擊視頻演練

添加新行

列結構

繼續使用以下列結構添加新行：

點擊視頻演練

漿紗

尚未添加任何模塊，打開行設置並應用以下大小設置：

  • 使用自定義裝訂線寬度：是
  • 天溝寬度：2
  • 寬度：85vw（桌面），90%（平板電腦和手機）
  • 最大寬度：100%

點擊視頻演練

第 1 列設置

接下來打開第 1 列設置。

點擊視頻演練

間距

轉到間距設置並在桌面上添加一些頂部填充。

  • 頂部填充：5vw（台式機），0vw（平板電腦和手機）

點擊視頻演練

CSS 類

轉到高級選項卡並添加一個 CSS 類。 稍後，我們將使用這個 CSS 類在平板電腦和移動設備上創建網格效果。

  • CSS 類：項目響應網格

點擊視頻演練

將 Blurb 模塊添加到第 1 列

添加標題

讓我們開始添加模塊吧！ 對於每個可點擊的項目，我們將使用一個 Blurb 模塊。 我們將從第一個開始，並將其重用於其餘的點擊項目。 將新的 Blurb 模塊添加到第 1 列並輸入您選擇的標題。

點擊視頻演練

選擇圖標

接下來選擇一個圖標。

點擊視頻演練

默認圖標設置

繼續設計並相應地更改圖標設置：

  • 圖標顏色：#e8e9ea
  • 圖標位置：左
  • 使用圖標字體大小：是
  • 圖標字體大小：2vw（桌面）、4.5vw（平板電腦）、7vw（手機）

點擊視頻演練

懸停圖標設置

修改懸停時的圖標顏色。

  • 圖標顏色：#b0c8ff

點擊視頻演練

標題文字設置

轉到標題文本設置並在那裡進行一些更改。

  • 標題字體：Lato
  • 標題字體粗細：粗體
  • 標題字體樣式：大寫
  • 標題文字大小：0.8vw（桌面）、1.7vw（平板電腦）、2.5vw（手機）
  • 標題行高度：2vw（桌面）、4.5vw（平板電腦）、7vw（手機）

點擊視頻演練

默認間距

我們將使用一些跨不同屏幕尺寸的自定義填充值來塑造 Blurb 模塊。

  • 頂部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
  • 底部填充：0.5vw（台式機），1.5vw（平板電腦和手機）
  • 左填充：1.2vw（台式機和平板電腦），5vw（手機）
  • 右填充：1.2vw（台式機和平板電腦），5vw（手機）

點擊視頻演練

懸停間距

通過修改懸停邊距值來創建高亮懸停效果。

  • 左邊距：-0.5vw
  • 右邊距：-0.5vw

點擊視頻演練

邊界

添加一些圓角。

點擊視頻演練

默認框陰影

伴隨著微妙的盒子陰影。

  • 框陰影垂直位置：10px
  • 框陰影模糊強度：70px
  • 陰影顏色：rgba(0,0,0,0.11)

點擊視頻演練

懸停框陰影

在懸停時更改框陰影顏色。

  • 陰影顏色：rgba(103,151,255,0.22)

點擊視頻演練

CSS ID 和類

最後但並非最不重要的是，轉到 Blurb 模塊的高級選項卡並添加 CSS ID 和類。

  • CSS ID：video-walkthrough-item-1
  • CSS 類：video-item-cursor

點擊視頻演練

克隆 Blurb 模塊三次

完成第一個 Blurb 模塊後，您可以將其克隆 3 次。

點擊視頻演練

更改內容

更改每個重複的 Blurb 模塊的內容。

點擊視頻演練

更改所有重複的 Blurb 模塊 CSS ID

連同 CSS ID。

  • 1) 可視化構建：video-walkthrough-item-1
  • 2) 效果：video-walkthrough-item-2
  • 3) 形狀分隔線：video-walkthrough-item-3
  • 4) 批量編輯：video-walkthrough-item-4

點擊視頻演練

重用第 1 列

刪除第 3 列

完成第一列後，您可以打開行設置並刪除第三列。

點擊視頻演練

克隆第 1 列並放置在底部

克隆第一列（包含 Blurb 模塊）並將復制的列放在底部。

點擊視頻演練

點擊視頻演練

更改回列結構

將列結構改回本教程開始時選擇的結構。

點擊視頻演練

更改所有第 3 列模糊模塊內容

更改第 3 列中每個重複項的 Blurb 模塊標題。

點擊視頻演練

更改所有第 3 列模糊模塊 CSS ID

連同 CSS ID。

  • 5) 佈局庫：video-walkthrough-item-5
  • 6) 轉換：video-walkthrough-item-6
  • 7) 懸停狀態：video-walkthrough-item-7
  • 8) 查找和替換：video-walkthrough-item-8

點擊視頻演練

將文本模塊添加到第 2 列

將內容框留空

是時候開始添加不同的視頻預覽了！ 有兩種方法可以處理它； 使用視頻模塊或文本模塊。 視頻模塊要求訪問者按播放。 另一方面，使用具有視頻背景的文本模塊會自動播放視頻但沒有聲音。 在本教程中，我們將使用文本模塊，但也可以隨意使用視頻模塊。 確保文本模塊內容框保持為空。

點擊視頻演練

視頻背景

轉到背景設置並上傳您選擇的視頻。

  • 不在視圖中時暫停視頻：是

點擊視頻演練

漿紗

移至設計選項卡並為寬度添加“100%”。

  • 寬度：100%

點擊視頻演練

間距

接下來，我們將通過在不同的屏幕尺寸上添加一些自定義的頂部和底部填充值來允許視頻背景顯示出來。 注意：您添加的值需要根據視頻的尺寸集進行調整。

  • 頂部填充：15vw（桌面）、24vw（平板電腦）、26vw（手機）
  • 底部填充：15vw（台式機）、24vw（平板電腦）、26vw（手機）

點擊視頻演練

邊界

繼續向每個角添加“10px”。

點擊視頻演練

盒子陰影

伴隨著微妙的盒子陰影。

  • 框陰影模糊強度：30px
  • 框陰影擴散強度：-5px
  • 陰影顏色：rgba(0,0,0,0.11)

點擊視頻演練

CSS ID

最後但並非最不重要的是，添加一個 CSS ID。

  • CSS ID：video-walkthrough-1

點擊視頻演練

克隆文本模塊 7 次

完成文本模塊後，您可以將其複制七次（每個 Blurb 模塊複製一次）。

點擊視頻演練

更改所有重複的文本模塊視頻背景

為每個副本上傳不同的視頻背景。

點擊視頻演練

更改所有重複文本模塊 CSS ID 並將 CSS 類添加到所有重複文本模塊

也更改 CSS ID。 確保使用 CSS ID 末尾的相同數字將每個文本模塊連接到正確的 Blurb 模塊。 除了原始文本模塊之外，我們還使用 CSS 類隱藏了每個文本模塊。

  • 文本模塊 1：video-walkthrough-1
  • 文本模塊 2：video-walkthrough-2
  • 文本模塊 3：video-walkthrough-3
  • 文本模塊 4：video-walkthrough-4
  • 文本模塊 5：video-walkthrough-5
  • 文本模塊 6：video-walkthrough-6
  • 文本模塊 7：video-walkthrough-7
  • 文本模塊 8：video-walkthrough-8
  • CSS 類：視頻不是第一

點擊視頻演練

將代碼模塊 #1 添加到第 1 列

完成第二行後，就可以開始添加代碼了。 為了使點擊功能起作用，我們將使用一些 CSS 和 JQuery 代碼。 我們將把代碼放在兩個獨立的代碼模塊中。 首先將第一個代碼模塊添加到第 1 列。

點擊視頻演練

插入頁面 CSS 代碼

添加以下 CSS 代碼行： 

<style>
.video-not-first {
display: none;
}
.video-item-cursor {
cursor: pointer;
}

@media all and (max-width: 980px) {
.item-responsive-grid {
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 2vw;
}
}
.video-walkthrough-active {
background-color:#fff;
margin-right:-0.5vw;
margin-left:-0.5vw;
box-shadow:0 10px 70px 0 rgba(103,151,255,.22),0 15px 105px 0 rgba(103,151,255,.22) !important;
}

.video-walkthrough-active .et-pb-icon{
color: #b0c8ff !important;
}
</style>

點擊視頻演練

將代碼模塊 #2 添加到第 3 列

繼續向第三列添加另一個代碼模塊。

點擊視頻演練

插入點擊函數 JQuery 代碼

輸入以下幾行 JQuery 代碼： 

<script>
jQuery(function($){

$('[id*="video-walkthrough-item"]').click(function() {
	var selector1 = $(this).attr('id').replace('-item', '');
  var $video   = $('#' + selector1);
  
  $video.show().siblings().hide();
  $video.addClass('play-video');
  $(".play-video .et_pb_section_video_bg video").trigger('play');
  $video.removeClass('play-video');

  $('[id*="video-walkthrough-item"]').removeClass("video-walkthrough-active");
  $(this).addClass('video-walkthrough-active');

});
});
</script>

完成此步驟後，您可以保存頁面並退出 Visual Builder！

點擊視頻演練

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

點擊視頻演練

移動的

點擊視頻演練

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 重新創建優雅主題的點擊視頻演練。 我們還免費為您提供了 JSON 下載！ 隨意將此設計用於您創建的任何類型的網站。 這是展示視頻和吸引訪問者註意力的好方法。 如果您有任何問題或建議，請隨時在下面的評論部分發表評論！

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。