如何使用 Divi 的背景蒙版和圖案變換設置

背景圖案是給您的網站一些視覺風格並在人群中脫穎而出的好方法。 Divi 的新背景蒙版和圖案變換設置可以通過多種方式組合以創建這些背景圖案。 在這篇文章中，我們將看到如何使用 Divi 的背景蒙版和圖案變換設置為您的 Divi 佈局創建一些有趣的背景。

讓我們開始吧。

預習

首先，這裡看一下每個示例，其中包含桌面、電話和每個示例的替代選項。

示例一結果

普通版桌面

普通版手機

替代版本桌面

替代版本電話

示例二結果

普通版桌面

普通版手機

替代版本桌面

替代版本電話

示例三結果

普通版桌面

普通版手機

替代版本桌面

替代版本電話

Divi 背景蒙版和圖案變換選項

Divi 的新背景蒙版和圖案功能包括幾個調整它們的選項。 調整包括水平和垂直翻轉、旋轉和反轉。 要查看選項，請轉到部分或行的背景設置，然後選擇背景圖案或背景蒙版選項卡。

添加圖案或蒙版後，將出現變換設置。 只需單擊您要使用的選項。 我們可以一起使用它們，並以我們想要的任何組合使用它們。

Divi 的蒙版和圖案變換設置如何工作

下面的模式是默認設置的鋸齒形。

我在下圖中添加了一個圖層博客蒙版。 讓我們用這些來演示背景蒙版和圖案變換設置是如何工作的。

水平翻轉

這是水平翻轉。 我已將變換設置應用於圖案和蒙版。

垂直翻轉

這是圖案和蒙版的垂直翻轉。

旋轉

這個顯示了圖案和蒙版的旋轉。

反相

此示例顯示圖案和蒙版的反轉。

背景蒙版和圖案變換組合

當然，我們也可以使用各種組合的變換設置。 這裡有一些例子。

這個旋轉圖案並反轉蒙版。

此示例使用垂直翻轉、旋轉和反轉作為背景圖案。 背景蒙版使用水平翻轉、垂直翻轉和旋轉。

對於這個例子，我使用了水平翻轉和旋轉作為背景圖案，垂直翻轉和旋轉作為背景蒙版。

背景蒙版和圖案變換設置示例

接下來，讓我們看看這些設置如何與 Divi 佈局一起使用。 我們將使用一個部分作為我們的起點並創建三個示例。 我們將為它設置樣式，然後使用轉換設置為每個示例更改它。

對於我的示例，我使用的是 Divi 中提供的 Estate Planning 登錄頁面中英雄部分的修改版本。 這是我的部分。 修改簡化了英雄部分以滿足我們的需要。 它使用背景顏色背景：#92a5ab。

• 背景：#92a5ab

背景蒙版和圖案變換設置示例一

我們的第一個示例為我們提供了一個垂直位於屏幕中心的拱門。 屏幕的一側有簇絨圖案。 然後，我們將創建一個替代版本，其中拱門朝向另一個方向。

背景圖案

打開部分設置，向下滾動到背景，然後選擇背景圖案選項卡。 為背景圖案選擇簇絨，為圖案變換選擇反轉。

• 背景圖案：簇絨
• 模式變換：反轉

背景蒙版

選擇背景蒙版選項卡並為背景蒙版選擇拱形。 將蒙版顏色更改為#616d72，並將蒙版變換設置為反轉。 這完成了我們第一個帶有簇絨的拱門版本。

• 背景蒙版：拱門
• 顏色：#616d72
• 蒙版變換：反轉

示例一變體

接下來，讓我們創建設計的變體。 只需將背景圖案的蒙版變換更改為水平翻轉和垂直翻轉。 這會將拱形改變為面向另一個方向並改變圖案，因此它看起來不僅僅是鏡像。

• 蒙版變換：水平翻轉、垂直翻轉

背景蒙版和圖案變換設置示例二

對於我們的第二個示例，我們將在屏幕中央創建一個橢圓形，橢圓形內部有一個圖案。 然後，我們將更改圖案的位置。 我們還將針對不同的屏幕尺寸對此進行修改。

背景圖案

在背景設置中，選擇背景圖案選項卡，然後選擇 Shippo 作為圖案。 將圖案變換設置為反轉。

• 背景圖案：七寶
• 模式變換：反轉

背景蒙版

接下來，選擇背景蒙版選項卡。 選擇 Eclipse 作為背景蒙版並將鼠標懸停在背景選項上。 選擇出現的平板電腦圖標。 這將打開設備設置。 對於桌面設置，將顏色設置為 #758489。 對於遮罩變換，選擇水平翻轉和旋轉。 這樣就完成了桌面版本。 讓我們為移動版本更改它。

• 背景蒙版：Eclipse
• 顏色：#758489
• 蒙版變換：水平翻轉、旋轉

平板電腦和手機

平板電腦和手機都將使用相同的設置，因此我們只需要更改平板電腦設置。 選擇Tablet 選項卡並將Mask Transform更改為 Horizo​​ntal Flipping。

• 蒙版變換：水平翻轉、反轉

示例二變體

接下來，我們將為第二個示例創建變體。 首先，選擇背景圖案選項卡並將圖案顏色設置為 rgba(0,0,0,0.06)。

• 圖案顏色：rgba(0,0,0,0.06)

接下來，選擇背景蒙版選項卡並為蒙版變換選擇水平翻轉、旋轉和反轉。

• 蒙版變換：水平翻轉、旋轉、反轉

平板電腦和手機

對於平板電腦和手機選項，請選擇平板電腦圖標。 將蒙版變換更改為水平翻轉和反轉。 示例二的替代版本現已完成。

• 蒙版變換：水平翻轉、反轉

背景蒙版和圖案變換設置示例三

對於我們的第三個蒙版和圖案變換設置示例，我們將使用帶有油漆蒙版的蜂窩圖案。 我們還將為此創建一個移動版本。

背景圖案

首先，選擇設備設置選項卡並選擇桌面圖標。 選擇背景圖案選項卡並選擇蜂窩作為背景圖案。 將顏色更改為 rgba(0,0,0,0.42)。 對於這個，我們將禁用模式轉換選項。 我們將為備用版本添加它們。

• 背景圖案：蜂窩
• 圖案顏色：rgba(0,0,0,0.42)
• 模式變換：無

背景蒙版

接下來，選擇背景蒙版選項卡。 為背景蒙版選擇繪畫。 將顏色更改為#697b82。 為蒙版變換選擇垂直翻轉。

• 背景蒙版：油漆
• 顏色：#697b82
• 蒙版變換：垂直翻轉

接下來，為尺寸選擇封面。 這會打開更多選項。 選擇位置的右下角。 桌面版就是這樣。 接下來，我們將創建移動版本。

• 尺寸：封面
• 位置：右下

平板電腦和手機

接下來，選擇數位板選項卡並將背景蒙版變換更改為垂直翻轉和旋轉。 這完成了我們第三個示例的樣式。 接下來，我們將創建備用版本。

• 背景蒙版變換：垂直翻轉、旋轉

示例三變化

對於本示例的替代版本，我們將同時調整背景圖案和背景蒙版。

背景圖案

對於背景圖案，將圖案顏色更改為 rgba(0,0,0,0.11)。 將圖案變換更改為水平翻轉、垂直翻轉和旋轉。

• 圖案顏色：rgba(0,0,0,0.11)
• 圖案變換：水平翻轉、垂直翻轉、旋轉

背景蒙版

接下來，選擇背景蒙版選項卡。 將顏色更改為白色，將蒙版變換更改為水平翻轉、垂直翻轉和反轉。

• 顏色：#ffffff
• 蒙版變換：水平翻轉、垂直翻轉、反轉

接下來，將遮罩尺寸更改為覆蓋，然後為遮罩位置選擇中心。

• 面罩尺寸：封面
• 面罩位置：中心

平板電腦和手機

最後，選​​擇平板電腦選項卡以創建移動版本。 選擇背景蒙版選項卡並選擇蒙版變換的所有四個選項。 這完成了第三個示例的替代版本。

• 背景蒙版變換：水平翻轉、垂直翻轉、旋轉、反轉

結果

以下是每個示例的桌面、電話和替代選項。

示例一結果

普通版桌面

普通版手機

替代版本桌面

替代版本電話

示例二結果

普通版桌面

普通版手機

替代版本桌面

替代版本電話

示例三結果

普通版桌面

普通版手機

替代版本桌面

替代版本電話

結束的想法

這就是我們對如何使用 Divi 的背景蒙版和圖案變換設置來創建許多有趣的背景設計的看法。 由於圖案和蒙版可以一起使用，它們的變換設置也可以一起使用。 這會打開許多設計選項，為您提供更多工具來為您的 Divi 背景增添優雅。 學習使用它們的最好方法是玩弄調整，看看你能創造什麼。

我們希望收到你的來信。 您是否在 Divi 佈局中嘗試過 Divi 的背景蒙版和圖案變換設置？ 在評論中讓我們知道。