下載並使用 6 個免費的 Divi 模塊分隔器

到目前為止，我們都已經習慣了 Divi 中包含的部分分隔符。 在過去的教程中，我們還向您展示瞭如何將這些部分分隔符應用於模塊和行。 但是如果你想使用只連接到模塊而不是其他設計元素的模塊分隔器，這篇文章適合你。 我們將分享 6 個免費的模塊分隔器，您可以將它們用於您構建的任何類型的 Divi 網站。 這些模塊分隔符將包含在一個插畫文件中，您可以在這篇文章中進一步下載該文件。 本教程還將幫助您創建自己的模塊分隔符。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們快速瀏覽一下您可以下載的 6 種不同的模塊分隔器，以及它們在不同屏幕尺寸上的外觀。

桌面

電話

免費下載模塊分隔線

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

下載文件

免費下載

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

下載

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

讓我們開始吧！

訂閱我們的 YouTube 頻道

在 Illustrator 中更改分隔線顏色

在下載的文件夾中打開 Illustrator 文件

在本教程的第一部分，我們將準備我們需要的模塊分隔器。 在下載文件夾中，您可以找到一種特定調色板的模塊分隔符。 但是，如果您想使用其他調色板，則需要使用可在下載文件夾中找到的 Illustrator 文件來創建所需的模塊分隔線。

選擇模塊分隔線樣式，解鎖圖層並啟用可見性

打開 illustrator 文件後，繼續並在圖層選項卡中選擇您選擇的分隔線。 解鎖圖層並啟用可見性選項，以便您可以立即開始使用。

單擊模塊分隔符並更改顏色

現在，根據您要為其創建分隔器的模塊數量，您需要的模塊分隔器數量可能會有所不同。 例如，要重新創建我們在文章開頭向您展示的示例，我們需要四種不同顏色的模塊分隔器。 從第一個開始，將分隔線顏色更改為白色。

• 分隔線顏色：#ffffff

為 Web 導出 PNG 模塊分隔線

更改顏色後，您可以繼續將圖像模塊保存為 Web 的 PNG 圖像文件。

對所需的每種顏色重複步驟 (x4)

如前所述，您將需要各種模塊分隔器。 對每種顏色重複前面的步驟。

• 顏色 1：#ffffff
• 顏色 2：#2759f6
• 顏色 3：#97adf4
• 顏色 4：#b2ceff

創建分區設計

後端預覽

保存所有模塊分隔符後，就可以切換到 Divi 了！ 我們創建的最終結果在後端將如下所示：

添加新部分

添加新頁面或打開現有頁面並向其添加常規部分。

添加新行

列結構

繼續使用以下列結構添加新行：

漿紗

在不添加任何模塊的情況下，打開行設置並對大小設置進行一些更改。

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

將圖像模塊添加到第 1 列

上傳白色模塊分隔線

在第 1 列中，我們需要的第一個模塊是圖像模塊。 上傳您可以在下載文件夾中找到的第一個模塊分隔符，或者選擇您已修改為您自己的調色板的那個。

背景顏色

然後，為圖像模塊添加背景顏色。 此顏色需要與接下來出現的任何模塊的背景顏色相匹配。

• 背景顏色：#2759f6

漿紗

然後，轉到大小設置並啟用“強制全角”選項。

• 強制全角：是

將 Blurb 模塊添加到第 2 列

添加內容

我們在第 1 列中需要的第二個模塊是 Blurb 模塊。 首先添加一些選擇的內容。

選擇圖標

然後，選擇一個選擇的圖標。

背景顏色

繼續添加用於模塊分隔器圖像模塊的相同背景顏色。

• 背景顏色：#2759f6

圖標設置

接下來，轉到圖標設置並進行一些更改。

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

文字設置

還要修改文本設置。

• 文字方向：居中
• 文字顏色：淺

標題文字設置

也更改標題文本的外觀。

• 標題字體粗細：超粗
• 標題字體樣式：大寫

間距

並使用自定義填充為模塊創建一些空間。

• 頂部填充：50px
• 底部填充：50px
• 左填充：50px
• 右填充：50px

克隆圖像模塊 3 次和模糊模塊兩次

完成修改第一個圖像模塊（包含模塊分隔器）和 Blurb 模塊後，您可以繼續克隆 Image Module 3 次和 Blurb Module 兩次。 這將在後端給出以下結果：

按正確順序放置重複項

更改重複項的順序以確保從圖像模塊開始，然後是模糊模塊，如下所示：

更改模糊模塊重複項的背景顏色

然後，更改 Blurb 模塊的背景顏色。

• 模糊模塊 #2：#97adf4
• 模糊模塊 #3：#b2ceff

更改圖像模塊中的模塊分隔線

打開第一個重複的圖像模塊並上傳您創建的第二個模塊分隔符（或選擇一個可以在下載文件夾中找到的分隔符）。

更改模塊分隔線圖像模塊背景顏色（與下一個模糊模塊的背景顏色匹配）

上傳新的模塊分隔符後，您還需要更改該圖像模塊的背景顏色。 確保您將此顏色與接下來的 Blurb 模塊的背景顏色相匹配。

• 模塊分隔符 #2：#2759f6

對剩餘的兩個分頻器模塊重複步驟

對列中剩餘的兩個模塊分隔器重複前面的步驟，您就完成了！

• 模塊分隔線 #3 背景顏色：#97adf4
• 模塊分隔線 #4 背景顏色：#b2ceff

預覽

現在我們已經完成了所有步驟，讓我們最後看看您可以在本文開頭下載的 6 種不同的模塊分隔器！

桌面

電話

最後的想法

在這篇文章中，我們分享了 6 個免費的模塊分隔器，您可以將它們用於您正在構建的任何類型的網站。 這些模塊分隔器可以幫助您創建更有趣的設計並創建獨特而有趣的模塊。 如果您有任何問題或建議，請務必在下方評論區留言！