如何使用 Divi 的新設計功能創建漂亮的截面過渡

在這個 Divi 教程中，我們將向您展示如何使用內置的 Divi 選項創建漂亮的部分過渡。

版塊是您在網站上共享的所有內容的基礎。 每個部分都是一章，從一個部分到另一個部分是講故事過程的一部分。 使這種過渡盡可能順利將強調您試圖表達的信息。 為了幫助您，我們將向您展示如何為您的下一個網站項目創建漂亮的部分過渡。

搶先看

在單獨深入研究所有不同的部分轉換之前，讓我們先看看您可以期待什麼：

如何使用 Divi 的新設計功能創建漂亮的截面過渡

訂閱我們的 YouTube 頻道

重新創建部分

我們將首先重新創建我們將在所有示例中使用的兩個部分。 在這兩部分中，我們使用了所需的填充來充分利用過渡。 但是，如果您使用不同高度的部分，則可能需要稍微調整用於完美匹配部分的漸變背景。

創建第一部分

首先創建第一個標準部分並選擇一個全角行。

部分設置

我們將需要“300px”的頂部和底部填充，您可以將其添加到“設計”選項卡的“間距”子類別中。

第一個文本模塊

然後，我們將向全角行添加一個文本模塊。 鍵入要顯示的文本，然後轉到“設計”選項卡。 在“設計”選項卡中，對“文本”子類別使用以下設置：

• 文字字體：Comfortaa
• 文字字體大小：50
• 文本行高：1.7em
• 文字方向：居中

第二個文本模塊

對第二個文本模塊執行相同操作，但使用以下設置：

• 文字字體：Comfortaa
• 文字字體大小：16
• 文本行高：1.7em
• 文字方向：居中

按鈕模塊

最後，我們還將添加一個按鈕模塊。 首先在“設計”選項卡中選擇居中對齊。

然後，打開按鈕子類別，啟用“為按鈕使用自定義樣式”選項並選擇“20”作為按鈕文本大小。

仍在按鈕子類別中時，為按鈕使用以下漸變背景：

• 第一種顏色：#2b87da
• 第二種顏色：#29c4a9
• 漸變類型：線性
• 漸變方向：162度
• 起始位置：0%
• 結束位置：100%

創建第二部分

添加另一個標準部分，但選擇一個三列行。

部分設置

第二部分也將在頂部和底部使用“300px”填充。

模糊模塊

接下來，我們將向行的第一列添加一個 Blurb 模塊。 確定要顯示的文本後，向下滾動“內容”選項卡，啟用“使用圖標”選項並選擇一個圖標。

完成後，轉到“設計”選項卡並為“圖標子類別”使用以下設置：

• 圖標顏色：#515151
• 圖像/圖標放置：頂部
• 使用圖標字體大小：是
• 圖標字體大小：55px

然後，確保以下設置適用於標題文本子類別：

• 標題字體：Comfortaa
• 標題文本對齊方式：居中
• 標題字體大小：18

最後，這些是正文子類別的設置：

• 正文字體：Comfortaa
• 正文對齊方式：居中
• 正文字體大小：14
• 車身線高：1.7em

克隆模糊模塊

創建 Blurb 模塊後，將其克隆兩次並將其放在該行的其他兩列中。

1. 一路對角線

現在我們已經創建了部分，是時候開始添加部分過渡了。 我們將向您展示如何創建由簡單的對角線組成的第一個示例。

第一部分漸變背景設置

打開第一部分的設置，添加如下漸變背景：

• 第一種顏色：#dddddd
• 第二種顏色：#f7f7f7
• 漸變類型：線性
• 梯度方向：183deg
• 起始位置：85%
• 結束位置：70.05%

第二節漸變背景設置

第二部分將需要以下漸變背景設置：

• 第一種顏色：#f7f7f7
• 第二種顏色：#dddddd
• 漸變類型：線性
• 梯度方向：183deg
• 起始位置：85%
• 結束位置：69.05%

刪除第二部分的頂部填充

對於此示例，您需要做的最後一件事是刪除第二部分的頂部填充。

2. 中途見我

我們要分享的下一個示例是一個非常優雅的示例，其中使用了兩個相反的漸變背景。 通過使用這種效果，各個部分感覺就像是在互相跟進。

第一部分漸變背景設置

對於第一部分，我們將需要以下漸變背景設置：

• 第一種顏色：rgba(255,255,255,0)
• 第二種顏色：rgba(224,43,32,0.07)
• 漸變類型：徑向
• 徑向：左上角
• 起始位置：60%
• 結束位置：50%

第二節漸變背景設置

第二部分將享受以下漸變背景：

• 第一種顏色：rgba(255,255,255,0)
• 第二種顏色：rgba(224,43,32,0.33)
• 漸變類型：徑向
• 徑向：右下
• 起始位置：58%
• 結束位置：50%

3.融合

下一個示例與其他示例略有不同。 兩個部分之間需要一個額外的部分才能實現您在下圖中註意到的結果。

第一部分漸變背景設置

對於第一部分，您將需要以下漸變背景：

• 第一種顏色：rgba(12,113,195,0.19)
• 第二種顏色：rgba(255,255,255,0.39)
• 漸變類型：徑向
• 徑向：左下
• 起始位置：50%
• 結束位置：50%

第二節漸變背景設置

對於第二部分，我們將使用以下漸變背景設置：

• 第一種顏色：rgba(224,43,32,0.17)
• 第二種顏色：rgba(255,255,255,0.39)
• 漸變類型：徑向
• 徑向：右上
• 起始位置：50%
• 結束位置：50%

在中間添加新的標準部分

將漸變背景添加到兩個部分後，就該在它們之間添加一個部分了。

將漸變背景顏色添加到新部分

該新部分也需要漸變背景，使用以下設置：

• 第一種顏色：rgba(12,113,195,0.19)
• 第二種顏色：rgba(224,43,32,0.17)
• 漸變類型：線性
• 梯度方向：92度
• 起始位置：43%
• 結束位置：62%

4. 逆

然後，我們還有一個部分過渡，它不像其他部分那樣引人注目，但仍然設法為您的部分添加微妙的觸感。

第一部分漸變背景設置

第一部分的漸變背景如下：

• 第一種顏色：#f2f2f2
• 第二種顏色：rgba(104,153,193,0.58)
• 漸變類型：徑向
• 徑向：右下
• 起始位置：7.9%
• 最終位置：7.9%

第二節漸變背景設置

而第二個漸變背景將需要以下漸變背景設置：

• 第一種顏色：rgba(104,153,193,0.58)
• 第二種顏色：#f2f2f2
• 漸變類型：徑向
• 徑向：右上
• 起始位置：8%
• 結束位置：8%

5. 指針

第五個示例看起來比其他示例更簡潔和簡約。 您可以通過查看指針或圓圈（或兩者）以兩種方式感知過渡。

第一部分漸變背景設置

第一部分使用以下漸變背景：

• 第一種顏色：#f4f4f4
• 第二種顏色：#ffffff
• 漸變類型：徑向
• 徑向：頂部
• 起始位置：88%
• 結束位置：88.05%

第二節漸變背景設置

最後，將以下漸變背景設置應用於第二部分：

• 第一種顏色：rgba(43,135,218,0)
• 第二種顏色：rgba(12,113,195,0.43)
• 漸變類型：徑向
• 徑向：底部
• 起始位置：87%
• 結束位置：87%

6.拼圖

最後一個例子絕對讓這些部分感覺好像它們屬於一起。

第一部分漸變背景設置

打開第一部分的設置，使用如下漸變背景：

• 第一種顏色：rgba(160,181,193,0.46)
• 第二種顏色：rgba(255,255,255,0)
• 漸變類型：徑向
• 徑向：頂部
• 起始位置：56.3%
• 最終位置：43%

第二節漸變背景設置

然後，對第二部分使用以下漸變背景設置：

• 第一種顏色：rgba(242,242,242,0)
• 第二種顏色：rgba(160,181,193,0.46)
• 漸變類型：徑向
• 徑向：頂部
• 起始位置：56%
• 結束位置：40%

更改第一部分的填充

為了使兩個部分更好地適應，我們將第一部分的頂部和底部填充更改為“150px”。

刪除第二部分的頂部填充

最後，我們還將刪除第二部分的頂部填充。

最後的想法

部分過渡有助於連接不同的部分及其目的。 在這篇文章中，我們分享了 6 個示例，您只需使用 Divi 內置選項即可重新創建這些示例。 如果您有任何問題或建議； 隨時在下面的評論部分發表評論！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！

NikVector/shutterstock.com 的特色圖片