如何使用 Divi 的視頻模塊創建令人驚嘆的網格佈局（第 2 部分）

已發表: 2017-06-21

歡迎在我們的迷你係列如何使用 Divi 的視頻模塊創建令人驚嘆的網格佈局中發布 5 個中的 2 個。 在本系列中，我們將向您介紹如何使用 Divi Visual Builder 從頭開始創建令人驚嘆的網格佈局。 如果您擔心這太複雜，請再想一想！ 所有這些佈局都可以使用 Visual Builder 創建和設置樣式，而無需額外的代碼。

我們進入了該系列的第 2 部分！我不得不說我真的很喜歡構建這些佈局。今天，我將向您展示如何為您的視頻創建類似於產品頁面或登錄頁面的功能部分的網格佈局。此佈局由一系列 1/2 1/2 列的行組成，每行包含一個視頻及其在兩列中的每一列中的相應描述。然後下一部分將視頻和說明的順序從左到右，然後從右到左交替。由於每一行都拉伸頁面的全寬，並且每一列保持相同的垂直高度，因此佈局在所有屏幕尺寸上看起來都很棒。

我將使用視頻模塊添加視頻，並使用模糊模塊作為與視頻相鄰的標題和描述部分。與本系列中的所有佈局一樣，使用 Divi 實現這一佈局也非常容易。

這是最終結果的樣子

視頻網格

概念與靈感

無論如何，這個概念並不新鮮。我實際上受到啟發創建這種佈局，因為它對用戶很熟悉。許多網站使用類似的佈局來展示其產品或服務的功能。它允許更大的內容區域，我認為這為文本和視頻的醒目圖像創造了巨大的負空間。

對於使用視頻來宣傳產品功能但也有許多其他用途的公司來說，這將是完美的選擇。我希望你在下一個項目中利用這個設計。

讓我們開始吧。

使用 Divi 實現設計

訂閱我們的 YouTube 頻道

首先，添加具有 1/2 1/2（2 列）結構的常規部分。

視頻網格

接下來將視頻模塊添加到左列。

視頻網格

更新視頻設置如下：

內容選項

視頻 MP4/URL：[輸入視頻的 URL]
圖像疊加 URL：[為您的視頻上傳自定義圖像或從視頻自動生成圖像]

視頻網格

設計選項

播放圖標顏色：rgba(255,255,255,0.87)

視頻網格

保存設置

接下來在與您剛剛創建的視頻模塊直接相鄰的右欄中添加一個 Blurb 模塊。

視頻網格

更新 Blurb 設置如下：

內容選項：

標題：[輸入視頻標題]
內容：[輸入視頻說明]
鏈接：[如果需要，您可以輸入鏈接網址到另一個頁面]
使用圖標：是
圖標：[選擇圖標]

視頻網格

設計選項：

圖標顏色：#666666
文字顏色：淺
文字方向：居中
標題字體：Roboto
標題字體大小：52px
標題字母間距：1px
正文字體：Open Sans
正文字體大小：20px
正文顏色：#dddddd
桌面上的自定義填充：5% 頂部（您可能需要根據描述中的文本量進行調整）
平板電腦和智能手機上的自定義填充：頂部 20 像素，底部 20 像素

視頻網格

高級選項

圖像/圖標動畫：從右到左（此動畫與箭頭圖標結合將進一步引起對左側視頻的注意。

視頻網格

保存設置

在我們繼續之前，請繼續將您的背景圖片添加到您的部分。轉到部分設置（藍色區域）並更新以下內容：

內容選項：

背景圖片：[輸入背景圖片（我的是 2000 x 2200）]

使用視差效果：是
視差法：真視差

視頻網格

設計選項：

自定義填充：0px 頂部，0px 底部

視頻網格

保存設置
接下來使用以下更新編輯行設置：

內容選項

第 2 列背景顏色：rgba(0,0,0,0.69)

設計選項

使這一行全寬：是
使用自定義裝訂線寬度：是
天溝寬度：1
均衡柱高：是
自定義填充：0px 頂部，0px 底部
自定義邊距：0px 頂部，0px 底部
第 1 列自定義填充：頂部 0px，底部 0px
第 2 列自定義填充：頂部 0px，底部 0px

事情現在開始到位。你有你的背景圖片，你已經創建了你的第一行。現在您已準備好複製該行。單擊可視化構建器中行菜單欄上的重複圖標。