如何使用變換選項在 Divi 中設計獨特的分區分隔線背景

Divi 的內置分區分隔樣式一直是向頁面添加創意背景設計的流行（且簡單）方式。 它不僅提供了一種快速而美觀的方式來分解頁面內容，還可以添加抽象的背景紋理，使您的網站與眾不同。 隨著 Divi 轉換選項的發布，您可以使用這些部分分隔符做更多很酷的事情。

在本教程中，我將向您展示如何使用變換選項在 Divi 中設計獨特的部分分隔線背景。

讓我們開始吧。

搶先看

這是您將能夠在本教程中構建的設計的先睹為快。

免費下載節分隔線背景示例佈局

要了解這些示例部分分隔線背景，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。

現在讓我們進入教程吧？

入門

要開始學習本教程，您只需要 Divi 主題和用於示例內容的圖像。 我們將從頭開始構建設計。 您需要做的就是創建一個新頁面並在前端部署 Divi 構建器。 然後你就可以出發了。

使用分區分隔線創建抽象形狀背景

第一個示例是為您的內容創建一些抽象形狀背景的非常酷的方式。 基本上，這涉及使用分隔符自定義一個空白部分，並將該部分分隔符定位在頁面上其他內容後面的任何位置。

這是如何做到的。

創建內容部分

在開始向頁面添加分區分隔符之前，讓我們先添加一些示例內容。 用兩列行創建一個新的常規部分。

添加文本模塊

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

<h2>About Divi Meetups</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings</p>

然後更新設計如下：

文字文字大小：16px
文本行高：1.9em
標題 2 字體：Roboto
標題 2 字體粗細：輕
標題 2 文字大小：50 像素（桌面）、40 像素（平板電腦）、32 像素（手機）
標題 2 行高：1.4em

添加圖像模塊

接下來將圖像模塊添加到第 2 列並上傳要顯示的圖像。 在這個例子中，我使用了我們的一個佈局包中的一張 800 像素 x 1156 像素的圖像。

然後調整圖像的寬度和對齊方式如下：

寬度：80%（桌面），70%（平板電腦）
模塊對齊：左

向第 1 列添加填充

有了我們的文本和圖像，我們需要向第 1 列添加一些頂部填充以關閉我們的文本模塊。 打開行設置並更新以下內容：

第 1 列自定義填充（桌面）：頂部 250px
第 1 列自定義填充（平板電腦）：頂部 50px

添加帶有部分分隔線的頂部部分

此時，我們已準備好添加我們的第一個分區分隔器設計。 為此，我們需要創建一個新部分。 因此，繼續創建一個新的常規部分（不要向該部分添加列，因為我們不需要它）並將其拖動到包含我們的文本和圖像的部分上方。

然後通過更新以下內容來提供該部分和透明背景以及頂部分隔線：

背景顏色：rgba(0,0,0,0)
頂部分隔線樣式：見截圖
分隔線顏色：rgba(120,168,193,0.45)
分隔線高度：500 像素（桌面）、400 像素（平板電腦）、300 像素（手機）

接下來，轉到高級選項卡並將 Z 索引值設置為 1，以便它保持在其下方部分的上方。

然後更新section的大小和間距如下：

寬度：500px（桌面）、400px（平板）、320px（手機）
截面對齊：居中
自定義邊距：-100px
自定義填充：頂部 100 像素，底部 100 像素

請注意，寬度等於我們之前添加的分隔線的高度（台式機為 500 像素，平板電腦為 400 像素，手機為 320 像素）。 這將為我們的部分分隔器提供完美的方形設計。 縮小寬度和分隔線高度以針對平板電腦和手機進行調整也很重要，因為如果不這樣做，該部分將傾斜並破壞設計或導致瀏覽器視口溢出。

自定義填充只是為該部分提供一些高度，以便我們稍後不必調整變換轉換值。

現在我們已經有了我們的部分設計，我們可以使用變換選項在頁面上我們想要的任何位置定位和旋轉部分分隔線。

更新以下內容：

Transform Translate X 軸（桌面）：-100%
變換 平移 Y 軸（桌面）：200%

Transform Translate X 軸（平板電腦）：-50%
變換 平移 Y 軸（桌面）：100%

變換旋轉 Z 軸：-45deg

複製和粘貼部分

我們將在頁面上再添加一個分區分隔器設計。 但是要在設計上占得先機，請部署線框視圖模式並複制頂部部分（使用部分分隔線樣式）並將其粘貼到包含文本和圖像的部分下方。

更新部分設置

然後按如下方式更新自定義邊距：

自定義邊距：-100px 底部

接下來，我們可以使用變換比例選項縮小截面的大小，如下所示：

變換比例（X 和 Y 軸）：50%

使用變換翻譯，我們可以向上和向右移動部分，如下所示：

Transform Translate X 軸（桌面）：-20%
變換 平移 Y 軸（桌面）：-100%

Transform Translate X 軸（平板電腦）：80%

Transform Translate X 軸（平板電腦）：30%

現在旋轉該部分如下：

變換旋轉 Z 軸（桌面）：225deg

Transform 旋轉 Z 軸（平板電腦）：-225deg

最後結果

讓我們看看最終的結果。 請注意如何在平板電腦和手機上重新定位這些部分以獲得漂亮的設計。

以下是使用相同佈局的不同分隔線樣式的幾個示例。 隨意嘗試自己的不同風格和旋轉。

創建水平截面分隔線

Divi 的變換選項還允許我們旋轉截面分隔線以創建水平截面分隔線設計。 這可以為您的頁面內容提供獨特的背景。

這是如何做到的。

使用模擬內容複製部分

對於此示例，我們可以使用為上面的第一個示例創建的相同內容部分。 繼續複製並粘貼頁面底部的部分。

更新內容部分

接下來，打開復制部分的部分設置並更新以下內容：

自定義填充（桌面）：頂部 80 像素，底部 80 像素
自定義填充（平板電腦）：0px 頂部

創建水平截面分隔線

要創建水平部分分隔線，首先在內容部分正上方創建一個新的常規部分。

然後更新以下內容：

背景顏色：rgba(0,0,0,0)
頂部分隔線樣式：見截圖
頂部分隔線顏色：rgba(120,168,193,0.45)
頂部分隔線高度：80vw
頂部分隔線翻轉：垂直

為了確保我們可以看到其下方部分頂部的部分分隔符，我們需要將 Z 索引更新為 1。

接下來，我們需要為我們的部分提供自定義寬度和間距，如下所示：

寬度：800px
部分對齊方式：左
自定義邊距：-100px 頂部
自定義填充：頂部 100 像素，底部 100 像素

該部分的寬度（800px）將在它旋轉後成為該部分的高度以用作水平部分分隔線。 因此，您可能需要根據其下方部分中的內容量來調整此高度。

現在我們準備好使用變換選項來定位和旋轉截面，如下所示：

變換 平移 X 軸：-50%
變換 平移 Y 軸：250%

變換旋轉 Z 軸：-90 度

最後結果

這是設計的最終結果。

這裡還有一些使用相同佈局的不同分隔樣式的示例。

包起來

關於如何為您的網站添加獨特設計的更多想法總是有空間的。 借助 Divi 的變換選項和易於設計的部分分隔線，您可以做一些非常有創意的事情。 希望本教程中的示例能夠激發您創建一些分區分隔線背景，為您的下一個項目帶來全新的體驗。

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

乾杯!