使用分隔模塊通過 Divi 的變換選項創建背景形狀

每週，我們都會為您提供新的免費 Divi 佈局包，您可以將其用於下一個項目。 對於其中一個佈局包，我們還分享了一個用例，可幫助您將網站提升到一個新的水平。

本週，作為我們正在進行的 Divi 設計計劃的一部分，我們將向您展示如何使用分隔模塊通過 Divi 的變換選項和律師助理佈局包創建背景形狀。 分隔線模塊用途廣泛，可以真正提升頁面的整體設計。 儘管我們將重新創建一些與律師助理佈局包特別匹配的示例，但您可以將此技術用於使用 Divi 構建的任何類型的網站。

讓我們開始吧！

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

使用 Paralegal Layout Pack 的登陸頁面創建新頁面

創建一個新頁面並將律師助理佈局包的登錄頁面上傳到該頁面。

重新創建示例 #1

部分溢出

讓我們開始創建第一個示例！ 繼續並打開英雄部分設置並轉到設計選項卡。 在這裡，我們要確保沒有任何內容超出部分容器。 為此，我們將向主元素添加一行 CSS 代碼。

overflow: hidden;

將分隔模塊添加到第 2 列

能見度

然後，繼續將分隔模塊添加到專業部分的第二列。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

背景顏色

我們將使用佈局包調色板中的一種顏色作為分隔線的背景顏色。

• 背景顏色：#d94144

顏色

然後，我們將轉到設計選項卡並更改分隔線的顏色。

• 顏色：#f3f1f2

樣式

轉到樣式設置並修改分隔線樣式。

• 分隔線樣式：虛線

漿紗

也可以調整大小設置。 您可以按照自己的意願設置此分隔模塊的外觀，但如果您希望它看起來與本文預覽中顯示的完全一樣，請使用以下設置：

• 分隔線重量：4px
• 高度：0px

間距

現在，我們將使用一些自定義邊距和填充值來更改分隔線模塊的位置和大小。 確保根據不同的屏幕尺寸修改值，以便一切保持響應。

• 最高邊距：-30vw（台式機），-100vw（平板電腦和手機）
• 左邊距：-100vw（桌面）、-138vw（平板）、-300vw（手機）
• 頂部填充：0px
• 底部填充：1.3vw（台式機）、2.2vw（平板電腦）、3vw（手機）

轉變

變換比例

是時候改造模塊了！ 我們將在變換設置中做的第一件事是通過添加以下變換比例值來增加分隔線大小：

• 底部：153%
• 正確：500%

變換旋轉

我們還將在變換旋轉設置中旋轉分隔線模塊。 正如您所注意到的，由於我們在本教程開頭添加的一行 CSS 代碼，分隔器模塊並沒有超過本節。

• 左：348度

重新創建示例 #2

部分溢出

繼續下一個例子！ 同樣，我們希望通過向部分的主要元素添加一行 CSS 代碼來確保沒有任何內容超出部分容器。

overflow: hidden;

將新行添加到節的末尾

列結構

繼續使用以下列結構在該部分的末尾添加一個新行：

間距

為了減小行佔用的大小，我們將刪除間距設置中的默認頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

添加分頻器模塊

能見度

是時候添加和設置分隔模塊的樣式了！ 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

背景顏色

我們再次使用佈局包調色板中的一種顏色作為背景顏色。

• 背景顏色：#d94144

顏色

轉到設計選項卡並更改分隔線顏色。

• 顏色：#f3f1f2

漿紗

我們也在調整大小設置。

• 分隔線重量：10px
• 高度：0px

間距

我們將使用一些自定義填充創建我們想要的確切形狀，我們將在不同的屏幕尺寸上修改這些填充。

• 頂部填充：2vw
• 底部填充：2.5vw（台式機）、3vw（平板電腦）、3.9vw（手機）

轉變

變換比例

是時候轉型了！ 我們要做的第一件事是縮放 Divider 模塊。 我們這樣做是為了確保該部分的開頭或結尾沒有間隙。 不要擔心過度縮放您的分頻器模塊，超出部分的所有內容都不會出現在您的設計中。

• 底部：153%
• 右：153%（桌面）、250%（平板電腦）、500%（手機）

轉換 翻譯

然後，我們還將更改分隔模塊的位置，使其顯示在右側。 確保將這些值與不同的屏幕尺寸相匹配。

• 底部：25vw（台式機），27vw（平板電腦和手機）
• 右：0px（桌面），-32vw（平板和手機）

變換旋轉

最後但並非最不重要的一點是，我們將通過變換旋轉設置將水平分隔線變成垂直分隔線。

• 左：270度

重新創建示例 #3

部分溢出

繼續下一個也是最後一個例子！ 同樣，通過向部分的主要元素添加一行 CSS 代碼，確保沒有任何內容超出部分容器。

overflow: hidden;

在節的開頭添加新行

列結構

繼續在該部分的頂部添加一個新行。 將行放在頂部很重要，這樣它就不會在教程後面與下面的內容重疊。

漿紗

在不添加任何模塊的情況下，打開行設置並允許列佔據屏幕的整個寬度。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

添加分頻器模塊

能見度

接下來添加您的分頻器模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

背景顏色

轉到背景設置並添加您選擇的背景顏色。

• 背景顏色：#d94144

顏色

還要修改分隔線顏色。

• 顏色：#f3f1f2

樣式

並在樣式設置中更改分隔線樣式。

• 分隔線樣式：虛線

漿紗

然後，轉到大小設置並進行一些更改。

• 分隔線重量：4px
• 高度：0px

間距

並在間距設置中使用一些頂部和底部填充創建您想要的形狀。

• 頂部填充：3vw
• 底部填充：3vw

盒子陰影

我們還將通過給分隔線一個微妙的框陰影來為我們的頁面添加一些深度。

• 框陰影模糊強度：80px
• 陰影顏色：rgba(0,0,0,0.3)

轉變

變換比例

現在我們已經為分隔線設置了樣式，我們可以開始改造它。 我們要做的第一件事是在變換比例設置中增加分隔模塊的大小。

• 底部：140%
• 正確：140%

轉換 翻譯

然後，我們將轉到變換轉換設置並更改分隔器模塊的位置。 將這一行放置在該部分的頂部有助於我們保持比其下方的行更低的 z-index，從而創造出這種美麗的重疊！

• 底部：4vw
• 右：16vw（桌面）、26vw（平板電腦）、35vw（手機）

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divider 模塊和 Divi 的新變換選項來創建背景形狀並增強頁面的整體外觀。 本教程是我們正在進行的 Divi 設計計劃的一部分，我們每週都會嘗試在您的設計工具箱中添加一些額外的東西。 如果您有任何問題或建議，請務必在下方評論區留言！