Divi 插件亮點：Divi Mask

Divi Mask 是 Divi 的第三方插件，它為 Divi Builder 添加了一個新模塊，其中包含一些獨特的圖像和背景樣式。 它在圖像上放置一個蒙版，使圖像呈現蒙版的形狀。 遮罩外的所有顏色都可以是您想要的任何顏色，包括漸變甚至不同的背景。

它包括 54 個預設蒙版，用作剪裁，揭示其背後的圖像。 您還可以使用 SVG 添加您自己的。 它包括標題、內容和背景工具。 每個元素都可以調整和設置樣式。

在這個插件亮點中，我們將看看 Divi Mask，看看它可以做什麼，看看它是多麼容易使用。 您可以從開發者的網站購買 Divi Mask。

Divi 遮罩模塊

正常上傳並激活插件。 沒有什麼可設置的。 激活後即可使用。 Divi Mask 模塊已添加到 Divi Builder。

內容選項卡可讓您添加圖像、蒙版和文本。 其他調整允許您自定義圖像背景顏色、鏡像圖像和設置圖像不透明度。 您還可以添加鏈接和背景。 此圖顯示了遮罩設置中的遮罩選項卡。 我添加了來自電子競技佈局包的圖像。

這是遮罩設置中的遮罩選項卡。 它添加了一個下拉框，您可以在其中選擇 54 個內置遮罩或使用名為 Save SVG 的免費插件上傳您自己的自定義遮罩。

此選項卡還添加了填充模塊、在三個版本的遮罩之間進行選擇、縮放到您想要的大小、旋轉它以及調整水平和垂直位置的選項。 在這個例子中，我已經調整了它們中的每一個。 這是 Splodge 蒙版的選項 1。

這是啟用填充模塊的選項 1。 它伸展並填滿為模塊分配的空間。

這是 Splodge 蒙版的選項 2。 它創造了一些有趣的斑點圖案。

這是 Splodge 蒙版的選項 3。

蒙版設置的文本選項卡為標題和內容添加了區域，並為每個區域進行了獨立的自定義。

選擇標題標籤，調整背景顏色、背景寬度、水平和垂直位置以及旋轉。 文本調整在“設計”選項卡中處理。

內容區域添加了一個完整的編輯器，您可以在其中添加文本、圖像、媒體等。它還包括對顏色、寬度以及水平和垂直位置的背景調整。 這個不包括輪換。 文本的調整位於“設計”選項卡中。

設計選項卡包括標題、正文、大小、間距、邊框、框陰影、過濾器、變換​​和動畫的所有預期設置。

高級選項卡包括標題和文本的 CSS 區域。

Divi 蒙版示例

在本例中，我使用平行四邊形掩碼集來填充模塊。 我縮放了蒙版並調整了它的旋轉和對齊。 我還添加了與我在蒙版設置的圖像選項卡中使用的完全相同的圖像的背景和漸變。 遮罩顯示圖像的一部分，並允許背景圖像在背景中顯示出來。 稍後我將使用一個更明顯的。

對於這個，我添加了一個圓形蒙版。 我將標題放在帶有白色背景的圖像上。 我減少了背景的寬度和不透明度，並為文本添加了陰影效果。 我移動了圖片下方的內容並添加了一組可點擊的照片。 由於它使用內容編輯器，因此每個元素都可以有不同的 URL，與模塊的鏈接分開。 當然，如果我願意，我可以將內容放在圖像上。 這將是一個有趣的 CTA。

對於這個，我將背景更改為深色並將文本移動到與圖像重疊。 我增加了標題和內容文本的大小，並給了它們一個白色背景。 我從上一個示例中刪除了縮略圖，因此焦點將位於中心圖像上。

在這個例子中，我替換了 Travel Agency 佈局包中的中心圖像模塊，並在 Divi Mask 模塊中添加了相同的圖像。 我降低了圖像的不透明度，添加了標題文本，將其設置為垂直位置的 50%，更改了標題背景的顏色，並降低了不透明度。 這是創建指向頁面、項目、帖子或僅顯示信息的鏈接的簡單方法。

對於此示例，我將創建一個全角部分，並將添加一個將與部分分離混合的蒙版。 我添加了標題和內容文本，更改了它們的顏色和大小，使它們的背景透明，並將它們定位在圖像上我想要的位置。

我添加了一個三角形蒙版並選擇了選項 2。我已經將其放大並調整了水平設置。 我還為模塊添加了漸變背景。 可以鏡像相同的漸變並將其添加到下一部分，以便它們相互融合。

這是選項 3。它將蒙版翻轉到另一側。 我移動了水平位置以顯示更多圖像並調整標題和文本的垂直位置以與蒙版重疊。 文本自動重疊。

這個顯示了選項 1 上的箭頭遮罩。

這是箭頭選項 4。我把它放在一個較小的行中，以便更多的它會顯示在我的屏幕上。

這是使用默認設置和我的背景漸變的引導掩碼。

這是一個漂亮的蝴蝶面具。

這是心臟面具。 我更改了背景漸變以匹配心形主題。

現在，我添加了與背景相同的圖像，並將漸變設置為顯示在背景圖像上方。 這使它具有遮罩切掉部分漸變的效果。

當然，任何圖像都可以用作背景。 在本例中，我替換了背景圖像，以便遮罩的圖像顯示在它上面。 我還降低了背景的不透明度，這樣更多的東西會顯示出來，使效果更加突出。

對於這個，我旋轉了蒙版並將其向右移動。 我已經調整了背景的漸變不透明度。 它仍然顯示與蒙版圖像不同的背景圖像。 我還添加了內容文本並調整了文本大小以及內容的垂直位置和寬度。 這將創建一些有趣的 CTA 或信息簡介。

這個使用語音掩碼。 我已經調整了它的水平位置並將內容移動到它的中心。

這是邊框蒙版。 它創建了一個相框。 我已經將它居中，縮放以適應圖像，並將內容居中。

對於這個，我將比例設置回默認值並選擇了填充模塊。 邊界仍然存在，但它在查看區域之外。

對於這個，我調整了比例以顯示邊框。

這個使用菱形掩碼。 這是一個轉角的正方形。 我已將其放大並將其移至右側。 我已經將內容居中，並為內容提供了一個具有足夠透明度的背景，以便背景顯示出來。 我添加了一個標題並將其定位為在其側面顯示。 我還給它一個帶有一點透明度的背景。

Divi 面膜價格和文檔

Divi Mask 售價 12 美元，包括 6 個月的支持和終身更新。 它可以在無限的網站上使用。 您可以從開發者的網站購買 Divi Mask。

開發人員的網站還包括插件的詳細演練。 這顯示了基礎知識並包括如何使用 SVG 功能創建您自己的自定義蒙版。 該站點還包括一個簡短的常見問題解答，以指導您完成安裝過程。

結束的想法

我發現 Divi Mask 是一個有趣的模塊。 它非常直觀。 我從來不需要閱讀說明或觀看視頻，但很高興它們可以以防萬一。 我最喜歡使用它的方法是代替宣傳語，作為 CTA，鏈接到頁面或產品，或者只是為圖像添加一些設計樣式。

它是響應式的，但有可能創建響應不及您希望的設計。 這只是我在設計時要記住的事情。 當然，您也可以創建您的設計的平板電腦和移動版本，您可以使用 Divi Builder 中的各種視覺模式來測試設計。

我喜歡內置的 54 個面具。 它們提供了一些有趣的視覺效果，並且控件進一步擴展了這些視覺效果。 我也喜歡你可以使用 SVG 創建你自己的。 具有可以四處移動的背景的單獨標題和內容元素也很有趣。

Divi Mask 為圖像和文本開闢了許多設計可能性。 如果您有興趣在 Divi 中為圖像添加剪裁，Divi Mask 值得一看。

我們希望聽到您的意見。 您是否嘗試過 Divi 面膜？ 請在下面的評論中告訴我們您對此的看法。

精選圖片來自 Oleksandr Korchahin/shutterstock.com