如何在 WordPress 中添加 Lottie 動畫（4 個簡單步驟）

在 WordPress 中使用 Lottie 動畫是美化頁面的好方法。 它們通常是輕量級和可定制的，因此可以幫助您創建引人入勝的內容，而不會損害您的用戶體驗 (UX)。 但是，您可能正在尋找一種輕鬆的方式將它們添加到您的站點。

幸運的是，這個過程比您想像的要容易。 通過使用像 Otter Blocks 這樣的插件，您只需點擊幾下即可添加和自定義 Lottie 動畫。 您還可以設置可見性條件，以便它們在正確的時間播放。

Lottie 動畫簡介

Lottie 是一種用於網絡動畫的開源文件格式。 它使您能夠為您的品牌創建自定義動畫並在您的網站上使用它們：

當然，您始終可以選擇 GIF，但這些文件會拖累您的網站。 Lottie 動畫比 GIF 小得多。 因此，它們可以幫助您讓您的網站更有趣，同時保持您的用戶體驗並提供快速加載時間。

此外，Lottie 動畫帶有很多自定義選項。 圖書館本身內容廣泛，可以訪問數以千計的元素、人物和插圖。 但是，您還可以交換顏色、更改顯示設置和添加可見性條件。

自定義動畫可以幫助您給訪問者留下深刻印象。 此外，它們還可以使您的網站看起來清新獨特。

如何將 Lottie 動畫添加到 WordPress（4 個步驟）

現在您對 Lottie Animations 有了更多的了解，讓我們看看如何將它們添加到您的 WordPress 網站：

第 1 步：安裝並激活 Otter Blocks

有很多方法可以在 WordPress 中添加 Lottie 動畫。 例如，您可以使用 HTML 和 JavaScript。 但是，此方法可能相當複雜。

或者，您可以使用 Lottie 動畫插件，儘管這可能與所有頁面構建器不兼容。 另外，它沒有提供很多風格選擇。

將 Lottie Animations 添加到您的站點的最簡單方法是使用像 Otter Blocks 這樣的插件：

此插件向您的站點添加新的內容塊和模板，包括用於 Lottie 動畫的塊。 它還通過自定義 CSS、動畫、可見性條件等擴展了塊編輯器的功能。 因此，它可以幫助您更有效地設計頁面並減少對頁面構建器的需求。

如果您升級到 Otter Blocks Pro，您將可以使用高級功能，例如特殊的 WooCommerce 塊和其他樣式設置。 但是，您不需要 Pro 版本即可使用 Lottie 動畫功能。

如果您想使用免費版本，請前往 WordPress 儀表板中的插件>添加新插件並蒐索“Otter Blocks：”

然後，單擊Install > Activate 。 您現在應該在塊編輯器中看到一系列新塊。

第 2 步：從 Lottie 庫中選擇一個動畫

現在您已經在您的網站上設置了 Otter Blocks，您可以前往 Lottie 庫選擇一個動畫。 要訪問這些設計，您需要創建一個免費帳戶。

創建個人資料後，導航至“發現”並選擇“免費即用型動畫” ：

在這裡，您可以瀏覽可用於網站、應用程序和社交媒體的 Lottie 元素庫：

當您找到要使用的動畫時，單擊該設計。 將出現一個彈出窗口，您可以在其中對動畫的外觀進行一些更改：

例如，您可以調整動畫速度並更改背景顏色。 如果你點擊Edit Layer Colors ，你將被帶到 Lottie Editor：

在這裡，您可以自定義設計任何部分的顏色。 只需單擊您想要更改的元素部分，轉到所有顏色並使用顏色選擇器應用新色調：

如果您進行了不喜歡的更改，請單擊屏幕左上角的撤消箭頭。

第 3 步：將 Lottie 動畫 URL 粘貼到您的 Otter Block 或上傳 Lottie 文件

對設計感到滿意後，您可以通過兩種方式將其添加到 WordPress：

1. 您可以復制 Lottie Animation URL 以將來自 LottieFiles 服務器的版本添加到您的站點。 您會在設計下方的動畫彈出窗口中找到它。
2. 您可以通過單擊右上角的下載按鈕並選擇dotLottie格式，將完成的 LottieFile 下載到您的計算機。 這將使您可以在服務器上託管文件。

然後，返回您的 WordPress 網站並打開頁面或張貼您要插入動畫的位置。

單擊以添加新塊並蒐索“Lottie Animations：”

將塊添加到您的頁面。 然後，選擇以下選項之一：

• 從 URL 插入——如果你想在 LottieFiles 的服務器上輸入 Lottie 文件的鏈接，請使用它。 您需要做的就是粘貼您從 LottieFiles 網站複製的Lottie 動畫 URL鏈接。
• 上傳——如果您從 LottieFiles 下載了實際的 dotLottie 文件，請使用它。 然後您可以將該文件上傳到您的 WordPress 網站。

接下來，按Enter鍵，動畫將出現在頁面上：

您現在可以保存更改並繼續執行最後一步。

第 4 步：使用 Otter Blocks 自定義您的動畫

現在您已經在 WordPress 中添加了 Lottie 動畫，您可以自定義設計和佈局了。 在“阻止”設置中，您會看到一系列顯示選項。

在TRIGGER下，您可以選擇自動播放、滾動、懸停或單擊。 在頁面上完成以下操作之一之前，動畫不會播放：

您還可以選擇切換動畫以循環播放。 此外，您可以使用滑塊調整動畫速度、反轉方向並更改設計的寬度。

如果要更改背景顏色，請單擊“背景”選項卡。 在這裡，您可以選擇默認的純色選項之一，使用顏色選擇器，或選擇漸變背景：

如果您前往Visibility Conditions ，您將能夠將動畫配置為僅在特定情況下出現：

例如，您可能希望該塊僅對登錄用戶可見，或者在特定日期顯示。 為此，請單擊添加規則組。 然後，選擇箭頭以打開設置：

在CONDITION下，使用下拉菜單配置您的可見性設置。 您可以添加多個條件並創建其他規則組。

開始使用 WordPress 中的 Lottie 動畫

回顧一下，以下是在 WordPress 中添加 Lottie 動畫的四個步驟：

如需更多改進原生 WordPress 編輯器的方法，您可以查看我們最好的 WordPress 塊插件的完整集合。

您對在 WordPress 中添加 Lottie 動畫有任何疑問嗎？ 在下面的評論部分讓我們知道！