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

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

我希望你喜歡到目前為止的網格佈局。 今天的佈局是系列中的第 4 種佈局，它是我最喜歡的佈局之一（並且實現速度最快）。 使用 Divi 構建不僅簡單（且有趣），而且還可以自定義以適合您網站的配色方案。 背景漸變選項是此設計的主要特徵，用於創建由對角線分隔的兩種色調。 間距也是有目的的，使視頻容易被感知。 可以說，這種設計可能超出了我們通常所說的“網格”的範圍，但我認為你會看到它的潛力。

所以我們開始了。 我將向您展示使用視頻模塊和一些自定義背景元素構建此網格設計是多麼容易。

這是最終結果的樣子

概念與靈感

我一直在尋找一種漂亮而乾淨的佈局，可以組織小批量的視頻，用於教程或課程等內容。 這與我對背景漸變的衝動渴望相結合，我想出了這個。 我希望你喜歡它。

讓我們開始吧。

使用 Divi 實現設計

訂閱我們的 YouTube 頻道

首先，添加一個具有全角（1 列）結構的常規部分。

接下來向該列添加一個文本模塊。 這將用作頁面部分的標題或標題。

更新文本設置如下：

內容選項
內容：[輸入標題文字]

設計選項

文字顏色：淺
文字字體：Arimo
文字字體大小：56px
文字字母間距：1px
文本行高：1em

保存設置

您將無法看到任何內容，因為您在白色背景上有白色文本，但這沒關係。 讓我們繼續添加我們的部分背景漸變。 轉到部分設置，然後在內容部分下更新以下選項：

背景漸變顏色：#121212，#ffffff
漸變類型：線性
梯度方向：198deg
起始位置：45%
結束位置：45%

接下來，更新您剛剛添加的行的行設置，如下所示：

設計選項

使這一行全寬：是
使用自定義裝訂線寬度：是
天溝寬度：4
均衡柱高：是
自定義填充：頂部 1%，右側 5%，底部 5%，左側 5%

保存設置

現在在剛創建的行的正下方添加具有 ⅔ ⅓（2 列）結構的另一行。

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

更新視頻設置如下：

內容選項

視頻 MP4/URL：[輸入視頻的 URL]
圖像疊加 URL：[輸入疊加圖像 URL]

保存設置

接下來，複製（或複制）您剛剛創建的視頻模塊兩次並拖動（或粘貼）兩個重複的視頻，使它們堆疊在右列上。

更新視頻的內容以包含正確的 URL 和封面圖片。

繼續在右欄中的兩個視頻模塊下添加一個 Blurb 模塊。 這可以作為該網格內視頻的描述。

更新 Blurb 設置如下：

內容選項

標題：[輸入標題]
內容：[輸入內容或描述]

設計選項

文字顏色：淺

保存設置

現在編輯包含您剛剛創建的視頻的行的行設置，如下所示：

內容選項

背景漸變顏色：#4999c1、#121212
漸變類型：線性
梯度方向：198deg
起始位置：45%
結束位置：45%

設計選項

使這一行全寬：是
使用自定義裝訂線寬度：是
天溝寬度：4
均衡柱高：是
自定義填充：頂部 5%，右側 5%，底部 5%，左側 5%

偉大的！ 你完成了第一部分。 我們快完成了。 查看到目前為止的進度。

要創建下一部分，請通過單擊“複製部分”按鈕複製您剛剛構建的整個部分。

更新新的部分設置如下：

內容選項

背景漸變顏色：#ffffff、#121212（這些顏色與第一部分的順序相反）

接下來使用以下內容更新復制部分中的文本模塊設置：

設計選項

文字文字顏色：#333333

保存設置

要完成此部分，請使用以下內容更新包含您的視頻的行設置：

內容選項

背景漸變顏色：#121212、#4999c1（基本上你是切換顏色的順序，所以它們與第一部分的順序相反）

保存設置

現在讓我們看看添加第二部分後的結果......

如果您還沒有註意到，您可以繼續輕鬆添加更多部分，因為我們已經創建了這兩個部分。 讓我們再創建一個部分，只是為了更好地衡量。 由於我們的部分背景顏色在底部是黑色的，我們希望在頂部以黑色背景顏色開始下一部分。 這意味著我們需要復制頂部的第一部分並將其拖到頁面底部的第二部分下方。 這樣可以保持整個頁面設計的連續性。

這是添加第三部分後的樣子：

就是這樣！ 全部完成了。

有反應嗎？

這種佈局實際上在移動設備上看起來更好，無需任何修改。 一探究竟！

進一步定制

在使用多個部分構建此網格佈局後，您可能已經註意到更改顏色以匹配下一個項目的主題是多麼容易。 所需要的只是更改部分和行的背景漸變顏色。

如果您想進一步調整設計，我建議為漸變顏色添加半透明以暴露其背後的背景。 或者嘗試完全擺脫一種漸變顏色，看看它是什麼樣子。 以下是僅更改一種漸變顏色可以執行的操作的幾個示例……

您還可以將視頻滑塊模塊添加到左列的網格中。

接下來…

接下來是我們在該系列中的最後一個視頻網格佈局。 這使您可以選擇通過微妙的框架元素或以獨特的方式使用顏色來使每個視頻脫穎而出，從而使內容保持整潔。

在此之前，我期待在評論中收到您的來信。

享受！