如何使用 Divi 將碰撞動畫應用於設計元素

在頁面上的設計元素中添加動畫絕對可以幫助您提高參與度。 Divi 的 Visual Builder 中有許多動畫選項可用，它們使用起來非常簡單。 但是您也可以通過這些動畫獲得創意並以獨特的方式使用它們。 在這篇文章中，我們將處理三個碰撞動畫的例子，我們將逐步重新創建，僅使用 Divi 的內置選項。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們快速瀏覽一下我們將在本教程中重新創建的三個示例。

示例 #1：碰撞文本

示例#2：碰撞分隔線

示例 #3：碰撞網格

徘徊

訂閱我們的 YouTube 頻道

重新創建示例 #1：碰撞文本

添加專業部分

結構

讓我們從第一個例子開始吧！ 打開一個新的或現有的頁面並使用以下結構添加一個新的專業部分：

漿紗

在不添加任何模塊或行的情況下，打開部分設置並在大小設置中啟用“使此部分全寬”選項。

添加第 1 行

列結構

繼續向專業部分添加一行：

漿紗

打開行設置並對大小設置進行一些更改。

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

間距

還要更改間距設置中的自定義填充值。

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

將文本模塊添加到第 1 列

添加內容

繼續將文本模塊添加到行的第一列並添加一些內容。

標題文字設置

接下來更改標題文本設置。

• 標題字體：蒙特塞拉特
• 標題字體粗細：輕
• 標題文字大小：4.4vw（桌面）、8.2vw（平板電腦）、40px（手機）
• 標題線高度：0.7em

將分頻器模塊添加到第 1 列

能見度

第 1 列中需要的第二個模塊是分頻器模塊。 通過啟用“顯示分隔符”選項確保分隔符顯示出來。

• 顯示分隔線：是

顏色

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

• 顏色：#000000

漿紗

減少分隔線的寬度。

• 寬度：91%

間距

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

• 上邊距：30px

動畫片

最後，為 Divider 模塊添加一個微妙的動畫。

• 動畫風格：幻燈片
• 動畫方向：左

將文本模塊添加到第 2 列

添加內容

移至第二列並添加具有一些選擇內容的第二個文本模塊。

標題文字設置

接下來更改標題文本設置。

• 標題字體：蒙特塞拉特
• 標題字體粗細：輕
• 標題文字顏色：#3f46ff
• 標題文字大小：3.8vw（桌面）、6.5vw（平板電腦）、40px（手機）
• 標題線高度：0.8em

動畫片

並向該模塊添加動畫。

• 動畫風格：幻燈片
• 動畫方向：左
• 動畫延遲：600ms
• 動畫強度：10%

添加第 2 行

列結構

繼續使用以下列結構向該部分添加另一行：

添加剩餘模塊

添加要在此新行中顯示的其他模塊，並根據需要對其進行修改。

重新創建示例 #2：碰撞分隔線

添加專業部分

結構

繼續下一個例子！ 使用以下結構添加新的專業部分：

漿紗

在不添加任何行或模塊的情況下，打開部分設置並啟用“使此部分全寬”選項。

• 將此部分設為全角：是

添加第 1 行

列結構

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

間距

打開行設置並修改自定義填充設置。

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

添加文本模塊

添加內容

接下來，將文本模塊添加到具有一些選擇內容的行。

標題文字設置

移至設計選項卡並更改標題文本設置。

• 標題字體：蒙特塞拉特
• 標題字體粗細：輕
• 標題文字大小：70 像素（桌面）、50 像素（平板電腦）、40 像素（手機）
• 標題線高度：0.8em

添加第 2 行

列結構

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

漿紗

在不添加任何模塊的情況下，打開行設置並修改大小設置。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：53%（桌面），100%（平板電腦和手機）

間距

還要更改自定義填充值。

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

將分頻器模塊添加到第 1 列

能見度

完成修改行設置後，繼續將分隔器模塊添加到第一列，並通過啟用“顯示分隔器”選項確保顯示分隔器。

• 顯示分隔線：是

顏色

接下來更改分隔線顏色。

• 分隔線顏色：#3f46ff

樣式

並在樣式設置中更改分隔線樣式。

• 分隔線樣式：雙

漿紗

在尺寸設置中也增加分隔線重量。

• 分隔線重量：8px

動畫片

最後，將動畫添加到 Divider 模塊。

• 動畫風格：幻燈片
• 動畫方向：右

克隆分隔器模塊並放置在第 2 列中

完成修改分頻器模塊設置後，繼續克隆模塊。 將副本放在行的第二列中。

更改動畫

要創建碰撞效果，請更改複製的分隔器模塊的動畫方向。

• 動畫風格：幻燈片
• 動畫方向：左

添加第 3 行

列結構

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

添加剩餘模塊

並添加您想要完成的部分設計的任意數量的模塊。

重新創建示例 #3：碰撞網格

添加新部分

間距

繼續下一個也是最後一個例子！ 添加常規部分並打開設置。 轉到間距設置添加一些自定義填充值：

• 頂部填充：300px
• 底部填充：200px

添加第 1 行

列結構

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

將圖像模塊添加到列

上傳異形圖像疊加

通過右鍵單擊將以下形狀的圖像疊加保存到桌面：

保存形狀的圖像疊加後，返回您的 Divi 網站並將圖像模塊添加到該行。 上傳您可以在下載文件夾中找到的形狀圖像疊加文件。

漸變背景

接下來，為模塊添加漸變背景。

• 顏色 1：#aa2bff
• 顏色 2：#09f7eb

結盟

還要更改圖像對齊方式。

• 圖像對齊：居中

漿紗

並在大小設置中啟用“強制全寬”選項。

• 強制全角：是

間距

也向模塊添加一些自定義邊距。

• 左邊距：200px
• 右邊距：200px

動畫片

最後，向模塊添加動畫。

• 動畫風格：縮放
• 動畫方向：中心
• 動畫持續時間：3000ms
• 動畫強度：100%

添加第 2 行

列結構

到第二排。 使用以下列結構：

漿紗

在不添加任何模塊的情況下，打開行設置並對大小設置進行一些更改。

• 使用自定義寬度：是
• 單位：PX
• 自定義寬度：944px
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

將 Blurb 模塊添加到第 1 列

添加內容

繼續向第一列添加一個 Blurb 模塊。 輸入一些選擇的內容。

圖標

接下來選擇一個圖標。

背景顏色

並為模塊添加背景顏色。

• 背景顏色：rgba(255,255,255,0.83)

圖標設置

移至設計選項卡並更改圖標設置。

• 圖標顏色：#000000
• 圖標位置：頂部
• 使用圖標字體大小：是
• 圖標字體大小：73px

標題文字設置

還要修改標題文本設置。

• 標題字體：Open Sans
• 標題字體粗細：半粗體
• 標題文本對齊：居中
• 標題文字大小：15px
• 標題字母間距：-1px
• 標題行高度：1.8em

漿紗

並在大小設置中減小內容寬度。

• 內容寬度：183px

間距

我們也會添加一些自定義的頂部和底部填充。

• 頂部填充：50px
• 底部填充：50px

盒子陰影

繼續給 Blurb Module 一個微妙的盒子陰影。

• 框陰影模糊強度：80px
• 陰影顏色：rgba(0,0,0,0.3)

過渡

並在高級選項卡中增加過渡持續時間。

• 轉換持續時間：600ms

克隆 Blurb 模塊 8 次並在每個剩餘的列中放置 3 個副本

現在，一旦你完成了第一個 Blurb 模塊的修改，你就可以繼續克隆它 8 次。 在第二列中放置三個副本，在第三列中放置三個。 在本教程的下一部分中，我們將對每個 Blurb 模塊進行獨特的更改。 為此，我們將遵循以下編號：

修改模糊模塊 #1

間距

打開第一個 Blurb 模塊並添加一些負上邊距。

• 上邊距：-340px（桌面），0px（平板和手機）

懸停間距

在懸停時更改邊距值。

• 上邊距：-380px
• 下邊距：40px
• 左邊距：-40px
• 右邊距：40px

圓角

繼續在模塊的左上角添加“30px”。

動畫片

並添加動畫。

• 動畫風格：幻燈片
• 動畫方向：左
• 動畫延遲：200ms

修改模糊模塊 #2

背景顏色

打開第二個 Blurb 模塊並更改背景顏色。

• 背景顏色：rgba(255,255,255,0.93)

間距

繼續向模塊添加一些負上邊距。

• 上邊距：-340px（桌面），0px（平板和手機）

懸停間距

在懸停時更改這些邊距值。

• 上邊距：-380px
• 下邊距：40px

動畫片

並為模塊添加動畫。

• 動畫風格：幻燈片
• 動畫方向：左
• 動畫延遲：400ms

修改模糊模塊 #3

間距

轉到第三個 Blurb 模塊。 添加一些負上邊距。

• 上邊距：-340px（桌面），0px（平板和手機）

懸停間距

修改懸停時的邊距值。

• 上邊距：-380px
• 下邊距：40px
• 左邊距：40px
• 右邊距：-40px

圓角

還將“30px”添加到模塊的右上角。

動畫片

並添加動畫。

• 動畫風格：幻燈片
• 動畫方向：左
• 動畫延遲：600ms

修改模糊模塊 #4

背景顏色

進入第四個模塊。 打開設置並更改背景顏色。

• 背景顏色：rgba(255,255,255,0.93)

懸停間距

接下來添加一些懸停邊距值。

• 左邊距：-40px
• 右邊距：40px

動畫片

並添加動畫。

• 動畫風格：淡入淡出
• 動畫延遲：800ms

修改模糊模塊 #5

動畫片

進入第五個模塊。 您在這裡唯一需要做的就是添加動畫。

• 動畫風格：淡入淡出
• 動畫延遲：1000ms

修改模糊模塊 #6

背景顏色

繼續打開第六個模塊並更改背景顏色。

• 背景顏色：rgba(255,255,255,0.93)

懸停間距

更改懸停時的間距值。

• 左邊距：40px
• 右邊距：-40px

動畫片

並添加動畫。

• 動畫風格：淡入淡出
• 動畫延遲：1200ms

修改模糊模塊 #7

懸停間距

進入第七個模塊。 在間距設置中添加一些懸停邊距值。

• 上邊距：40px
• 左邊距：-40px
• 右邊距：40px

圓角

繼續向模塊的左下角添加邊框半徑的“30px”。

動畫片

並添加動畫。

• 動畫風格：幻燈片
• 動畫方向：右
• 動畫延遲：1400ms

修改模糊模塊 #8

背景顏色

繼續打開第八個模塊並更改背景顏色。

• 背景顏色：rgba(255,255,255,0.93)

懸停間距

將懸停時的一些自定義邊距添加到下一個模塊。

• 上邊距：40px

動畫片

也向此 Blurb 模塊添加動畫。

• 動畫風格：幻燈片
• 動畫方向：右
• 動畫延遲：1600ms

修改模糊模塊 #9

懸停間距

進入第九個也是最後一個模塊！ 轉到間距設置並添加一些自定義懸停邊距值。

• 上邊距：40px
• 左邊距：40px
• 右邊距：-40px

圓角

將邊框半徑的“30px”也添加到右下角。

動畫片

並添加動畫。

• 動畫風格：幻燈片
• 動畫方向：右
• 動畫延遲：1800ms

在第 1 行的圖像模塊中添加負下邊距

現在，為了碰撞我們在本示例的第一部分中創建的圓和網格，我們將給圖像模塊（包含形狀圖像疊加層）一些負底邊距。

• 下邊距：-520px

預覽

現在我們已經完成了所有步驟，讓我們最後看看我們取得的結果。

示例 #1：碰撞分隔線

示例 2：碰撞文本

示例 #3：碰撞網格

徘徊

最後的想法

向頁面添加動畫有助於在訪問者與您之間建立更多互動。 當然，您可以只使用 Visual Builder 中的動畫設置，但您也可以更進一步，將碰撞動畫應用於設計元素，這將幫助您獲得驚人的結果。 如果您有任何問題或建議，請務必在下方評論區留言！