如何使用 Divi 為每個容器創建漂亮的動畫輪廓

Divi 的動畫選項幫助使大量網站栩栩如生，而無需自定義代碼。 內置動畫設置是高度可調的，它們允許您創建真正獨特的設計。 例如，您可以做的一件事是創建動畫容器輪廓。 這正是我們將在這篇文章中向您展示的內容。 我們將為每個容器添加一個邊框，並添加與每個元素的流動相匹配的動畫設置。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載動畫大綱佈局

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

讓我們開始重建

添加新部分

背景顏色

首先向您正在處理的頁面添加一個新的常規部分，並使用白色背景色。

• 背景顏色：#FFFFFF

間距

轉到設計選項卡並添加一些自定義邊距和填充值。

• 最高利潤率：3vw
• 底邊距：3vw
• 左邊距：3vw
• 右邊距：3vw
• 頂部填充：3vw
• 底部填充：3vw

邊界

接下來打開邊框設置，並在每個角上添加“2vw”。 也使用邊框。

• 邊框寬度：1px
• 邊框顏色：#000000

動畫片

添加自定義動畫。

• 動畫風格：幻燈片
• 動畫方向：下
• 動畫開始不透明度：100%

能見度

為了確保沒有超出部分容器的內容，我們將在部分的可見性設置中隱藏溢出。

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

添加新行

列結構

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

漿紗

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

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

間距

接下來添加一些自定義填充值。

• 頂部填充：3vw
• 底部填充：3vw
• 左填充：3vw
• 右填充：3vw

邊界

移至邊框設置並在每個角上添加“2vw”。 添加邊框。

• 邊框寬度：1px
• 邊框顏色：#000000

動畫片

我們還在行中添加動畫。

• 動畫風格：幻燈片
• 動畫方向：向上
• 動畫延遲：500ms
• 動畫開始不透明度：100%

能見度

為了確保列動畫（我們將在稍後添加）有效，我們將使行溢出可見。

• 水平溢出：可見
• 垂直溢出：可見

第 1 列設置

繼續打開第一列的設置。

邊界

轉到設計選項卡，在每個角上添加“2vw”並使用邊框。

• 邊框寬度：1px
• 邊框顏色：#000000

動畫片

通過添加自定義動畫完成列設置。

• 動畫風格：幻燈片
• 動畫方向：下
• 動畫延遲：1000ms
• 動畫開始不透明度：100%

將 Blurb 模塊添加到第 1 列

添加內容

是時候開始添加模塊了！ 我們需要的第一個是 Blurb 模塊。 輸入您選擇的一些內容。

選擇圖標

接下來選擇一個圖標。

圖標設置

轉到設計選項卡並相應地更改圖標設置：

• 圖標顏色：#000000
• 圖標位置：頂部
• 使用圖標字體大小：是
• 圖標字體大小：6vw（桌面）、8vw（平板電腦）、10vw（手機）

標題文字設置

還要修改標題文本設置。

• 標題字體: Poppins
• 標題字體粗細：超粗
• 標題文本對齊：居中
• 標題文字大小：1.2vw（桌面）、2.5vw（平板電腦）、3vw（手機）

正文設置

隨著正文文本設置。

• 正文字體：Open Sans
• 正文對齊方式：居中
• 正文大小：0.8vw（桌面）、1.7vw（平板電腦）、2.3vw（手機）

間距

通過在不同屏幕尺寸之間添加自定義間距值，在 Blurb 模塊周圍創建一些空間。

• 最高利潤率：3vw
• 底邊距：3vw
• 左邊距：3vw
• 右邊距：3vw
• 頂部填充：10vw（台式機）、18vw（平板電腦和手機）
• 底部填充：10vw（台式機），18vw（平板電腦和手機）
• 左填充：2vw（桌面），8vw（平板電腦和手機）
• 右填充：2vw（桌面），8vw（平板電腦和手機）

邊界

轉到邊框設置，在每個角上添加“2vw”並使用邊框。

• 邊框寬度：1px
• 邊框顏色：#000000

動畫片

通過添加自定義動畫完成 Blurb 模塊設計。

• 動畫風格：幻燈片
• 動畫方向：下
• 動畫持續時間：1300ms
• 動畫延遲：1200ms
• 動畫強度：60%
• 動畫開始不透明度：100%
• 圖標動畫：無動畫

將按鈕模塊添加到第 1 列

添加副本

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

結盟

移至設計選項卡並更改對齊方式。

• 按鈕對齊：居中

按鈕設置

接下來更改按鈕設置。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：0.8vw（桌面）、1.5vw（平板電腦）、2.2vw（手機）
• 按鈕文字顏色：#000000
• 按鈕背景顏色：#FFFFFF
• 按鈕邊框寬度：1px
• 按鈕邊框顏色：#000000
• 按鈕邊框半徑：50vw
• 按鈕字體：Open Sans
• 按鈕字體粗細：超粗
• 按鈕字體樣式：大寫

間距

並使用跨不同屏幕尺寸的自定義間距值來塑造按鈕模塊。

• 上邊距：-5vw（桌面）、-6.5vw（平板電腦）、-7vw（手機）
• 下邊距：2vw（台式機），3vw（平板電腦和手機）
• 頂部填充：1vw（桌面），2vw（平板電腦和手機）
• 底部填充：1vw（台式機），2vw（平板電腦和手機）
• 左填充：5vw（台式機），8vw（平板電腦和手機）
• 右填充：5vw（台式機），8vw（平板電腦和手機）

動畫片

通過添加自定義動畫完成按鈕模塊設計。

• 動畫風格：幻燈片
• 動畫方向：向上
• 動畫延遲：1400ms
• 動畫強度：200%
• 動畫開始不透明度：100%

刪除第 2 列並克隆第 1 列

完成第 1 列及其中的模塊後，您可以刪除第二個（空）列並克隆第一個。 修改所有 Blurb 模塊內容以匹配您的網站，您就大功告成了！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何將 Divi 的動畫設置與 Divi 為您提供的各種容器及其邊框設置結合使用。 我們希望本教程也能激勵您創建自己的這種技術的變體！ 如果您有任何疑問，請確保在下面的評論部分發表評論。

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