如何在WordPress中顯示數字計數動畫

07/29/2022

為什麼要在WordPress中添加數字計數動畫?

在您的WordPress網站上顯示數字計數器是一種吸引用戶並抓住他們注意力的好方法。您可以用它來展示網站上的重要統計數據,比如每月的訪問量或博客上的文章數量。同樣,您可以使用動畫數字計數來展示已完成的項目、滿意的客戶數量、客戶數量、您企業達成的里程碑以及其他重要信息。例如,OptinMonster使用一個數字計數器來顯示每月優化的訪客會話數。

在WordPress中添加和自定義數字計數器通常需要編輯代碼。這對於不會寫代碼的初學者來說可能會比較麻煩。話不多說,讓我們來看看如何在WordPress中顯示動畫數字計數。我們將介紹兩種使用高級網站建設器和免費插件的簡單方法。您可以點擊以下鏈接跳到您的首選部分:

  • 方法1:使用SeedProd顯示數字計數動畫
  • 方法2:使用Counter Number顯示數字計數動畫

方法1:使用SeedProd顯示數字計數動畫

在WordPress中添加動畫數字計數器的最佳方法是使用SeedProd。這是最好的WordPress頁面建設器,提供了許多自定義選項。在本教程中,我們將使用SeedProd專業版,因為它包含了高級區塊,並允許您添加計數器。您也可以試用免費的SeedProd Lite版本。首先,您需要安裝並啟用SeedProd。如果您需要幫助,可以參閱我們關於如何安裝WordPress插件的指南。激活後,SeedProd將要求您輸入許可證密鑰。您可以在您的帳戶區域和購買確認電子郵件中找到許可證密鑰。

接下來,您需要在WordPress管理面板導航到SeedProd » Landing Pages。SeedProd允許您創建專業設計的自定義登陸頁面,包括即將推出頁面、維護模式頁面、登錄頁面和404頁面。繼續點擊“添加新登陸頁”按鈕。

之後,您可以選擇SeedProd模板作為您的登陸頁面並顯示動畫數字計數器。只需將鼠標懸停在模板上並點擊橙色勾選按鈕。

現在將打開一個彈出窗口,輸入頁面名稱和頁面URL。然後,點擊“保存並開始編輯頁面”按鈕。

這將啟動SeedProd的拖放式構建器。接下來,您可以通過添加不同的區塊或點擊頁面上的現有元素來編輯頁面模板。要添加動畫數字計數,只需從左側菜單中拖動計數器區塊並將其放入模板中。

之後,您可以選擇計數器區塊進行進一步自定義。例如,可以更改計數器的起始和結束數字、輸入數字前綴和後綴、編輯標題等。

接下來,您可以切換到左側計數器區塊設置下的“高級”選項卡。在這裡,您會找到更多選項來更改計數器區塊的樣式、顏色、間距、字體等。

接下來,點擊頂部的“保存”開關。您現在可以從下拉菜單中選擇“發布”。

要查看動畫數字計數器的效果,請訪問您的WordPress網站。這是我們在演示站點上看到的效果。

方法2:使用Counter Number顯示數字計數動畫

另一種在WordPress中添加數字計數動畫的方法是使用Counter Number插件。這是一個免費的WordPress插件,易於使用並允許您為站點創建簡單的數字計數器。首先,您需要安裝並啟用Counter Number插件。更多詳情,請參閱我們關於如何安裝WordPress插件的指南。激活後,您可以從WordPress儀表板導航到Counter Numbers » 所有計數器,然後點擊“添加新計數器”按鈕。

接下來,您可以輸入計數器的標題。在免費版本中,您只能選擇普通設計模板。如果您需要更多模板和自定義選項,我們建議使用SeedProd。

然後,您可以添加計數器詳細信息。有選項來編輯計數器標題、選擇圖標和輸入計數器數值。您可以通過點擊底部的“添加新計數器框”按鈕添加任意多的計數器數量。

此外,您還可以從右側面板獲得更多自定義選項。例如,該插件允許您更改計數器標題顏色、數字顏色、圖標大小、字體大小、字體家族等。

做出更改後,滾動回頂部並發布您的計數器。

接下來,您可以從WordPress儀表板導航到Counter Numbers » 所有計數器。繼續並複製計數器短碼。它看起來類似於這樣:[COUNTER_NUMBER id=41]

之後,您可以將動畫數字計數放在網站的任何位置,包括文章和頁面以及側邊欄。只需添加一個新文章或頁面或編輯現有文章。在內容編輯器中,只需點擊“+”號並添加一個短碼區塊。

然後,您可以在區塊中粘貼計數器短碼。從這裡,預覽並發布您的頁面或文章以查看動畫數字計數的效果。

我們希望這篇文章能幫助您了解如何在WordPress中顯示數字計數動畫。您還可以查看我們的教程,了解如何在WordPress中添加動畫背景以及我們專家挑選的最佳WordPress主題構建器來設計您的完美主題。如果您喜歡這篇文章,請訂閱我們的YouTube頻道以獲取WordPress視頻教程。您也可以在Twitter和Facebook上找到我們。



Related Posts

  • 2024-08-04
  • WordPress 教学

不喜欢 WordPress 4.3 引入的格式化快捷键?觉得有点烦人?最近,有用户问我们如何在 WordPress 中禁用视觉编辑器格式化快捷键。在本文中,我们将向您展示如何做到这一点。

閱讀更多
  • 2024-07-31
  • WordPress 教学

你在 WordPress 网站上看到 503 服务不可用错误吗?503 错误是因为服务器无法处理请求,通常是由于服务器过载或维护。而这个错误不会告诉你具体原因,这对于初学者来说非常令人沮丧。本文将向你展示如何修复 WordPress 中的 503 服务不可用错误。

閱讀更多
  • 2024-07-30
  • WordPress 教学

管理一个企业需要大量的工作。如果您无法正确维护您的 WordPress 网站,可能会迅速看到流量和销售额下降的现象。幸运的是,您可以聘请虚拟助手 (VA) 来帮助管理您的网站。本文将教您如何聘请 WordPress 虚拟助手,以便您可以专注于业务中最重要的活动。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>