如何使用 Divi 的新柱結構創建令人驚嘆的截面過渡
已發表: 2018-09-26每週，我們都會為您提供新的免費 Divi 佈局包，您可以將其用於下一個項目。 對於其中一個佈局包，我們還分享了一個用例，可幫助您將網站提升到一個新的水平。
本週，作為我們正在進行的 Divi 設計計劃的一部分，我們將向您展示如何使用 Divi 的新柱結構來創建令人驚嘆的截面過渡。 我們將不同的列結構與 Divi 的一些內置選項相結合，使我們的頁面設計更上一層樓。
讓我們開始吧！
預覽
讓我們首先看一下我們將僅使用 Divi 的內置選項從頭開始創建的三個不同示例。 這些示例在較小的屏幕尺寸上看起來同樣出色。
使用 Divi 的化妝師佈局包的登陸頁面
我們將使用 Divi 的 Makeup Artist Layout Pack 的登陸頁面。 如果您想查看佈局包，請轉到以下博客文章。 儘管我們使用特定的佈局包來演示本教程，但您也可以輕鬆地在其他佈局上使用這些技術。
第 1 節過渡
添加新部分
定位
使用 Divi 的 Visual Builder 打開 Makeup Artist Layout Pack 的登錄頁面。 然後，在英雄部分的正下方添加一個新的常規部分：
間距
接下來刪除部分的所有默認間距：
- 頂部填充：0px
- 底部填充：0px
添加新行
列結構
繼續向具有以下列結構的部分添加新行：
漿紗
也增加行的寬度：
- 使這一行全寬：是
- 使用自定義裝訂線寬度：是
- 天溝寬度：0
間距
接下來刪除默認的頂部和底部填充：
- 頂部填充：0px
- 底部填充：0px
篩選
要使行更加生動，請在過濾器設置中增加飽和度：
- 飽和度：200%
將分頻器模塊 #1 添加到第 1 列
隱藏分隔線
為了在我們的設計中創建第一個正方形，我們將向第 1 列添加一個分隔模塊。禁用“顯示分隔”選項。
漸變背景
接下來，為 Divider 模塊添加漸變背景：
- 顏色 1：rgba(255,255,255,0)
- 顏色 2：RGBA(176,182,219,0.34)
間距
要創建正方形，請更改間距值：
- 上邊距：-120px
- 頂部填充：120px
- 底部填充：120px
克隆分隔器模塊並放置在第 2 列中
完成修改 DIvider 模塊後，將其克隆並將其放置在第二列中。
更改漸變背景
需要對這個副本進行一些更改，從漸變背景開始：
- 顏色 1：rgba(228,237,234,0.58)
- 顏色 2：rgba(255,255,255,0)
更改間距
也更改間距設置。 這將增加此分隔器模塊與第一列中的分隔器模塊之間的距離。
- 上邊距：142px
- 頂部填充：120px
- 底部填充：120px
克隆分隔器模塊 #1 兩次並放置在第 3 和第 5 列中
克隆紫色 Divider Module 兩次，並將副本放在第 3 列和第 5 列中。
克隆分隔器模塊 #2 並放置在第 4 列中
克隆綠色的 Divider Module 並將其放置在第 4 列中。
在平板電腦和手機上隱藏第 3、4 和 5 列中的分隔模塊
在第 3 列中打開分隔器模塊
當然，我們希望這些部分轉換在較小的屏幕尺寸上看起來同樣好。 這就是為什麼我們要隱藏我們使用過的一些模塊的原因。 首先打開第 3 列中分頻器模塊的設置。
在平板電腦和手機上隱藏
轉到“高級”選項卡並禁用手機和平板電腦上的模塊。
複製可見性樣式
我們還需要隱藏第 4 列和第 5 列中的分隔符。 要加快該過程，請複制第 3 列中分隔符的可見性設置：
粘貼可見性樣式
並將它們粘貼到第 4 和第 5 列的分隔模塊中。
部分過渡 #2
添加新部分
定位
要創建第二個部分過渡，請在此處添加一個新部分：
頂部分隔線
打開部分設置並添加以下頂部分隔線：
- 分隔線樣式：在列表中查找
- 分隔線顏色：#ffffff
- 分隔線高度：236px
- 分隔線翻轉：垂直
- 分隔線安排：在部分內容的頂部
底部分隔線
同樣，也添加一個底部分隔線：
- 分隔線樣式：在列表中查找
- 分隔線顏色：#ffffff
- 分隔線高度：236px
- 分隔線安排：在部分內容的頂部
間距
接下來更改間距設置：
- 上邊距：100px
- 下邊距：100px
- 頂部填充：0px
- 底部填充：0px
添加新行
列結構
是時候向新部分添加一行了！ 選擇以下列結構：
漿紗
不添加任何模塊，打開行設置並更改寬度：
- 使這一行全寬：是
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
間距
刪除所有默認的頂部和底部填充：
- 頂部填充：0px
- 底部填充：0px
將分頻器模塊 #1 添加到第 1 列
背景顏色
接下來，將分隔模塊添加到第一列。 打開其設置並添加背景顏色：
- 背景顏色：rgba(176,182,219,0.34)
分隔線顏色
還要更改分隔線顏色：
- 分隔線顏色：#ffffff
分隔線樣式
然後，轉到樣式設置並使用以下分隔樣式：
- 分隔線樣式：雙
分頻器重量
分隔器的重量應如下所示：
- 分隔線重量：18px
間距
最後但並非最不重要的是，使用自定義填充增加分隔模塊的大小：
- 頂部填充：50px
- 底部填充：50px
克隆分隔器模塊並放置在第 2 列中
完成第一列中的分隔模塊後，克隆它並將副本放在第二列中。
更改背景顏色
相應地更改此副本的背景顏色：
- 背景顏色：#e4edea
克隆分隔器模塊 #1 並放置在第 3 和第 5 列中
繼續克隆紫色 Divider Module 兩次，並將重複項放在第 3 列和第 5 列中。
克隆分隔器模塊 #2 並放置在第 4 列中
克隆綠色的 Divider Module 並將副本放在第 4 列中。
在平板電腦和手機上隱藏第 3、4 和 5 列中的分隔模塊
在平板電腦和手機上隱藏
我們將做與第一部分過渡示例相同的事情。 在第 3 列中打開 Divider Module 的設置並將其隱藏在手機和平板電腦上。
複製可見性樣式
複製這些可見性樣式。
粘貼可見性樣式
並將它們粘貼到第 4 和第 5 列的分隔模塊中。
第 3 節過渡
添加新部分
定位
要將最後一個部分過渡添加到您的頁面，請在此處添加一個新部分：
頂部分隔線
打開部分設置並添加頂部分隔線：
- 分隔線樣式：在列表中查找
- 分隔線顏色：#ffffff
- 分隔線高度：150px
- 分隔線安排：在部分內容的頂部
底部分隔線
接下來添加一個底部：
- 分隔線樣式：在列表中查找
- 分隔線顏色：#ffffff
- 分隔線高度：150px
- 分隔線翻轉：垂直
- 分隔線安排：在部分內容的頂部
間距
然後，轉到間距設置並進行一些更改：
- 上邊距：100px
- 下邊距：100px
- 頂部填充：0px
- 底部填充：0px
添加新行
列結構
我們在本節中需要的行具有以下列結構：
漿紗
不添加任何模塊，打開行設置並增加行的寬度：
- 使這一行全寬：是
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
間距
接下來刪除所有默認的頂部和底部填充：
- 頂部填充：0px
- 底部填充：0px
將分頻器模塊 #1 添加到第 1 列
隱藏分隔線
繼續向第一列添加分隔模塊。 禁用“顯示分隔符”選項。
背景顏色
改為向分隔線添加背景顏色：
- 背景顏色：rgba(176,182,219,0.34)
間距
通過使用頂部和底部填充來增加模塊的大小：
- 頂部填充：100px
- 底部填充：100px
克隆分隔器模塊並放置在第 2 列中
更改背景顏色
克隆第一列中的分隔器模塊，並將副本放在第二列中。 打開其設置並更改背景顏色：
- 背景顏色：rgba(228,237,234,0.58)
克隆分隔器模塊 #1 並放置在第 3 和第 5 列中
克隆紫色 Divider Module 兩次並將其放置在第 3 列和第 5 列中。
克隆分隔器模塊 #2 並放置在第 4 列中
克隆綠色的 Divider Module 並將副本放在第 4 列中。
在平板電腦和手機上隱藏第 3、4 和 5 列中的分隔模塊
在平板電腦和手機上隱藏
在平板電腦和手機上隱藏第 3 列中的分隔器模塊。
複製可見性樣式
複製這些可見性樣式。
粘貼可見性樣式
並將它們粘貼到第 4 列和第 5 列的分隔模塊上，您就完成了！
預覽
現在我們已經完成了所有步驟，讓我們最後看看我們創建的三個不同的示例。
最後的想法
在這個用例博客文章中，我們向您展示瞭如何使用 Divi 的新列結構來創建令人驚嘆的部分過渡。 本教程是我們正在進行的 Divi 設計計劃的一部分，我們每週都會嘗試在您的設計工具箱中放入一些東西。 如果您有任何問題，請務必在下面的評論部分留言！