5 個背景蒙版和圖案疊加層，您可以將其應用於背景圖像
已發表: 2022-08-08借助 Divi 最新發布的背景蒙版和背景圖案功能，您可以為您的網站創建一些獨特的英雄版塊。 英雄部分是您網站的第一部分，是訪問者在滾動瀏覽您的網站之前首先看到的內容，因此引人注目很重要！ 結合 Divi 的背景圖像、背景蒙版和背景圖案選項，我們可以創建引人注目的英雄部分，從而為您的網站留下良好的第一印象。
這篇文章將向您展示如何創建五個獨特的背景蒙版和圖案疊加層，您可以將它們應用於背景圖像以創建真正令人驚嘆的英雄部分。 本教程將介紹創建每個英雄部分所需的基本步驟，並為您提供在幾分鐘內為您的網站創建引人注目的英雄部分所需的工具。
在此示例中，我們將使用在線課程佈局包中的免費照片。 要使用相同的圖像，請一直滾動到這篇文章的底部以下載全分辨率圖像。
讓我們開始吧！
我們創造什麼
這是我們今天將在這篇文章中創建的五個英雄部分的快速瀏覽。
這些設計微妙，簡單，但有影響力。
免費下載佈局
如果您想從本教程下載預先設計的佈局設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂閱者，您將在每週一收到更多 Divi 福利和免費的 Divi Layout 包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送終極 Divi 登陸頁面佈局包的副本，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將立即成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載以訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
如何下載和使用佈局
要將部分佈局導入 Divi 庫，請執行以下操作：
- 導航到 Divi 庫。
- 單擊頁面頂部的導入按鈕。
- 在可移植性彈出窗口中，選擇導入選項卡。
- 從您的計算機中選擇下載文件（確保先解壓縮文件並使用 JSON 文件）。
- 然後單擊導入按鈕。
成功導入佈局後，它們將顯示在您的 Divi 庫中，並可在 Divi Builder 中使用。
現在，讓我們進入教程！
你需要什麼開始
在我們開始之前，您需要：
- 安裝並激活 Divi 主題。
- 創建一個新頁面，發布它，然後單擊“Use The Divi Builder”按鈕，在前端使用 Visual Builder 編輯頁面。
- 選擇“從頭開始構建”選項。
現在我們有一個空白畫布可以開始設計了！
如何創建 5 個背景蒙版和圖案疊加層以應用於背景圖像
首先，讓我們創建英雄部分
我們所有的設計示例都使用相同的部分、行和列結構，所以現在讓我們設置它們。
1.創建佈局結構
在頁面中添加一行，然後單擊綠色的“+”圖標以調出列結構並選擇第一列，即一個全角列。
2.添加節距
現在我們已經設置了行和列，是時候為該部分添加間距了。
在間距選項卡下，更新以下內容：
- 桌面：頂部 400 像素，底部 400 像素
- 平板電腦：頂部 200 像素，底部 200 像素； 左右 25px
- 電話：50px 頂部和 50px 底部； 左右 25px
如何設計英雄部分#1
讓我們設計第一個英雄部分。
1.添加標題文本
單擊灰色的“+”圖標以調出模塊庫。 滾動到文本並單擊以加載。
輸入標題文本，然後在標題文本選項卡下，配置以下設置：
- 字體系列：Work Sans
- 字體顏色：白色#ffffff
- 字體大小：
- 桌面：3rem
- 平板電腦：2.2rem
- 電話：1.4rem
2.添加按鍵模塊
添加一個按鈕並配置這些設置：
- 在文本選項卡類型下：了解更多
- 在對齊選項卡下選擇：居中
- 單擊使用自定義樣式，然後配置：
- 按鈕文字大小：
- 桌面：20px
- 平板電腦：16px
- 電話：14px
- 按鈕文字顏色：白色#ffffff
- 按鈕背景顏色：黑色#1d1d1d
- 按鈕邊框寬度：0
- 按鈕邊框半徑：0
- 按鈕字母間距：3pt
- 按鈕字體：Work Sans
- 按鈕字體樣式：大寫
- 按鈕文字大小：
3.添加背景圖片
現在我們已經設置了內容，是時候開始設計部分背景了。
- 導航到背景切換並單擊第三個選項卡，圖片選項卡，然後單擊“添加背景圖像”。
- 這將打開您的媒體庫，您可以在其中選擇一張照片或上傳一張新照片。
- 選擇照片後，單擊右下角的“上傳圖像”按鈕。
4.添加背景圖案
現在我們已經設置了背景圖像，讓我們添加一個圖案。
- 在“背景”選項卡中，導航到第 5 個選項卡，即“圖案”選項卡，然後單擊“添加背景圖案”。
- 從下拉菜單中選擇簇絨並配置以下設置：
- 圖案顏色 - rgba(255,255,255,0.31)
- 模式變換：無
- 圖案尺寸：實際尺寸
- 圖案重複原點：左上角
- 模式重複：重複
- 混合模式：正常
5.添加背景蒙版
現在我們已經設置了背景圖像和圖案，讓我們添加一個背景蒙版。
- 在“背景”選項卡中，導航到第 6 個選項卡，即蒙版選項卡，然後單擊“添加背景蒙版”。
- 從下拉菜單中選擇 Bean 並配置以下設置：
- 蒙版顏色：rgba(0,0,0,0.36)
- 蒙版縱橫比：水平矩形
- 面罩尺寸：拉伸填充
瞧！ 現在你有一個設計精美的英雄部分。
如何設計英雄部分#2
現在，讓我們設計第二個英雄部分。
1.添加背景圖像並將混合模式設置為疊加
選擇您的背景圖像，將混合模式設置為疊加，並添加 rgba(10,10,10,0.64) 的疊加顏色。
2.添加背景圖案
現在我們已經設置了背景圖像，讓我們添加背景圖案。
- 在“背景”選項卡中，導航到第 5 個選項卡，即“圖案”選項卡，然後單擊“添加背景圖案”。
- 從下拉列表中選擇簇絨並配置以下設置：
- 圖案顏色 - rgba(255,255,255,0.09)
- 模式變換：無
- 圖案尺寸：封面
- 圖案重複原點：左上角
- 模式重複：重複
- 混合模式：正常
3.添加背景蒙版
現在我們已經設置了背景圖像和圖案，讓我們添加一個背景蒙版。
- 在“背景”選項卡中，導航到第 6 個選項卡，即蒙版選項卡，然後單擊“添加背景蒙版”。
- 從下拉菜單中選擇Caret並配置以下設置：
- 蒙版顏色：rgba(0,0,0,0.36)
- 蒙版變換：無
- 蒙版縱橫比：水平矩形
- 面罩尺寸：拉伸填充
- 蒙版混合模式：正常
如何設計英雄第 3 節
現在，讓我們設計第三個英雄部分。
1.添加背景圖像並將混合模式設置為疊加
選擇您的背景圖像，將混合模式設置為疊加，並添加 rgba(10,10,10,0.39) 的疊加顏色。
2.添加背景圖案
現在我們已經設置了背景圖像，讓我們添加背景圖案。
- 在“背景”選項卡中，導航到第 5 個選項卡，即“圖案”選項卡，然後單擊“添加背景圖案”。
- 從下拉列表中選擇Diagonal Stripes 2並配置以下設置：
- 圖案顏色 - rgba(0,0,0,0.06)
- 模式變換：無
- 圖案尺寸：實際尺寸
- 圖案重複原點：左上角
- 模式重複：重複
- 混合模式：正常
3.添加背景蒙版
現在我們已經添加了背景圖像和圖案，讓我們添加背景蒙版。
- 在“背景”選項卡中，導航到第 6 個選項卡，即蒙版選項卡，然後單擊“添加背景蒙版”。
- 從下拉菜單中選擇三角形並配置以下設置：
- 蒙版顏色：rgba(10,10,10,0.61)
- 模式變換：無
- 蒙版縱橫比：水平矩形
- 面罩尺寸：拉伸填充
- 蒙版混合模式：正常
如何設計英雄第 4 節
現在，讓我們設計第四個英雄部分。
1.添加背景圖片
選擇您的背景圖像。
2.添加背景圖案
現在我們已經添加了背景圖像，讓我們添加背景圖案。
- 在“背景”選項卡中，導航到第 5 個選項卡，即“圖案”選項卡，然後單擊“添加背景圖案”。
- 從下拉列表中選擇微笑並配置以下設置：
- 圖案顏色 - rgba(0,0,0,0.2)
- 模式變換：無
- 圖案尺寸：封面
- 圖案重複原點：左上角
- 模式重複：重複
- 混合模式：正常
3.添加背景蒙版
現在我們已經應用了背景圖像和圖案，讓我們添加一個背景蒙版。
- 在“背景”選項卡中，導航到第 6 個選項卡，即蒙版選項卡，然後單擊“添加背景蒙版”。
- 從下拉菜單中選擇Corner Lake並配置以下設置：
- 蒙版顏色：rgba(10,10,10,0.61)
- 蒙版變換：水平
- 蒙版縱橫比：水平矩形
- 面罩尺寸：封面
- 蒙版位置：左中
- 蒙版混合模式：正常
3.配置行設置
在我們開始之前，這個英雄部分有獨特的行樣式。 讓我們設置一下。
- 漿紗：
- 寬度：80%
- 最大寬度：800px
- 行對齊：
- 桌面：默認
- 平板電腦：中心
- 電話：中心
- 間距：
- 左：20vw
如何設計英雄第 5 節
現在，讓我們設計第五個英雄部分。
1.添加背景圖片
選擇您的背景圖像。
2.添加背景圖案
現在我們已經設置了背景圖像，讓我們應用背景圖案。
- 在“背景”選項卡中，導航到第 5 個選項卡，即“圖案”選項卡，然後單擊“添加背景圖案”。
- 從下拉列表中選擇Crosses並配置以下設置：
- 圖案顏色 - #ffffff
- 模式變換：無
- 圖案尺寸：自定義尺寸
- 圖案寬度：10px
- 圖案高度：10px
- 圖案重複原點：左上角
- 模式重複：重複
- 混合模式：正常
3.添加背景蒙版
現在我們已經應用了背景圖像和圖案，讓我們添加一個背景蒙版。
- 在“背景”選項卡中，導航到第 6 個選項卡，即蒙版選項卡，然後單擊“添加背景蒙版”。
- 從下拉菜單中選擇Diagonal Pills並配置以下設置：
- 蒙版顏色：rgba(10,10,10,0.61)
- 蒙版變換：水平
- 蒙版縱橫比：水平矩形
- 面罩尺寸：封面
- 蒙版位置：左中
- 蒙版混合模式：正常
3.配置行設置
在我們開始之前，這個英雄部分有獨特的行樣式。 讓我們設置一下。
- 漿紗：
- 寬度：80%
- 最大寬度：800px
- 行對齊：
- 桌面：默認
- 平板電腦：中心
- 電話：中心
- 間距：
- 右：18vw
獲取更多背景蒙版和圖案設計！
如果您想要更多這樣的設計，請查看這 12 個背景蒙版和圖案設計，免費下載。
最後的想法
使用 Divi 的新背景蒙版和圖案選項，為您的網站設計獨特且引人注目的英雄部分很容易。 每個功能都有許多選項，可讓您創建真正有創意的背景設計。 此外，您可以為任何 Divi Builder 元素添加背景圖案和蒙版！ 設計選擇是無窮無盡的。