使用 Divi 將超大字符變成背景蒙版（免費下載！）

已發表: 2019-06-13

當涉及到背景蒙版時，人們傾向於使用 Divi 之外的圖像編輯軟件，然後將圖像上傳到他們正在創建的網站。儘管這是自定義和個性化您的網站的可靠方法，但它不一定是唯一的方法。您還可以通過創造性地組合不同的設計元素和過濾器選項，在 Divi 本身內創建背景蒙版。這正是我們在這篇文章中要做的！我們會將超大字符轉換為在不同屏幕尺寸下看起來都很棒的背景蒙版。我們希望本教程能激發您使用超大字符和 Divi 的內置選項創建自己的設計。

讓我們開始吧！

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

示例#1

超大字符

示例#2

超大字符

免費下載英雄章節

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

下載文件

免費下載

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

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

重新創建示例 #1

訂閱我們的 YouTube 頻道

超大字符

添加新部分

背景顏色

讓我們從第一個例子開始！將新的常規部分添加到新頁面或現有頁面，並為該部分添加背景：

背景顏色：#000000

超大字符

間距

然後，轉到間距設置並刪除所有默認的頂部和底部填充。

頂部填充：0px
底部填充：0px

超大字符

溢出

移至高級選項卡並隱藏該部分的溢出。當我們重新定位包含超大字符的文本模塊時，這將在本教程後面變得很重要。

水平溢出：隱藏
垂直溢出：隱藏

超大字符

添加第 1 行

列結構

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

超大字符

第 1 列背景顏色

尚未添加任何模塊，打開行設置並為第一列添加背景顏色。

第 1 列背景顏色：#848484

超大字符

第 1 列背景圖像

還要添加背景顏色。為了結合背景顏色和圖像，我們將應用混合模式。

列背景圖像混合：相乘

超大字符

漿紗

移至設計選項卡並通過應用以下大小設置允許行佔據屏幕的整個寬度：

使用自定義裝訂線寬度：是
天溝寬度：1
寬度：100%
最大寬度：100%

超大字符

間距

我們還擺脫了行的所有自定義頂部和底部填充。

頂部填充：0px
底部填充：0px

超大字符

將文本模塊添加到列

將字符添加到內容框

是時候添加包含超大字符的文本模塊了。將字母“o”添加到內容框中。

超大字符

背景顏色

繼續轉到背景設置並添加黑色背景色。

背景顏色：#000000

超大字符

文字設置

移至設計選項卡並更改文本設置。請注意我們如何為文本大小使用高值。

文字字體： Poppins
文字大小：100vw
文字方向：居中

超大字符

間距

然後，轉到間距設置並添加一些自定義邊距和填充值。

上邊距：-6vw
頂部填充：15vw
底部填充：49vw

超大字符

過濾器

是時候讓魔法發生了！轉到模塊的過濾器設置並相應地修改混合模式：

混合模式：相乘

超大字符

添加第 2 行

列結構

將超大角色添加到設計中後，您可以繼續添加要在該部分中顯示的其餘模塊，最好添加新行：

超大字符

漿紗

還沒有添加任何模塊，打開行設置並允許行佔據屏幕的整個寬度。

使用自定義裝訂線寬度：是
天溝寬度：1
寬度：100%
最大寬度：100%

超大字符

間距

刪除所有默認的頂部和底部填充。

頂部填充：0px
底部填充：0px

超大字符

將文本模塊 #1 添加到列

添加H1內容

在這個新行中，您可以添加您選擇的模塊。要重新創建在這篇文章的預覽中共享的確切示例，請先添加一個包含一些 H1 內容的文本模塊。

超大字符

H1 文本設置

轉到設計選項卡並更改 H1 文本設置。

標題字體：Playfair Display
標題字體粗細：粗體
標題文本對齊方式：居中
標題文字顏色：#ffffff
標題文字大小：6vw

超大字符

間距

繼續進行間距設置，並允許文本模塊通過添加一些負上邊距來重疊超大字符。我們還確保模塊的左側和右側有一些空間以確保響應能力。

上邊距：-47vw
左邊距：1vw
右邊距：1vw

超大字符

將分隔模塊添加到列

能見度

我們需要的下一個模塊是分頻器模塊。確保啟用了“顯示分隔線”選項。

顯示分隔線：是

超大字符

顏色

接下來轉到設計選項卡並更改分隔線顏色。

顏色：#ffffff

超大字符

漿紗

還要修改大小設置。

分隔線重量：13px
寬度：16%
模塊對齊：居中

超大字符

間距

並添加一些上邊距以在文本模塊和分隔線模塊之間創建空間。

最高利潤率：16vw

超大字符

將文本模塊 #2 添加到列

添加內容

我們需要的下一個模塊是帶有一些段落內容的文本模塊。

超大字符

文字設置

轉到文本設置並進行以下更改：

文字字體：Open Sans
文字顏色：#ffffff
文字大小：1vw（桌面）、2vw（平板電腦）、2.5vw（手機）
文本行高：1.9em
文字方向：居中

超大字符

間距

添加一些自定義間距值。

最高利潤率：3vw
下邊距：3vw（台式機），10vw（平板電腦和手機）
左邊距：27vw（桌面）、10vw（平板電腦）、8vw（手機）
右邊距：27vw（桌面）、10vw（平板電腦）、8vw（手機）

超大字符

將按鈕模塊添加到列

添加副本

進入下一個也是最後一個模塊，即按鈕模塊。輸入您選擇的一些副本。

超大字符

結盟

繼續更改設計選項卡中的按鈕對齊方式。

按鈕對齊：居中

超大字符

按鈕設置

轉到按鈕設置並根據需要設置按鈕樣式。

為按鈕使用自定義樣式：是
按鈕文字大小：1vw（桌面）、2.5vw（平板電腦）、3vw（手機）
按鈕文字顏色：#ffffff
按鈕邊框寬度：1px
按鈕邊框半徑：0px
按鈕字體：Open Sans
字體粗細：超粗
字體樣式：大寫

超大字符

間距

最後但並非最不重要的一點是，我們還添加了一些自定義邊距和填充值以實現所需的結果。

底邊距：10vw
頂部填充：15px
底部填充：15px
左填充：50px
右填充：50px

超大字符