如何在 Divi 中的滾動上設計帶有背景動畫的文本蒙版

使用 Divi 的內置選項創建文本掩碼設計非常容易。 構建器具有創建文本蒙版效果的所有成分，包括文本樣式、背景和混合模式的選項。 事實上，我們之前已經使用混合模式創建了文本蒙版設計。 但是，通過滾動效果，我們可以將文本蒙版設計提升到一個全新的水平。

在本教程中，我們將向您展示如何在 Divi 中設計帶有滾動背景動畫的文本蒙版。 設計獨特，滾動效果確實讓它變得生動起來。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

免費下載佈局

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

下載文件

免費下載

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

下載

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

要將部分佈局導入您的 Divi 庫，請導航到 Divi 庫。

單擊導入按鈕。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

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

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

在 Divi 中設計帶有背景動畫的文本遮罩

添加行

首先，在默認的常規部分添加一個兩列的行。

更新部分設置

在添加任何模塊之前，打開部分設置並更新背景顏色和填充如下：

• 背景顏色：#750046

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

更新行設置

部分設置完成後，打開行的設置並更新以下設計設置：

• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%
• 填充：0px 頂部，0px 底部

將裝訂線寬度設置為 1 並將寬度設置為 100% 很重要，因為我們將在創建文本蒙版設計時為我們的文本使用 vw 長度單位。 由於 vw 長度單位基於瀏覽器的寬度，因此父容器（部分和行）具有與瀏覽器相同的 100% 寬度非常重要。

更新第 1 列設置

我們的文本掩碼和圖像將被添加到左列（第 1 列）。 我們需要為列添加背景顏色，以便我們添加到圖像和文本的混合模式將混合/顯示該顏色。 我們還需要將溢出設置為隱藏，以便在滾動圖像時設置動畫，我們不會在列外看到溢出的圖像。

打開第 1 列的設置並更新以下內容：

• 背景顏色：#750046
• 水平溢出：隱藏
• 垂直溢出：隱藏

創建文本掩碼

要創建文本掩碼，請將文本模塊添加到第 1 列。

文字內容

然後在正文內容中添加單詞“divi”。 我們使用了一個 4 個字母的單詞，以便它可以在方形設計中均勻堆疊。

文字背景

接下來，為文本模塊添加白色背景色。

• 背景顏色：#ffffff

文字設計

然後，在設計選項卡下，更新以下內容：

• 文字字體：Rubik Mono One
• 文字字體樣式：TT
• 文字文字顏色：#000000
• 文字文字大小：25vw（桌面），50vw（平板電腦和手機）
• 文本行高：0.8em
• 文本對齊：居中

• 填充：8vw 頂部，8vw 底部

文本混合模式

要完成文本蒙版設計，請添加以下混合模式：

• 混合模式：屏幕

到目前為止，此文本蒙版效果的四個關鍵要素如下：

1. 列背景
2. 白色文本背景
3. 黑色文本
4. 文本模塊上的屏幕混合模式

屏幕混合模式將圖層相乘並產生更輕的混合版本。 在屏幕混合模式下，黑色文本變得完全透明，顯示其背後的內容，在這種情況下是背景色。

添加背景圖片

要將背景圖像添加到文本蒙版，請創建一個新的圖像模塊並上傳大約 1700 像素 x 2500 像素的圖像。 圖像的大小很重要，這樣圖像將覆蓋列的高度和寬度。

形象設計

然後更新以下設計設置：

• 強制全角：是
• 混合模式：屏幕

這種混合模式對於文本遮罩效果不是必需的，但它確實將圖像與背景顏色混合，以便更好地匹配設計。

圖像位置

接下來，給圖像一個絕對位置並更新 Z 索引，使其位於文本模塊的後面。

• 位置：絕對
• Z 指數：-1

圖像滾動效果

圖像設計準備就緒後，轉到高級選項卡並更新滾動效果選項，如下所示：

在垂直運動選項卡下，

• 起始偏移：-1（0%）
• 中間偏移：0（50%）
• 結束偏移：1（100%）

在水平運動選項卡下，

• 起始偏移：-0.5（0%）
• 中間偏移：0（50%）
• 結束偏移：0.5（100%）

在放大和縮小選項卡下，

• 起始比例：110%（0%）
• 中檔：125%（50%）
• 結束比例：140%（100%）

結果

您可以為該部分添加一些頂部和底部邊距，以便您可以檢查到目前為止的結果。

創建模擬文本

在右欄中，添加一個新的文本模塊。

使用以下內容更新正文內容：

<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

然後更新文字設計設置廣告如下：

• 文字顏色：淺
• 標題 2 字體：Rubik
• 標題 2 文字大小：4vw
• 填充（桌面）：16vw 頂部，5vw 左，5vw 右
• 填充（平板電腦）：16vw 頂部，16vw 底部，5vw 左，5vw 右

結果

可選調整

黑色背景/白色文本

如果您想為文本蒙版使用黑色背景，您需要做的就是更新構成文本蒙版效果的三個關鍵選項。

打開文本模塊設置並更改以下內容：

• 背景顏色：#000000（黑色）
• 文字文字顏色：#ffffff（白色）
• 混合模式：相乘

這是結果……

旋轉 PNG 圖像

您可以將動畫圖像更改為具有透明背景（PNG）的動畫圖像，以獲得另一種很酷的效果。 這是我使用的 PNG 圖像示例，並添加了旋轉滾動效果。

最終結果

這是對所有設計的另一種看法。

最後的想法

希望這些帶有滾動背景動畫的文本蒙版設計能夠為您的網站提供所需的創意優勢。 一旦您了解了創建文本遮罩效果的基本要素，您就可以輕鬆創建無數版本的此設計來滿足您的需求。

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

乾杯!