如何在 WordPress 中創建動畫 Particle.js 背景

您想為您的 WordPress 網站添加動畫粒子背景效果嗎？

通過向您的站點添加帶有 particle.js 的背景，您可以使重要內容脫穎而出並提高 WordPress 站點的交互性。 在本文中，我們將向您展示如何輕鬆地將粒子背景添加到任何 WordPress 頁面。

可以把它想像成數字煙花表演，其中每個粒子都像一個小煙花，可以移動和改變顏色以響應用戶交互或頁面上的其他事件。

為什麼向 WordPress 添加 Particle.js 背景？

粒子背景可以為您的 WordPress 網站增加額外的視覺興趣和交互性，使其對訪問者更具吸引力和難忘。

例如，如果您經營創意機構或設計作品集，則可以使用 Particle.js 創建引人注目的視覺效果，展示您的創造力和設計技能。 您可以使用粒子背景為您的標題、英雄部分或任何其他網站部分創建動態且視覺上吸引人的背景。

Particle.js 還可以創建獨特且富有創意的加載動畫，讓訪問者在等待您的網站加載時保持參與和娛樂。 這對於具有大圖像或視頻的區域尤其重要，這些區域可能需要一段時間才能加載較慢的連接。

總的來說，Particle.js 是一種很好的方式，可以為您的 WordPress 網站添加互動性和活力感，使其對訪問者來說更具吸引力和難忘。

如何將 Particle.js 背景添加到我的 WordPress 網站？

有多種方法可以將粒子背景添加到您的 WordPress 網站，即使您是初學者也是如此。

首先，您可以使用具有內置粒子效果功能的 WordPress Particle.js 插件或 WordPress 頁面構建器。 我們向初學者推薦此選項，因為它通常需要零編碼知識或技術技能。

另一種向站點添加粒子效果的方法是使用包含 particle.js 的 WordPress 主題。 如果您要創建一個新站點並且仍然需要 WordPress 主題，這會很方便。

最後一個選項是使用自定義代碼手動將粒子效果添加到您的網站。 如果您熟悉編碼，我們只推薦此選項。

在本指南中，我們將堅持使用最簡單的選項：使用 WordPress 插件。 讓我們開始吧！

使用 SeedProd 向 WordPress 部分添加粒子背景

首先，我們將使用一個 WordPress 頁面構建器插件，其功能內置了 particles.js 庫：SeedProd。

SeedProd 是 WordPress 最好的網站和頁面構建器，擁有超過 100 萬用戶。 您可以使用其拖放構建器創建自定義 WordPress 主題、登錄頁面、WooCommerce 網站和任何其他佈局，而無需編寫代碼。

借助數百個預製頁面模板、設計元素和內置粒子背景，只需幾分鐘即可創建令人驚嘆的粒子動畫。

按照以下步驟使用 SeedProd 將粒子背景添加到您的站點。

步驟 1. 安裝並激活 SeedProd

首先，單擊此處開始使用 SeedProd 並下載插件。 然後在您的 WordPress 網站上安裝並激活該插件。

如果您需要這方面的幫助，您可以查看我們關於安裝 SeedProd 的文檔。 它會引導您完成安裝過程以及查找和激活您的插件許可證密鑰。

第 2 步。選擇預製模板

下一步是選擇預製模板。 您選擇的模板類型取決於您是要製作 WordPress 主題還是登錄頁面。

使用 SeedProd 的 Theme Builder，您可以從頭開始構建一個完整的 WordPress 主題。 但是，選擇此選項將覆蓋您現有的網站設計。

或者，登陸頁面構建器可讓您在不觸及現有主題的情況下創建任何頁面。 對於本指南，我們將使用此選項。

從您的 WordPress 管理儀表板，導航至SeedProd » Landing Pages 。 在此頁面上，您會在頂部看到各種頁面模式以及創建您自己的自定義頁面的選項。

繼續並單擊“添加新登陸頁面”按鈕。

在這裡，您可以從數百個預製登陸頁面模板中進行選擇。

您可以通過單擊頂部的選項卡按類型過濾它們，包括：

• 即將推出
• 維護模式
• 404頁面
• 銷售量
• 網絡研討會
• 鉛擠壓
• 謝謝
• 登錄

要選擇模板設計，請單擊橙色複選標記圖標。

這將打開一個彈出窗口，您可以在其中輸入您的著陸頁名稱。 SeedProd 會自動為您生成登陸頁面 slug (URL)，但如果您願意，可以更改它。

當您對這些詳細信息感到滿意時，請單擊保存並開始編輯頁面按鈕。

導航頁面構建器

您的模板現在將在 SeedProd 的拖放可視化編輯器中打開。 您會在左側看到一個包含塊、部分和設置的面板，在右側看到一個實時預覽。

單擊預覽上的任意位置可以查看和自定義該元素的設置並實時查看更改。

例如，單擊主標題部分會在左側面板中打開其設置。 從那裡，您可以選擇一個新的背景圖像，選擇不同的背景位置，並使用顏色疊加使背景變暗。

此外，您可以通過將新元素從左側塊面板拖​​放到適當位置來向模板添加新元素。

第 3 步。啟用和自定義粒子背景

正如我們之前提到的，SeedProd 在頁面構建器設置中內置了 particle.js。 目前，您可以在任何頁面部分使用此功能。

為此，請單擊任何部分，直到看到紫色邊框，然後選擇“高級”選項卡。

現在找到Particle Background標題，將其展開，然後將Enable Particle Background開關切換到打開位置。

立即，您會在部分背景上看到多邊形動畫效果。

如果單擊“樣式”下拉菜單，則可以將粒子更改為：

• 空間
• 雪
• 雪花
• 聖誕節
• 萬聖節
• 風俗

選擇粒子樣式後，您可以設置粒子的不透明度、流向和顏色。

如果您想更好地控製粒子自定義，請啟用“高級設置”切換。

在這裡，您可以增加粒子數量，改變粒子大小，並使用選擇器調整粒子移動速度。

注意：增加粒子數量會影響您的頁面速度。 最好將此設置保持盡可能低以獲得最佳性能。

在同一個面板中有一個選項可以啟用粒子懸停效果。 如果啟用它，當您將光標移到粒子上方時，粒子會散開。 但是，您只能在頁面構建器之外預覽頁面時看到這種效果。

添加自定義粒子背景

如果要添加自定義粒子效果，只需從“樣式”下拉菜單中選擇“自定義”選項即可。 如您所見，說明表明您需要添加自定義 JSON 文件。

幸運的是，說明中包含指向 vincentgarreau.com/particle.js 的鏈接，這是一個 JavaScript 庫，可讓您通過指向和單擊來為粒子背景設置自定義屬性。

在粒子 json 配置面板中，您可以選擇自定義形狀、密度、大小、速度、顏色等。 您還可以為背景設置自定義 CSS 並啟用移動效果。

如果您對粒子設置感到滿意，請單擊“下載當前配置”標題。 這會將配置文件下載到您的計算機。

現在打開並複製文件中的代碼，並將其粘貼到頁面構建器的空框中。

您的自定義粒子背景將立即出現！

從那裡開始，繼續自定義您的著陸頁，直到它看起來完全符合您的要求。 請記住單擊保存以存儲您的更改。

第 4 步。發布您的更改

一旦您對登錄頁面的自定義設置感到滿意，您就可以開始使用它了。

為此，請單擊“保存”下拉箭頭，然後單擊“發布” 。

現在您可以訪問您的登錄頁面以查看正在運行的粒子背景。

使用粒子背景 WP 插件

將粒子背景添加到您的 WordPress 網站的另一種方法是使用粒子背景 WP 插件。

這是一個免費的 WordPress particle.js 插件。 但是，它的自定義選項不像 SeedProd 那樣簡單或廣泛。

首先，您需要在您的 WordPress 網站上安裝並激活 Particle Background WP。 然後，單擊 WordPress 管理面板中的粒子背景菜單項。

在第一個面板中，您可以在首頁和博客頁面上或使用簡碼顯示粒子背景橫幅。 我們已經為我們的博客頁面啟用了橫幅。

下面是一個內容區域，您可以使用 WYSIWYG 編輯器進行自定義。 您可以在此處輸入橫幅標題、描述和號召性用語。

下一個面板包括粒子自定義選項，包括密度、顏色和背景顏色。 您還可以輸入自定義 CSS。

保存更改後，您可以訪問您的博客頁面並看到帶有粒子背景的橫幅。

您還可以使用短代碼在任何頁面或帖子上添加相同的橫幅。 然而，重要的是要注意您的橫幅將位於內容之上，而不是像在 SeedProd 上那樣位於內容之後。

將 Particle.js 添加到 WordPress 的更多方法

如果您仍在尋找其他方式將 particle.js 添加到您的 WordPress 網站，您可能會發現以下工具很有用：

• Elementor 的終極插件：使用此插件，您可以向使用 Elementor 頁面構建器插件製作的頁面添加粒子效果。
• Beaver Builder 的 Ultimate Addons：將粒子動畫添加到使用 Beaver Builder 插件製作的頁面。
• 手動：如果您熟悉 HTML、PHP、JavaScript 和其他編碼語言，我們只推薦這種方法。

最終，將粒子背景添加到 WordPress 的最簡單方法是使用 SeedProd。 它易於使用，需要零編碼，並且有大量的自定義選項，只需點擊幾下即可設置。

經常問的問題

你有它！

我們希望本指南能幫助您了解如何在 WordPress 中創建粒子背景。 您可能還喜歡本指南，了解最好的 WordPress 照片庫插件，以補充您的新粒子背景。

謝謝閱讀。 請在 YouTube、Twitter 和 Facebook 上關注我們，獲取更多有助於您發展業務的內容。