如何使用 Divi 的視頻模塊創建令人驚嘆的網格佈局（第 3 部分）
已發表: 2017-06-22歡迎在我們的迷你係列如何使用 Divi 的視頻模塊創建令人驚嘆的網格佈局中發布 5 個中的 3 個。 在本系列中，我們將向您介紹如何使用 Divi Visual Builder 從頭開始創建令人驚嘆的網格佈局。 如果您擔心這太複雜，請再想一想！ 所有這些佈局都可以使用 Visual Builder 創建和設置樣式，而無需額外的代碼。
歡迎來到系列的第 3 部分！ 我有一種感覺，這會讓你有點驚訝。 今天，我將向您展示如何使用半透明背景顏色和漸變來創建多個邊框顏色變化。 最後，我將向您展示如何只需單擊幾下即可完全更改配色方案。 這種佈局由兩個 1/4 1/2 1/4 列結構行和一個 1/4 1/4 1/4 1/4 列結構行的組合組成。
我將使用視頻模塊添加視頻，並使用模糊模塊作為網格中間的標題和描述部分。 與本系列中的所有佈局一樣，這個佈局也很容易使用 Divi 實現。
這是最終結果的樣子
概念與靈感
實際上，最初的佈局想法來自流行的網站 giphy.com，因為它在中間列中展示了一個較大的特色 gif，周圍是較小的 gif。 我認為這個想法適用於視頻網格佈局，因為這將允許您展示更大的視頻以及圍繞它的其他視頻。 然而，我並不關心周圍 giphy 圖像的磚石風格，所以在這篇文章中，我採用了偶數列方法來使所有內容更加對稱。
除了佈局之外，我還想更多地探索 Divi 的半透明背景功能，以創造一些獨特的東西。
讓我們開始吧。
使用 Divi 實現設計
首先，添加具有 1/4 1/2 1/4（2 列）結構的常規部分。 
接下來將視頻模塊添加到第一列。
更新視頻設置如下：
內容選項
視頻 MP4/URL：[輸入視頻的 URL]
圖像疊加 URL：[為您的視頻上傳自定義圖像或從視頻自動生成圖像]
保存設置
然後直接在Video Module下面添加一個Divider Module。
在分隔線設置中，在
現在因為我們要添加很多視頻，我發現複製剛剛創建的視頻模塊並拖到正確的位置更容易。 然後我可以回去更改視頻 URL 並稍後覆蓋圖像。
首先，讓我們複製剛剛創建的視頻模塊並將其拖到第一列的分隔模塊下。
之後，您可以繼續複製第一列元素（視頻、分隔線和視頻）並將它們拖到最右側的列。 然後您可以復制其中一個視頻模塊並將其拖動到中心列。 更新所有視頻內容後，您應該會看到如下所示的內容……
在我們繼續之前，繼續將您的背景顏色添加到您的部分和行列。 轉到部分設置（藍色區域）並更新以下內容：
內容選項
背景顏色：#333333
設計選項：
自定義填充：0px 頂部，0px 底部
保存設置
現在使用以下更新編輯您的行設置：
內容選項：
背景漸變顏色：rgba(255,255,255,0.58) 和 #b684e8
漸變方向：360度
第 1 列背景顏色：rgba(0,0,0,0.69)
第 2 列背景顏色：rgba(255,255,255,0.45)
第 1 列背景顏色：rgba(0,0,0,0.85)
設計選項
使這一行全寬：是
使用自定義裝訂線寬度：是
天溝寬度：1
均衡柱高：是
自定義填充：0px 頂部，0px 底部
自定義邊距：0px 頂部，0px 底部
第 1 列自定義填充：頂部 20 像素、右側 20 像素、底部 20 像素、左側 20 像素
第 2 列自定義填充：頂部 20 像素，右側 20 像素，底部 20 像素，左側 20 像素
第 3 列自定義填充：頂部 20 像素，右側 20 像素，底部 20 像素，左側 20 像素
保存設置
現在是添加第二行的時候了。 繼續在第一個下面添加另一個 1/4 1/2 1/4（3 列）結構行。
為了讓自己在設置行設置選項方面領先一步，請使用右鍵單擊功能複制第一行的樣式並將其粘貼到第二行。
現在，對於您的行設置，您需要更新的只是內容選項，如下所示：
背景漸變：無（擦除被複製的那個）
第 1 列背景顏色：rgba(0,0,0,0.69)
第 2 列背景顏色：rgba(0,0,0,0.0) – 這與無或透明相同
第 3 列背景顏色：rgba(0,0,0,0.35)
現在您的行設置已完成，繼續複製並拖動（或複制並粘貼）視頻模塊到第一行（最左側）和第三行（最右側）中。 然後更新視頻內容。
對於中間列，添加一個模糊模塊並更新設置如下：
內容選項
標題：[輸入頁面或視頻的標題]
內容：[輸入視頻或頁面的內容或描述]
設計選項
文字顏色：淺
文字方向：居中
標題字體：PT Sans
標題字體大小：52px
標題字母間距：1px
正文字體：PT Sans
正文字體大小：20px
現在終於到了最後一排的時候了。 當然，如果需要，您可以添加更多。
繼續並在前一行下方添加一個 1/4 1/4 1/4 1/4（4 列）結構行。
像之前一樣，複製前一行的設計並粘貼到當前行，讓您在設計上有一個小小的領先。
然後按如下方式更新行設置：
內容選項
第 1 列背景顏色：rgba(0,0,0,0.34)
第 2 列背景顏色：rgba(0,0,0,0.69)
第 3 列背景顏色：rgba(0,0,0,0.34)
第 4 列背景顏色：rgba(0,0,0,0.69)
設計選項
第 4 列自定義填充：20px 20px 20px 20px
保存設置
接下來將視頻模塊複製或複製到四列中的每一列。 更新完所有視頻內容後，您就完成了！
看看你的新網格佈局…
創建輕版本
要將之前的深色視頻網格設計更改為淺色版本，您只需更新一些設計選項即可。
更新部分設置如下：
內容選項：
背景顏色：rgba(0,0,0,0.12)
更新所有行設置如下：
基本上回到三行設置中的每一個，無論你在哪裡看到正在使用的背景顏色，只需單擊白色調色板選項。 這會將所有深色半透明的深色背景變成半透明的淺色背景。
更新 Blurb 模塊設置如下：
設計選項
文字顏色：深色
這樣就可以了！ 看看輕版。
使用剖面背景選項輕鬆更改設計
由於網格採用半透明背景構建，您可以輕鬆更改部分背景顏色、漸變或圖像，使您的網站煥然一新，完美匹配您的網站。
看看它可以通過將背景圖像添加到部分設置而產生的差異。
另一種匹配您網站的方法是匹配我們在第一行中添加的背景漸變的顏色。
接下來…
本系列的下一篇文章將是一種完全不同的感覺。 這一切都是為了讓事情保持乾淨和簡單。 還有一些背景漸變技巧。
在此之前，我期待在評論中收到您的來信。
享受！