如何在 Divi 中將背景蒙版與部分分隔線相結合

在 Divi 中將背景蒙版與部分分隔線相結合，為已經強大的背景設計選項庫增添了另一層創造力。 如果您對 Divi 的背景選項沒有太多經驗，那麼您肯定會錯過。 一個方便但功能強大的選項使您只需單擊幾下即可將背景蒙版添加到背景漸變（或圖像）中。 除了背景選項外，部分分隔線還使用戶能夠增強他們的背景設計。

在本教程中，我們將向您展示如何在 Divi 中將背景蒙版與部分分隔符結合起來。 我們將為您提供有關如何使用此技術完成 Divi 部分的背景設計的分步說明。 另外，我們甚至會介紹如何通過一些簡單的調整來創建一些替代設計。

享受！

搶先看

這是本教程中的設計的快速瀏覽。

這個概念

本教程的基本概念是結合背景蒙版和部分分隔線來創建更加獨特的蒙版形狀。

首先，我們添加一個背景蒙版。

然後我們添加部分分隔線以創造性的方式補充蒙版形狀。

免費下載佈局

要掌握本教程中的設計，您首先需要使用下面的按鈕下載它。 獲得
訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為一個新
訂閱者，您將在每週一收到更多 Divi 福利和免費的 Divi Layout 包！ 如果你已經在
列表，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

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

下載

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

要將部分佈局導入 Divi 庫，請執行以下操作：

1. 導航到 Divi 庫。
2. 單擊頁面頂部的導入按鈕。
3. 在可移植性彈出窗口中，選擇導入選項卡
4. 從您的計算機中選擇下載文件（確保先解壓縮文件並使用 JSON 文件）。
5. 然後點擊導入按鈕。

完成後，部分佈局將在 Divi Builder 中可用。

讓我們進入教程，好嗎？

你需要什麼開始

要開始，您需要執行以下操作：

1. 如果您還沒有，請安裝並激活 Divi 主題。
2. 在 WordPress 中創建一個新頁面，並使用 Divi Builder 在前端（可視化構建器）編輯頁面。
3. 選擇“從頭開始構建”選項。
4. 現在有一塊空白畫布可以開始在 Divi 中進行設計！

如何在 Divi 中組合背景蒙版和分隔線

1.添加截面尺寸和間距

首先，我們將為構建器中的現有部分添加大小和間距。 我們將推遲添加一行或任何內容，以便我們可以專注於該部分的背景設計

打開該部分的設置。 在設計選項卡下，更新大小和間距，如下所示：

• 最小高度：50vw
• 內邊距：0px 頂部，0px 底部

使用大眾長度單位表示高度可能看起來很奇怪。 然而，由於我們將使用 VW 長度單位來調整背景元素的大小，這將確保設計在不同的瀏覽器寬度上流暢地縮放。

2.創建背景漸變

一旦該部分具有一定的高度，我們就可以將背景漸變添加到該部分。 這將為我們提供一些背景顏色，以便我們稍後可以展示背景蒙版和分隔線組合。

在內容選項卡下，單擊背景選項下的背景漸變選項卡。 然後添加漸變如下：

• 顏色停止 1：#1a2a6c（20%）
• 顏色停止 2：#b21f1f（60%）
• 顏色停止 2：#fdbb2d（100%）

3.創建背景蒙版

現在我們有了顏色漸變，我們準備創建背景蒙版。

在背景蒙版選項卡下，更新以下內容：

• 面具：雪佛龍
• 面具顏色：#000
• 蒙版變換：反轉
• 遮罩縱橫比：見截圖

4.添加部分背景分隔線

一旦我們的蒙版就位，我們可以通過使用部分分隔線進一步修改蒙版形狀。 在此示例中，我們將在頂部和底部添加一個半圓形部分分隔線。 這將擠壓背景蒙版，使其看起來更像一個花哨的箭頭設計。

為此，請單擊設計選項卡並添加以下分隔線：

首先，在“頂部”選項卡下添加一個頂部分隔線。

• 分隔線樣式：見截圖
• 分隔線顏色：#000
• 分隔器高度：10vw

接下來，在底部選項卡下添加底部分隔線。

• 分隔線樣式：見截圖
• 分隔線顏色：#000
• 分隔器高度：10vw
• 分頻器翻轉：垂直翻轉

結果

這是迄今為止的結果。

調整背景選項和分隔線以獲得更多設計

現在您已經有了基本的想法，我們可以輕鬆地使用背景選項部分分隔線來創建更多設計。

替代設計#1

對於我們的第一個替代設計，我們將旋轉現有的背景蒙版並用三角形替換半圓形部分分隔線。

為此，請打開現有的部分設置，單擊背景蒙版選項卡，然後更新以下內容：

• 蒙版變換：垂直翻轉、旋轉
• 遮罩縱橫比：見截圖

接下來，更新 Section Dividers 如下：

頂部分隔線

• 分隔線樣式：見截圖
• 分隔器高度：13vw

底部分隔線

• 分隔線樣式：見截圖
• 分隔器高度：13vw
• 分頻器翻轉：禁用

結果

這是結果。

替代設計#2

對於我們的第二個也是最後一個替代設計，我們將用 Diagonal Bars 2 Mask 替換 Chevrons Mask，並為其添加一個新的頂部分隔線，為設計添加微妙的嗖嗖聲效果。

為此，請打開現有的部分設置，單擊背景蒙版選項卡，然後更新以下內容：

• 面具：對角線 2
• 蒙版變換：左右翻轉
• 遮罩縱橫比：見截圖

接下來，更新 Section Dividers 如下：

頂部分隔線

• 分隔線樣式：見截圖
• 分頻器翻轉：水平翻轉

底部分隔線

• 分隔線樣式：無

結果

這是結果。

最終結果

為了讓您更好地了解這些背景與某些內容的外觀，我添加了一個單列行，其中一個大標題位於該部分的中心。 我還為每個包含具有混合模式的圖像添加了一個額外的設計。

去看一下！

要探索用於內容和圖像的設置，請隨時下載本教程的免費佈局（見上文），其中包括每個設計。

最後的想法

為背景設計結合蒙版和部分分隔線為為這些內置蒙版創建獨特形狀開闢了更多可能性。 隨意探索不同的組合。 希望這對您自己的網站或下一個項目會派上用場。

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

乾杯!