如何為獨特的破碎網格設計錯開 Divi 列和模塊
已發表: 2019-07-10現代網頁設計仍然是打破網格。 這是通過在打破網格佈局的正常結構的位置交錯元素和設計重點來完成的。 你可以看到我們在我們很棒的 Divi 佈局中應用了很多這些破碎的網格設計。 通常，這涉及將模塊移動到列或行之外的事情，以便它們擴展到容器之外或與頁面上的其他元素重疊。 但是您可能沒有想過移動實際的列。
在本教程中，我將向您展示如何為獨特的破碎網格設計錯開 Divi 列和模塊。 使用 Divi 的新列選項，您可以輕鬆移動列及其包含的模塊。 這使您可以設計具有獨特樣式的模塊和列，以實現創造性的破碎網格設計。
讓我們開始吧！
搶先看
以下是我們將在本教程中構建的設計示例的快速瀏覽。
免費下載 Stagger Divi 列和模塊佈局
要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。
讓我們進入教程好嗎？
基本思想解釋
如何為獨特的破碎網格設計錯開 Divi 列和模塊背後的基本思想涉及使用 Divi 的轉換轉換屬性來定位列及其包含的模塊。
一旦元素交錯排列，您就擁有了柱子和模塊的所有設計功能，可以添加設計重點，從而創建獨特的破碎網格設計。
因此，例如，您可以為您的列添加一個帶有框陰影的獨特背景（顏色、圖像等），並為您的模塊添加一個完全不同的背景和框陰影。
現在您有了基本的想法，讓我們從頭開始創建設計。
你需要什麼開始
首先，您需要具備以下條件：
- 已安裝並激活 Divi 主題
- 在前端從頭開始構建的新頁面（可視化構建器）
- 用於模擬內容的幾個圖像
之後，您將有一個空白畫布開始在 Divi 中進行設計。
在Divi中交錯列和模塊以創建獨特的破碎網格設計
首先，創建一個具有兩列行的新常規部分。
然後在第 1 列中添加一個號召性用語模塊。
將標題文本更改為“Divi Module”或您選擇的其他簡短標題。
然後使用深色背景顏色更新模塊，然後按如下方式更改標題文本：
背景顏色：#333333
文本對齊：左
標題字體：苦澀
標題文字大小：50px
標題字母間距：2px
然後更新號召性用語模塊按鈕，如下所示：
按鈕文字大小：16px
按鈕文字顏色：#333333
按鈕背景顏色：
按鈕邊框顏色：#ffffff
按鈕邊框半徑：25px
按鈕字母間距：2px
按鈕字體：Raleway
按鈕字體粗細：粗體
按鈕字體樣式：TT
接下來，複製模塊並在第 2 列中粘貼副本，以便在每一列中都有相同的號召性用語模塊。
更新行間距
現在讓我們為行添加一些頂部和底部邊距，為設計騰出空間。
保證金：頂部 20%，底部 20%
添加列背景圖像
儘管我們還不能看到它們，但我們將向每一列添加背景圖像。 一旦我們使用變換翻譯將我們的模塊移到列容器之外，它們就會變得可見。
繼續並打開第 1 列的設置並添加背景圖像。
然後打開第 2 列的設置並添加背景圖像。
為每列添加一個框陰影
打開第 1 列設置並添加以下框陰影：
盒子陰影：見截圖
框陰影水平位置：0px
框陰影垂直位置：0px
框陰影傳播強度：100px
陰影顏色：rgba(151,178,193,0.21)
然後將相同的框陰影樣式添加到第 2 列。為了加快速度，您可以使用右鍵單擊選項複製第 1 列中的框陰影樣式，然後將它們粘貼到第 2 列中的框陰影樣式。
您會注意到框陰影會重疊。 使用半透明的盒子陰影顏色將有助於創建一個很酷的重疊效果。 這是在設計中使用框陰影的好處。 與邊框不同，您可以添加看起來像邊框的大陰影，但它們不會影響佈局的實際間距。
使用 Transform Translate 錯開 Divi 列
此時，我們準備開始交錯列和模塊以完成破碎的網格設計。 首先，我們需要將列移動到頁面的外邊緣。 然後我們可以稍後將模塊移向中心。
交錯列 1
打開第 1 列設置並添加以下轉換轉換屬性。
變換 X 軸平移：25%
Transform Translate Y 軸：-25%（桌面），-5%（平板）
交錯列 2
對於第 2 列，添加以下轉換轉換屬性。
變換 平移 X 軸：-25%
Transform Translate Y 軸：25%（桌面），5%（平板）
使用 Transform Translate 錯開模塊
現在我們準備通過將模塊移出列容器來交錯模塊。 這將暴露列背景圖像，並允許我們向模塊添加另一個框陰影，以獲得額外的重疊設計元素。
交錯模塊 1
在第 1 列中打開號召性用語模塊的設置並更新以下內容：
變換 平移 X 軸：-60%
Transform Translate Y 軸：50%（桌面），10%（平板）
向模塊 1 添加框陰影
然後將以下框陰影添加到第 1 列的號召性用語模塊中：
盒子陰影：見截圖
框陰影水平位置：0px
框陰影垂直位置：0px
框陰影傳播強度：100px
陰影顏色：rgba(151,178,193,0.21)
交錯模塊 2
要移動第 2 列中的模塊，請更新以下內容：
變換 X 軸平移：60%
Transform Translate Y 軸：-50%（桌面），-10%（平板）
向模塊 2 添加框陰影
接下來，我們可以在第 2 列的號召性用語模塊中添加一個框陰影。我們需要使這個框陰影幾乎完全透明，因為它會與模塊 1 重疊，我們不想讓內容難以閱讀。
盒子陰影：見截圖
框陰影水平位置：0px
框陰影垂直位置：0px
框陰影傳播強度：100px
陰影顏色：rgba(151,178,193,0.09)
添加行框陰影框
為了完成設計，讓我們向作為位於背景中的框架設計元素的行添加一個框陰影。
盒子陰影：見截圖
框陰影垂直位置：0px
陰影顏色：#97b2c1
最終設計
現在讓我們看看最終的設計。
桌面
藥片
電話
嘗試不同的設計
這種設計很酷的地方在於，它允許您輕鬆更改新設計的模塊數量、顏色和間距。 您也可以在不同位置錯開 Divi 列和模塊。
為模塊添加間距以創建與模塊大小相同的列背景圖像
因為列的大小是由它包含的內容的大小決定的，所以你向模塊添加的任何空間也會增加列的大小。 由於我們的專欄已經與背景圖像交錯，這是一種讓背景圖像始終隨模塊大小縮放以實現平衡設計的簡單方法。
例如，打開第 1 列中的號召性用語模塊的設置並按如下方式更新填充：
填充：頂部 20%，底部 15%
並註意第 1 列背景圖像如何隨模塊大小縮放。
添加更多模塊
同樣，向模塊添加更多填充會增加列背景的大小，在列中添加更多模塊也會增加列背景的大小。
例如，複製第 2 列中的模塊並註意背景圖像如何擴展以容納列中兩個模塊所需的空間。
然後您可以將第 2 列中的頂部模塊向右移動一點以獲得不錯的替代設計。
這是結果。
改變顏色
如果您希望將佈局與您自己的配色方案相匹配，一個很好的方法是更新框陰影顏色。
以下是更新第 1 列、模塊 1 和模塊 2 的半透明框陰影時的外觀示例。
最後的想法
我希望本教程能給你一些靈感，讓你了解如何交錯 Divi 列和模塊來創建自己獨特的破碎網格設計。 該技術非常簡單，主要涉及一些變換轉換屬性以交錯列和模塊以及一些框陰影以創建獨特的破碎設計。 隨意探索更多顏色選項並引入更多模塊，看看設計可能帶你去哪裡。
我期待在評論中收到您的來信。
乾杯!