你想在WordPress中添加CSS動畫嗎？動畫是吸引訪問者注意力并突出顯示頁面最重要內容的好方法。他們還可以鼓勵客戶點擊您的號召性用語按鈕和鏈接。在本文中，我們將向您展示如何在WordPress中輕松添加CSS動畫。

 為什么要在WordPress中添加CSS動畫？

您可以使用 CSS 動畫將訪問者的注意力吸引到頁面的不同部分。例如，如果您有一個在線商店，那么動畫可以突出顯示產品最重要的功能或最大的賣點。

動畫還將使您的CTA脫穎而出，這可以幫助您實現(xiàn)特定目標，例如吸引更多人訂閱您的電子郵件通訊。

您可以將 CSS 動畫添加到主題或子主題的樣式表中。但是，這需要花費大量的時間和精力，如果您犯了錯誤，它可能會破壞您網站的設計甚至功能。

 方法 1.如何輕松制作任何WordPress塊的動畫（快速簡便）

添加簡單 CSS 動畫的最簡單方法是使用塊動畫。

這個免費的插件允許您向任何塊添加入口動畫，而無需編寫任何 CSS 行。它還具有鍵入動畫和自動收報機樣式效果，您可以將其添加到文本和數(shù)字中。

首先，您需要安裝并激活插件。

激活后，在WordPress編輯器中打開任何頁面或帖子。然后，只需單擊要制作動畫的塊，然后在右側菜單中選擇“塊”選項卡。

您會看到此菜單上有一個新的“動畫”部分。

只需單擊以展開“動畫”部分，您將看到三個不同的選項：動畫，計數(shù)動畫和鍵入動畫。

“動畫”是在頁面加載時播放一次的短效果。要將這種入口動畫添加到您的WordPress博客中，只需單擊“動畫”旁邊的下拉菜單。

這將打開一個菜單，您可以在其中選擇要使用的動畫。

WordPress編輯器將顯示動畫的預覽，因此您可以嘗試不同的選項以查看最佳外觀。

默認情況下，入口動畫將在頁面加載后立即播放，但如果您愿意，可以添加延遲。如果您在同一頁面上使用多個動畫，那么您甚至可以使用延遲來錯開動畫，這樣它們就不會讓人不知所措。

只需打開“延遲”下拉菜單，然后從列表中選擇一個時間。

您還可以使用“速度”下拉菜單使動畫更快或更慢。

當您嘗試不同的設置時，您可以隨時通過單擊“重播動畫”來預覽動畫。

該插件還具有“計數(shù)動畫”和“鍵入動畫”。

鍵入動畫允許您對文本進行動畫處理，而計數(shù)動畫則為數(shù)字添加自動收報機樣式效果。這些動畫適用于任何支持文本或數(shù)字的塊，因此您可以使用它們?yōu)榘粹o、圖像標題、標題等添加動畫效果。

若要添加這些效果中的任何一個，請首先突出顯示要設置動畫的文本或數(shù)字。然后，單擊小工具欄中的向下箭頭。

您現(xiàn)在可以從下拉菜單中選擇“計數(shù)動畫”或“鍵入動畫”。

如果這些選項灰顯，請確保您已突出顯示正確的內容。例如，如果您只突出顯示了文本，您將無法選擇“計數(shù)動畫”。

添加動畫后，您可以使用小彈出窗口中的下拉菜單更改速度并添加可選延遲。

例如，在下圖中，我們使用一秒的延遲。

當您準備好使CSS動畫實時時，請單擊“發(fā)布”或“更新”按鈕。現(xiàn)在，如果您訪問WordPress網站，您將看到動畫直播。

 方法 2.如何將 CSS 動畫添加到自定義頁面（推薦）

如果您想將簡單的動畫添加到內置的WordPress塊中，那么塊動畫是一個不錯的選擇。但是，如果您想真正吸引訪問者的注意力，讓人們留在您的網站上并獲得更多轉化，那么我們建議您使用 SeedProd。

SeedProd 是最好的頁面構建器插件，可讓您使用簡單的拖放編輯器創(chuàng)建漂亮的登錄頁面、銷售頁面等。

它還帶有一個“動畫標題”塊，您可以使用它來創(chuàng)建旋轉和突出顯示的動畫標題。

盡管名稱如此，但您可以使用動畫標題塊為任何文本添加動畫效果，包括號召性用語、副標題或您想要強調的任何其他文本。

SeedProd 還帶有 40 多種入口動畫，您可以將其添加到任何塊中，包括圖像、文本、按鈕、視頻等。

您甚至可以通過單擊幾下來為整個部分和列添加動畫。通過這種方式，您可以在幾分鐘內創(chuàng)建引人入勝的動畫頁面。

如果您使用動畫來獲得更多轉化和銷售，那么 SeedProd 與 WooCommerce 集成并支持您可能已經用于推廣網站的許多頂級電子郵件營銷服務。

如何設置 SeedProd 頁面生成器

您需要做的第一件事是安裝并激活SeedProd。

激活后，您需要輸入許可證密鑰。

您可以在SeedProd網站上的帳戶下找到此信息。添加許可證密鑰后，只需單擊“驗證密鑰”。

創(chuàng)建自定義頁面設計

要開始使用，請轉到 種子生產 ? 登陸頁面，然后單擊“添加新登陸頁面”。

在下一個屏幕上，系統(tǒng)會要求您選擇一個模板。

SeedProd 附帶了 180 多個漂亮的模板，這些模板分為不同的類別，例如 404 頁模板和自定義 WooCommerce “謝謝”頁面。

在本指南中，我們將向您展示如何創(chuàng)建帶有動畫文本和入口動畫的銷售頁面，但無論您創(chuàng)建哪種類型的頁面，步驟都是相似的。

只需單擊任何選項卡即可查看該類別中的不同模板。

當您找到要使用的模板時，只需將鼠標懸停在其上，然后單擊復選標記圖標。

我們在所有圖片中使用“禪宗銷售頁面”模板，但您可以使用任何模板。

接下來，您需要為頁面指定標題。

SeedProd 將根據(jù)頁面標題自動創(chuàng)建一個 URL，但您可以將其更改為所需的任何內容。例如，將相關關鍵字添加到URL通常可以改善WordPress SEO，并幫助頁面出現(xiàn)在相關搜索結果中。

當您對標題和URL感到滿意時，請單擊“保存并開始編輯頁面”。

這將加載 SeedProd 拖放頁面編輯器。

在右側，您將看到頁面設計的實時預覽，左側有一些設置。

SeedProd 附帶了許多可以添加到設計中的塊，包括允許您添加社交分享按鈕、視頻、聯(lián)系表單等的塊。

如何將動畫文本添加到WordPress

要向頁面添加一些動畫文本，請找到動畫標題塊并將其拖到頁面設計上。

有兩種方法可以為標題添加動畫效果。首先，“突出顯示”樣式會向文本添加形狀動畫，例如圓形或帶下劃線的鋸齒形。

您可以使用此動畫將注意力吸引到標題中的特定單詞或短語上。這可以通過突出顯示最重要的內容來使您的標題更易于閱讀和理解。這也是引起人們對號召性用語的關注的好方法。

突出顯示的樣式還具有一些刪除線形狀。

您可以使用刪除線來創(chuàng)建有趣且引人注目的效果，或者它可以簡單地為您的設計增添一些樂趣。

要創(chuàng)建突出顯示的動畫，只需打開“樣式”下拉菜單并選擇“突出顯示”。

接下來，打開“形狀”下拉菜單并選擇一個形狀。當您單擊某個形狀時，SeedProd 將顯示該動畫的預覽，因此您可以嘗試不同的形狀以查看您最喜歡哪一個。

SeedProd還具有“旋轉”動畫樣式，可為文本添加過渡效果。

通常，動畫文本是訪問者在頁面加載時首先看到的內容，因此這是突出顯示最重要的文本的好方法。

要創(chuàng)建過渡動畫，只需打開“樣式”下拉菜單，然后單擊“旋轉”。

然后，您可以打開“動畫”下拉菜單，然后選擇要使用的過渡類型，例如淡入淡出、縮放或滾動。同樣，SeedProd 將在頁面編輯器中播放動畫，因此您可以嘗試不同的效果以查看您喜歡的效果。

無論您是創(chuàng)建“突出顯示”還是“旋轉”動畫，都可以在動畫文本之前和之后添加文本。

只需輸入“標題之前”和“標題之后”字段即可。在“文本”字段中，添加要添加動畫效果的字詞或短語。

如果要為整個標題添加動畫效果，只需將“標題之前”和“標題之后”字段留空即可。

默認情況下，SeedProd 將循環(huán)播放動畫，一些訪問者可能會覺得很煩人。

要僅播放一次動畫，請單擊以停用“無限循環(huán)”開關。

默認情況下，動畫將在 1200 毫秒延遲后播放 8000 毫秒。

要使用不同的值，請在“持續(xù)時間”和“延遲”字段中輸入。例如，可以使用較短的持續(xù)時間使動畫更快。

您可能還希望設置文本樣式。例如，您可以更改字體大小和對齊方式。

如果您對動畫標題的外觀感到滿意，請繼續(xù)并單擊“保存”按鈕以存儲您的更改。

在WordPress中添加入口動畫

入口動畫在頁面首次加載時播放，因此它們是吸引訪問者注意力的好方法。

您還可以使用它們來突出顯示訪問者首先應該查看的內容。例如，如果您有一個在線市場，那么您可以為產品的英雄形象或宣傳黑色星期五促銷的橫幅制作動畫。

在 SeedProd 編輯器中，只需單擊要制作動畫的內容，然后選擇左側菜單中的“高級”選項卡。

然后，您可以繼續(xù)并單擊以展開“動畫效果”部分。

之后，只需從“入口動畫”下拉列表中選擇一個動畫。

現(xiàn)在，您只需按照上述相同的過程即可將入口動畫添加到任何塊、部分或列。

在WordPress中發(fā)布您的CSS動畫

如果您對頁面的設置方式感到滿意，請單擊“保存”按鈕上的下拉菜單，然后選擇“發(fā)布”。

您現(xiàn)在可以訪問此頁面以實時查看CSS動畫。