如何擴展模塊以在 Divi 中創建獨特的列佈局

您使用 Divi Builder 設計的每個新頁面都使用許多不同的列佈局進行結構化。 Divi 包括每行的內置列佈局，範圍從一列一直到六列。 但是，有時，您可能會覺得需要調整這些列以獲得更獨特的佈局。 今天，我將向您展示一種創造性的方法來做到這一點。

在本教程中，我將向您展示一種簡單的設計技術，它允許您使用負邊距擴展模塊以佔據多列。 這種技術將允許您設計一些您可能認為不可能的獨特的自定義佈局。

讓我們開始吧。

搶先看

為了更好地了解我們將要構建的內容，以下是使用此技術的設計前後版本。

前

這是不使用自定義邊距將模塊擴展到其他列的佈局設計。

後

這是擴展了兩個圖像模塊和三個標有數字“01”、“03”和“05”的文本模塊後的佈局。

這種變化是微妙的，但您應該能夠看到模塊已經擴展到佔據相鄰列。 實現這一目標唯一需要的就是 -100% 的簡單邊距設置。

平板電腦上的結果更令人興奮。

理解概念

默認情況下，每個 Divi 模塊的寬度為 100%，這意味著您放置在列中的每個模塊將跨越它所在列的整個寬度。 裝訂線寬度是 Divi 用來確定每列之間的空間量的寬度。 因此，對於本教程，將 Gutter 寬度設置為 1 以消除該空間非常重要。

下圖說明了每個模塊如何跨越設置為 1 的裝訂線寬度的行中的列的全寬。

現在，如果您向模塊添加負邊距（左或右），您可以輕鬆擴展該模塊以佔據多列。 這允許您為您的頁面創建您可能沒有考慮過的自定義列佈局。

在此圖中，您可以看到，通過向第 5 列中的模塊添加 -100% 左邊距，它將模塊向左擴展以佔據第 5 列和第 4 列。

使用六列佈局的好處之一是設計可以很好地保留在平板電腦上。

此外，由於列從左到右的排序方式，模塊通常應向左擴展，以便內容不會隱藏在列後面。 如果您設置了背景顏色，則尤其如此。 因此，如果遇到模塊內容隱藏在列後面的問題，您可能是在錯誤的方向擴展模塊。

為什麼要使用六列佈局？

為這種設計技術使用六列佈局有三個主要原因。 第一個原因是它為您提供了更多的列來使用。 第二個原因是六列佈局在平板電腦上轉換為三列佈局，這將很好地保留設計元素。 第三個原因是列將在移動設備上保持其順序，因此列背景顏色將保持不變。 這對網格佈局很有幫助。

這種設計也適用於 1/2 1/6 1/6 1/6 列佈局和 1/6 1/6 1/6 1/2 列佈局，因為它們都將在平板電腦上保留三列。

實施設計

為了展示這種設計技術的工作原理，我將引導您完成為特色產品構建簡單網格佈局的過程。 然後，我將向您展示如何將模塊擴展到其他列以創建自定義佈局設計。

設置您的部分和行

首先，創建一個新頁面並部署可視化構建器。 然後選擇“從頭開始構建”。 然後繼續向第一部分添加 1/2 1/6 1/6 1/6 列佈局。

然後按如下方式更新行設置：

背景顏色：#222831
天溝寬度：1
均衡柱高：是
自定義邊距：0px 頂部，0px 底部
自定義填充：0px 頂部，0px 底部

保存設置。

由於此設計的所有三行都將共享這些行設置。 繼續複製該行以創建第二行。 然後將第二行更改為六列佈局。

要創建第三行，只需複制第二行。

將模塊添加到第 1 行

在頂部第一行的第一列中，添加具有以下設置的文本模塊：

文字顏色：淺
文字文字大小：16px
自定義填充：2vw 頂部，2vw 底部，2vw 左，2vw 右

在第一行的第二列中，添加具有以下設置的模糊模塊：

標題：[輸入標題]
內容：[刪除]
圖標：[選擇圖標]
圖標顏色：#eeeeee
圖標字體大小：50px
文字顏色：淺
文字方向：居中
自定義填充：3vw 頂部，2vw 底部

保存設置

在第三列中，添加圖像。

在最後一列中，我們希望將其留空，以便我們可以擴展圖像模塊以填充該列。 但是我們不想讓它完全為空，以便在移動設備上堆疊時該列處於活動狀態。 所以，最簡單的做法就是添加一個分隔線模塊，並選擇不顯示分隔線。 然後我們可以隱藏智能手機的分隔線。

更新分頻器設置如下：

顯示分隔線：否
禁用：電話

將模塊添加到第 2 行和第 3 行

現在讓我們轉到第 2 行。在第一列中，複製並粘貼您在第一行第二列中創建的模糊模塊。 然後將圖標和標題文本更改為黑色。

然後使用以下內容將文本模塊添加到第二列：

內容：

<h2>Product</h2>
01

文字文字顏色：#ffffff
文字文字大小：50px
文本行高：1em
文字方向：右
標題 2 文本對齊方式：左
標題 2 文本顏色：#ffffff
標題 2 行高：3em
自定義填充：2vw 頂部，2vw 底部，2vw 左，2vw 右

Next 複製剛剛創建的文本 Module 並將其粘貼到第 4 列和第 6 列中。

您還可以在第 3 行的第 3 列、第 5 列和第 6 列中粘貼相同的文本模塊。之後，您可以使用內聯編輯器更改每個文本模塊的編號，以便您可以查看這些模塊如何堆疊稍後移動。

在第 3 行的第 2 列中，添加另一個圖像。

之後，通過複製和粘貼您在第 1 行中創建的分隔線，用分隔線填充整個部分的所有空列。

此時您的佈局應該是這樣的（空方塊代表一個分隔模塊）：

添加負邊距以將模塊擴展到其他列

在這一點上，我們可以開始使用負邊距擴展我們的模塊。 這個過程非常簡單。

打開第一行圖像的圖像模塊設置。 由於我們想將圖像向右擴展，因此我們將添加 -100% 的右邊距。

接下來，將 -100% 左邊距添加到第 2 行第 3 列的文本模塊。

現在復制模塊樣式並將它們粘貼到第 2 行第 6 列的文本模塊以及第 3 行第 5 列的文本模塊中。

剩下的就是擴展第 3 行第 2 列中的圖像。使用 -100% Left 的自定義邊距更新圖像模塊。

為您的列添加背景顏色

設計的最後一個階段是為您的列添加背景顏色。 對於第一行（頂行），添加以下內容：

第 1 列背景顏色：#393e46

對於第二行，添加以下內容：

第 1 列背景顏色：#eeeeee
第 4 列背景顏色：#7971ea
第 5 列背景顏色：#393e46
第 6 列背景顏色：#393e46

對於最後一行，添加以下內容：

第 3 列背景顏色：#7971ea
第 6 列背景顏色：#7971ea

這就是桌面設計。 現在讓我們確保在移動設備上一切正常。

調整智能手機顯示屏的佈局

現在，當前的佈局在台式機和平板電腦上看起來很棒，但我們添加的那些負邊距需要在智能手機上進行調整。

通常，如果我想修復智能手機的負邊距，我只需在智能手機設備的模塊設置中將左邊距設置為 0%。 但是，仍然需要對 479 像素和 767 像素寬之間的屏幕尺寸進行調整。 因此，修復智能手機負邊距的最佳方法是使用自定義 CSS 片段。

轉到頁面設置並在高級選項卡下添加以下自定義 CSS：

/** Fixes negative margins on smartphone**/

@media only screen and (max-width: 479px){
.et_pb_module {
    margin-left: 0%!important;
    margin-right: 0%!important;
}
}

當屏幕大小等於或小於 479px 寬時，此 CSS 代碼段的作用是將所有模塊的左右邊距設置為 0%。 這很好地解決了問題！

現在讓我們看看最終的設計。

最後的想法

使用負邊距擴展模塊是一種在台式機和平板電腦上獲得獨特佈局設計的便捷方式，而無需求助於一堆 CSS 來更改 Divi 的默認列佈局。 關於這種設計技術，我最喜歡的事情之一是佈局在平板電腦上看起來有多漂亮。 希望它對您的下一個項目有用。 如果有的話，它總是有助於更深入地了解 Divi。

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

乾杯!