關於Divi 5的Lottie模塊，您需要了解的一切

Divi 5的Lottie模塊為您的頁面帶來了動態，輕量級的動畫，使您的頁面更具吸引力和互動性。正確的視覺效果是吸引註意力並保持訪客參與的關鍵。借助Lottie模塊，Divi 5允許您添加表演友好的專業動畫。

在這篇文章中，我們將說明您需要了解的有關Lottie模塊的所有信息，包括其功能，設置過程，自定義選項以及使用它的方法。讓我們跳入吧！

什麼是Lottie文件？

Lottie動畫是輕巧的，基於JSON的圖形，可作為可擴展向量。他們提供可擴展的視覺效果，而無需大量的視頻或gif。由於它能夠將性能與靈活性相結合，洛蒂（Lottie）在現代網絡設計中獲得了流行。與傳統動畫不同，Lottie文件使用基於矢量的JSON數據，確保視覺效果清晰，並在所有設備和屏幕尺寸上進行平穩播放。

訂閱我們的YouTube頻道

在Divi 5中，Lottie模塊將這些動畫無縫集成到視覺構建器中，使用戶可以單擊幾下在其Divi網站上添加動態的現代觸摸。無論是突出CTA還是在英雄部分中增加天賦，Lottie模塊都可以使動畫毫不費力地合併動畫。

借助Lottie模塊，Divi 5將您如何將運動帶入網頁設計，使其令人著迷和高效。

關鍵功能

Divi 5中的Lottie模塊是一種多功能工具，具有功能，使創建動態，優化的動畫變得容易。它提供了對動畫行為的控制，使您可以調整速度，方向，觸發器等。讓我們看一下它的一些關鍵功能。

易用性

Divi 5中的Lottie模塊的設計考慮了簡單性，使其對所有技能水平的用戶都可以易於訪問。您無需成為編碼專家即可在Divi網站上添加專業的，引人注目的動畫。

由於在線可用的資源數量，採購動畫很容易。 Lottiefiles和Lordicon等平台提供了廣泛的免費和優質洛蒂動畫的庫，從微妙的裝載圖標到充滿活力的圖形。

對於那些尋求獨特觸摸的人，您可以使用BodyMovin插件等工具來創建自定義動畫。該插件將動畫導出與Lottie模塊兼容的JSON文件。無論您選擇預製還是自定義動畫，該過程都很簡單。

自定義選項

Divi 5中的Lottie模塊提供自定義選項，可控制Lottie文件的幾個方面。對於交互式體驗，請使用觸發動畫選擇何時激活動畫，例如載荷，何時進入視口，懸停，單擊或滾動。您可以啟用循環動畫​​，以便在lottie文件上連續運動，調整動畫速度，選擇方向（向前或向後），然後在播放模式字段中進行正常或在彈跳之間進行選擇。

上傳JSON動畫

向Divi 5添加Lottie動畫需要上傳JSON文件，這是Lottie文件的標準格式。但是，WordPress不在本地支持其媒體庫中的JSON上傳，因此您需要採取其他步驟以確保可以上傳它們。

第一個選項是創建一個子主題，並在您的子主題函數的函數上添加PHP片段。此方法是輕巧的，可確保安全處理動畫文件。另外，您可以使用類似插件的文件上傳類型來允許JSON上傳而無需觸摸任何代碼，非常適合喜歡插件解決方案的用戶。有關實施這兩種方法的逐步指南，請查看我們的支持文章，該文章將帶您完成整個過程，以設置Divi 5網站以進行JSON上傳。

如何在Divi 5中使用Lottie模塊

在Divi 5中添加Lottie動畫很簡單。從Lottiefiles或Lordicon等來源創建或下載Lottie動畫。查找並單擊Visual Builder中的Lottie模塊以將其添加到您的頁面中。

上傳JSON文件或將其定位在您的WordPress媒體庫中。

選擇觸發動畫。您可以將其設置為在加載，查看，懸停，單擊或滾動以動畫中進行動畫。

如果您希望Lottie動畫具有交互式元素，請使用模塊的滾動來動畫觸發。

使用此觸發器提供了創造動態和引人入勝的用戶體驗的好方法。頁面加載時，不要使用動畫，而是滾動以將動畫的進度直接與用戶的滾動行為聯繫起來。當用戶向下滾動頁面時，動畫會逐幀進行。這使動畫成為一種交互元素，使體驗更加動態。

如果您希望動畫無休止地循環，請啟用循環動畫​​切換。您還可以設置動畫速度，控制方向（向前或向後），然後選擇“正常”或“彈跳”以進行遊戲模式。

在“設計”選項卡中，您可以控制尺寸，對齊，高度，間距等。

儘管您無法在Divi 5中更改Lottie文件的顏色，但大多數Lottie網站都可以在下載之前選擇特定的顏色和触發寬度。

如您所見，在Divi 5網站上添加Lottie文件需要幾秒鐘，並在您的網頁中增加了一些天氣，而不必擔心性能。

使用Lottie模塊的實際示例

Divi 5中的Lottie模塊提供了廣泛的應用程序，從而增加了具有動態動畫的網站的才能。從增強接觸頁面到引人注目的英雄部分，其靈活性都適合所有類型的設計。

憑藉其無縫集成和自定義選項，Divi用戶可以在整個網站上創建引人入勝的性能友好體驗。

聯繫頁面

添加Lottie動畫可以使您的聯繫頁面更具吸引力。例如，在工作時間，電話號碼和其他聯繫信息旁邊放置Loopie Lottie模塊，以創建交互式和誘人的體驗，從而增強轉化措施而不減慢您的網站。

404頁

通過嬉戲的Lottie動畫將令人沮喪的404個錯誤變成令人難忘的時刻。將旋轉的指南針或動畫搜索圖標添加到您的404頁面，並配上簡短的消息。

使用循環動畫​​設置保持運動連續，並在負載上觸發它以立即引起注意。這使得404頁的感覺不像死胡同，而更像是一個創意的接觸點。

特色產品

展示您最喜歡的Woo產品或類別，其中包括Lottie動畫，以突出出售產品。例如，將銷售徽章Lottie Animation放在特色產品旁邊以突出顯示。

首先，將動畫設置為觸發負載。然後，它會隨著用戶瀏覽，將目光吸引到產品上並提高視覺吸引力。

服務部分

通過視覺代表您的產品的Lottie動畫將您的服務部分帶入生活。例如，為您的營銷機構使用循環動畫​​，調整速度以匹配音調。

此外，將視圖觸發器設置為激活動畫在用戶探索時，以確保動態，專業的演示文稿。

英雄部分

通過大膽的Lottie動畫為您的網站定下基調，使您的英雄部分令人難以置信。首先，使用Divi的Lottie模塊添加平滑的背景動畫。然後，將其放在行和模塊後面，並具有Divi的位置設置。

例如，流動，現代的動畫或微妙的粒子效應幾乎沒有努力為您的網站增加深度。使用加載扳機即時撞擊，並調整播放模式以彈跳以產生迷人的效果。

下載文件

免費下載

加入Divi新聞通訊，我們將向您發送終極Divi著陸頁佈局包的副本，以及大量其他驚人和免費的Divi資源，提示和技巧。跟進，您將立即成為Divi大師。如果您已經訂閱，則只需在下面的電子郵件地址中輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

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

結論

在Divi 5中，Lottie模塊簡化了為網站添加輕巧的動態動畫。無縫集成到視覺構建器中，它可以以最小的努力實現專業動畫。靈活的控件，廣泛的自定義和免費的Lottie文件平台使您的網站變得容易。

準備嘗試Lottie模塊了嗎？在評論或社交媒體上分享您的想法或創作。