如何使用 Divi 創建動畫背景顏色

Divi 的動畫選項也可以快速將已經很漂亮的頁面變成引人入勝的頁面。 到目前為止，我們都已經習慣了 Divi 為您提供的各種設計元素中內置的不同動畫。 但是您知道您也可以使用這些動畫來突出顯示一個特定的設計選項嗎？

在本教程中，我們將專注於創建動畫背景顏色。 為了實現預期的結果，我們將使用分隔模塊作為其背景顏色，並在其頂部放置一個文本模塊。 我們希望本教程能激發您為即將到來的網頁設計項目添加動畫背景顏色。

讓我們開始吧！

預覽

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

桌面

移動的

免費下載動畫背景顏色佈局

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

下載文件

免費下載

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

下載

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

讓我們開始重建吧！

訂閱我們的 YouTube 頻道

添加新部分

間距

您需要做的第一件事是向您正在處理的頁面添加一個新部分。 打開部分設置並添加一些自定義填充值。

• 頂部填充：5vw
• 底部填充：17vw

添加新行

列結構

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

漿紗

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

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

將分隔模塊 #1 添加到列

能見度

是時候開始添加我們需要的各種模塊了，從分頻器模塊開始。 此分隔線模塊將用於其背景顏色、大小和動畫。 確保禁用“顯示分隔符”選項。

• 顯示分隔線：否

背景顏色

轉到背景設置並添加以下背景顏色：

• 背景顏色：#212121

間距

繼續進行間距設置，並使用視口高度單位為您的模塊提供所需的形狀。

• 頂部填充：30vh
• 底部填充：30vh

動畫片

我們允許通過添加具有動畫延遲的自定義動畫來為背景顏色設置動畫。

• 動畫風格：幻燈片
• 動畫重複：一次
• 動畫方向：右
• 動畫延遲：1000ms
• 動畫強度：88%
• 動畫開始不透明度：100%

將文本模塊 #1 添加到列

添加內容

我們需要的下一個模塊是文本模塊。 添加一些您選擇的 H2 和段落內容。

文字設置

然後，轉到文本設置並相應地修改值：

• 文字字體：Didact Gothic
• 文字顏色：#ffffff
• 文字大小：1.1vw（桌面）、1.7vw（平板電腦）、2.5vw（手機）
• 文本行高：2.1em
• 文本方向：對齊

默認標題 2 文本設置

接下來對 H2 文本設置進行一些更改。

• 標題 2 字體：Abril Fatface
• 標題 2 文本顏色：#1c1c1c
• 標題 2 文字大小：3vw（桌面）、5vw（平板電腦）、7vw（手機）
• 標題 2 行高：1.8em

懸停標題 2 文本設置

我們還修改了懸停時的文本顏色。

• 標題 2 文本顏色：#ffffff

克隆兩個模塊

完成添加和自定義這兩個模塊後，您可以克隆它們。 在本文接下來的步驟中，我們將修改所有四個模塊以創建來自兩側的背景顏色動畫。 我們還將向文本模塊添加重疊，使其看起來像分隔模塊和文本模塊是在同一個容器中創建的。

修改分隔模塊重複

更改背景顏色

打開重複的分隔線模塊並更改背景顏色。

• 背景顏色：#0bbfa1

更改動畫

為了讓背景動畫從另一邊顯示出來，我們改變了動畫方向。 我們還將添加稍高的動畫延遲以實現我們想要的結果。

• 動畫方向：左
• 動畫延遲：1500ms

修改文本模塊重複

更改內容

繼續打開重複的文本模塊並更改內容。

更改標題 2 文本設置

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

• 標題 2 文本對齊方式：右
• 標題 2 文本顏色：#0cc9ad

分隔線定位

分頻器模塊 #1

為了讓一些空白顯示在第一個分隔模塊的右側，我們將使用視口寬度單位添加一些右邊距。

• 右邊距：20vw

分頻器模塊 #2

也打開第二個分隔模塊並允許佔用相同的空間，但在頁面的左側。

• 最高利潤率：2vw
• 左邊距：20vw

添加重疊

文本模塊 #1

現在我們已經自定義了我們行中的所有模塊，我們可以開始創建重疊，從第一個文本模塊開始。 將以下自定義邊距值添加到模塊的間距設置中：

• 最高邊距：-49vh
• 右邊距：20vw（桌面）、15vw（平板電腦）、10vw（手機）

文本模塊 #2

對重複的文本模塊也使用以下自定義邊距值：

• 最高邊距：-49vh
• 左邊距：20vw（桌面）、15vw（平板電腦）、10vw（手機）

退出 Visual Builder 查看結果

創建重疊後，您需要退出 Visual Builder 以查看結果！

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

最後的想法

我們一直在尋找方法來幫助您突破網頁設計的界限並創建美觀且引人入勝的網站。 在這篇文章中，我們創造性地結合了不同的設計元素和重疊來創建動畫背景顏色。 這是為您正在處理的任何頁面添加一些額外維度並使您的網站完美匹配當前設計趨勢的好方法。 如果您有任何問題或建議，請務必在下面的評論部分留言。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。