如何使用 Divi 的 Theme Builder 創建動畫頁面過渡

通常，當訪問者在您的 Divi 網站上從一個頁面導航到另一個頁面時，轉換會立即發生。 現在，如果有一種方法可以為這些頁面過渡設置動畫呢？ 使用 Divi 的 Theme Builder 確實可以，無需任何自定義代碼！ 一旦您的訪問者離開一個頁面進入另一個頁面，您就可以應用動畫。 在今天的教程中，我們將向您展示如何創建這些動畫頁面過渡。 更重要的是，我們還將分享三個不同的示例，您可以立即將它們應用於下一個項目。 您也可以免費下載模板 JSON 文件！

讓我們開始吧。

預覽

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

動畫頁面過渡 #1

桌面

移動的

動畫頁面過渡 #2

桌面

移動的

動畫頁面過渡 #3

桌面

移動的

免費下載頁面模板

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

下載文件

免費下載

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

下載

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

1.轉到Divi Theme Builder並添加新頁面模板

轉到 Divi 主題生成器並添加新模板

您需要做的第一件事是轉到您的 Divi 主題生成器，然後單擊“添加新模板”。

在所有頁面上使用模板

在所有頁面（或您希望應用過渡的頁面）上使用新模板。

• 用於：所有頁面

開始構建模板主體

然後，開始構建頁面模板的自定義正文。

2.使用帖子內容模塊創建頁面正文

部分設置

間距

進入模板編輯器後，您會注意到一個部分。 打開該部分並刪除所有默認的頂部和底部填充。

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

能見度

為了確保在動畫發生時沒有水平滾動條出現，我們需要在部分設置的高級選項卡中隱藏兩個部分溢出。

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

添加新行

列結構

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

漿紗

在不添加任何模塊的情況下，打開行設置並允許行佔據部分容器的整個寬度。

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

間距

我們還將刪除該行的默認頂部和底部填充。 此時，節、行和列容器具有完全相同的大小。 容器之間沒有空格。 這對於下一步將要發生的事情很重要； 添加動態頁面內容。

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

將帖子內容模塊添加到列

我們需要使頁面內容動態顯示的唯一模塊是 Post Content Module。 繼續將此模塊添加到您行的列中。 由於我們在本文前面部分應用的部分和行設置，動態頁面內容將佔據部分容器的整個寬度和高度。

3. 應用您選擇的動畫頁面過渡

重新創建動畫頁面過渡 #1

部分設置

背景顏色

是時候應用動畫頁面過渡了！ 我們分享了三個不同的例子，但有了 Divi 的內置選項，動畫的可能性是無窮無盡的。 要應用第一個動畫頁面過渡，請打開部分容器並添加背景顏色。

• 背景顏色：#d8cdbe

動畫片

我們還將以下動畫設置應用於該部分：

• 動畫風格：幻燈片
• 動畫方向：右
• 動畫開始不透明度：100%
• 動畫速度曲線：漸入漸出
• 動畫重複：一次

行設置

背景顏色

接下來打開行設置並添加以下背景顏色：

• 背景顏色：#e2e2e2

動畫片

繼續對行應用以下動畫：

• 動畫風格：幻燈片
• 動畫方向：右
• 動畫延遲：500ms
• 動畫開始不透明度：100%
• 動畫速度曲線：漸入漸出
• 動畫重複：一次

列設置

背景顏色

到下一個我們將設置動畫的容器，即列容器。 打開列設置並添加白色背景色。

• 背景顏色：#ffffff

動畫片

還將自定義動畫添加到列。

• 動畫風格：幻燈片
• 動畫方向：左
• 動畫延遲：1200ms
• 動畫速度曲線：漸入漸出
• 動畫重複：一次

發佈內容模塊設置

動畫片

最後但並非最不重要的一點是，我們將為 Post Content Module（包含所有動態頁面內容）設置動畫。

• 動畫風格：淡入淡出
• 動畫延遲：2500ms
• 動畫速度曲線：漸入漸出
• 動畫重複：一次

重新創建動畫頁面過渡 #2

部分設置

背景顏色

想要創建第二個動畫嗎？ 打開部分設置並使用以下背景顏色：

• 背景顏色：#d8cdbe

動畫片

然後，將自定義動畫應用於該部分。

• 動畫風格：幻燈片
• 動畫方向：左
• 動畫開始不透明度：100%
• 動畫速度曲線：漸入漸出
• 動畫重複：一次

行設置

漸變背景

接下來打開行設置並為其使用以下漸變背景：

• 顏色 1：rgba(255,255,255,0)
• 顏色 2：#ffffff
• 漸變類型：線性
• 梯度方向：90度
• 起始位置：50%
• 結束位置：50%

動畫片

也向您的行添加自定義動畫。

• 動畫風格：幻燈片
• 動畫方向：向上
• 動畫延遲：800ms
• 動畫開始不透明度：100%
• 動畫速度曲線：緩入
• 動畫重複：一次

列設置

背景顏色

然後，打開行的列設置並使用白色背景色。

• 背景顏色：#ffffff

動畫片

繼續向列添加動畫。

• 動畫風格：幻燈片
• 動畫方向：右
• 動畫延遲：2000ms
• 動畫開始不透明度：100%
• 動畫速度曲線：漸入漸出
• 動畫重複：一次

發佈內容模塊設置

動畫片

最後但並非最不重要的一點是，打開 Post Content Module 設置並使用以下動畫設置：

• 動畫風格：淡入淡出
• 動畫延遲：3000ms
• 動畫速度曲線：漸入漸出
• 動畫重複：一次

重新創建動畫頁面過渡 #3

部分設置

漸變背景

進入下一個也是最後一個動畫頁面過渡！ 打開部分設置並使用以下漸變背景：

• 顏色 1：#d8cdbe
• 顏色 2：#ffffff
• 漸變類型：徑向
• 徑向：頂部
• 起始位置：20%
• 結束位置：20%

動畫片

轉到該部分的設計選項卡並相應地更改動畫設置：

• 動畫風格：幻燈片
• 動畫方向：下
• 動畫強度：10%
• 動畫開始不透明度：100%
• 動畫速度曲線：漸入漸出
• 動畫重複：一次

行設置

漸變背景

然後，打開行設置並應用漸變背景：

• 顏色 1：#ffffff
• 顏色 2：rgba(255,255,255,0)
• 漸變類型：徑向
• 徑向：中心
• 起始位置：50%
• 結束位置：50%

動畫片

也修改行的動畫設置。

• 動畫風格：幻燈片
• 動畫方向：下
• 動畫延遲：1000ms
• 動畫開始不透明度：100%
• 動畫速度曲線：緩入
• 動畫重複：一次

列設置

背景顏色

繼續打開列設置。 更改背景顏色。

• 背景顏色：#ffffff

動畫片

也將以下動畫設置應用於列：

• 動畫風格：幻燈片
• 動畫方向：下
• 動畫延遲：1500ms
• 動畫速度曲線：漸入漸出
• 動畫重複：一次

發佈內容模塊設置

動畫片

並通過將以下動畫設置應用於 Post Content Module 來完成第三個動畫頁面過渡：

• 動畫風格：淡入淡出
• 動畫延遲：3000ms
• 動畫速度曲線：漸入漸出
• 動畫重複：一次

6. 保存所有主題生成器更改和預覽結果

一旦您構建了頁面模板的正文並添加了您選擇的動畫頁面過渡，您就可以保存所有主題生成器更改並在您的網站上查看結果！

預覽

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

動畫頁面過渡 #1

桌面

移動的

動畫頁面過渡 #2

桌面

移動的

動畫頁面過渡 #3

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何僅使用 Divi 的內置選項和 Theme Builder 創建動畫頁面過渡。 這是向您的網站添加另一個級別的交互的好方法，無需額外的代碼。 您還可以免費下載示例模板 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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