使用自訂預載動畫強化您的 Elementor 網站

f 林

2 個月前

為何預先載入動畫很重要

預載器可以將您 Elementor 網站的第一印象轉變為令人難忘的事物。一個精心設計的預載器，可以為您的訪客增添一抹個性，讓他們在等待內容出現的過程中保持投入，而不是空白的頁面或可怕的加載旋轉器。在這篇文章中，我將引導您完成在 Elementor 中建立和自訂預載動畫的過程，並將其分解成任何人都可以遵循的簡單步驟。

想像一下，您點選了一個連結，卻被困在一個空白的螢幕前。很令人沮喪，對吧？預先載入動畫可以解決這個問題，它提供視覺回饋，顯示頁面正在積極載入--讓訪客保持興趣，並確信他們的體驗是值得的。預先載入動畫不僅能提高使用者的參與，還能透過視覺創意傳達您的品牌個性。

您可以使用的預載器樣式

在深入探討如何將預載器加入 Elementor 網站之前，讓我們先來探討一下您可以使用的不同樣式：

旋轉器動畫:經典之選。簡單而有效，旋轉的旋轉器會告訴使用者有事情正在發生。
- 使用個案:適用於簡約或科技導向的網站。這種風格直截了當且不會分散注意力，非常適合以簡約為主的網站。
- 自訂提示:使用您的品牌顏色來保持旋轉軸的一致性。
進度列:如果您想要傳達精確的載入百分比，讓訪客知道他們需要等待多久，這就是您的理想選擇。
- 使用個案:非常適合內容繁重的網站，如電子商務或有許多圖片的部落格。進度列讓使用者清楚知道載入進度，減少挫敗感。
- 自訂提示:自訂進度列的顏色，使其與您網站的主要色調一致，並考慮加入類似「正在載入中... 請稍候」的標籤，使其更具資訊性。
標誌動畫:您可以將您的標誌製成動畫，以保持品牌特色，同時展現一些創意。
- 使用個案:非常適合以品牌為重點的網站，例如代理商、時尚品牌或創意作品集。這種類型的預載器可強化品牌形象。
- 自訂提示:使用下列工具 後效果 或 LottieFiles 來為您的標誌製作輕量級 SVG 動畫。確保動畫循環流暢，且不會超過幾秒鐘。
文字淡入/淡出:像 "Loading......"（正在載入中...
- 使用個案:是個人部落格或社群網站的理想選擇。它能營造出溫暖、友善的感覺，讓使用者覺得更有聯繫。
- 自訂提示:自訂適合您品牌語氣的文字 - 使用類似「請抓緊，精彩內容即將呈現！」這樣獨特的文字來增添個性。

我們的目標是選擇一個符合您的品牌、與您網站風格相符的預載器，並讓您的使用者在載入內容時保持投入。

步驟說明：在 Elementor 中新增自訂預載器

現在，讓我們來瞭解一下如何在您的 Elementor 網站中加入自訂預載動畫的細節。如果您不是編碼專家，也不用擔心，這個方法對初學者很友好。

步驟 1：安裝預載外掛程式

在 Elementor 中加入預載動畫最簡單的方法就是使用外掛程式。一些最流行的選項包括

LoftLoader:高度客製化的外掛程式，可與 Elementor 完美整合。
預先載入 Plus:提供極大的靈活性來新增動畫和調整設定。
頁面載入:可廣泛控制設計和顯示的高級選項。

在本教程中，讓我們使用 預先載入 Plus 外掛為例，因為它對使用者友善，而且提供許多客製化功能，不需要碰觸任何程式碼。

步驟 2：安裝 Preloader Plus

導覽到 WordPress 控制面板.
- 登入您的 WordPress 管理面板。
- 從儀表板，您可以存取安裝外掛程式和自訂設定。
移至外掛程式 > 新增.
- 按一下 外掛程式 左側欄上的功能表，然後按一下新增.
在搜尋列中搜尋「Preloader Plus」。
- 在搜尋列中輸入「Preloader Plus」，然後按 Enter。
按一下 立即安裝 然後啟動.
- 找到外掛程式後，按一下 立即安裝.
- 安裝完成後，按一下啟動來啟用您網站上的外掛程式。

啟用後，您會在 WordPress 的儀表板中看到 Preloader Plus 設定。

步驟 3：配置預先載入設定

開啟 Preloader Plus 設定 從儀表板。
- 前往 設定 > 預先載入 Plus 來存取組態選項。
導覽到 一般設定 標籤。
- 在此，您可以啟用或停用預先載入程式，並設定其基本行為。
啟用預先載入程式 開啟切換開關。
- 這將根據您選擇的設定在整個網站啟動預先載入程式。

接下來，就該決定您希望預載器在何時何地啟用。您可能只希望在首頁使用，也可能希望在整個網站使用。

要顯示的頁面:選擇希望預先載入程式顯示的頁面（例如首頁、所有頁面等）。
- 提示:為了獲得更好的使用者體驗，請考慮只在需要較長時間載入大量內容的頁面上啟用預載器。
顯示頻率:選擇是否顯示在 僅第一頁載入 或訪客每次瀏覽新網頁時。
- 提示:僅在首次載入頁面時使用，可減少重複的載入動畫，從而改善整體瀏覽體驗。

步驟 4：選擇您的預載動畫

前往 風格設定 標籤。
- 在此標籤中，您可以設定預先載入程式的外觀。
- 範例:您可以訪問 https://example.com 看看標誌動畫預載器如何為創意產品組合提升品牌形象。
選擇預先載入類型:可選擇旋轉、進度列或自訂動畫。
- 根據您的品牌風格，選擇最適合您的預載器類型。
- 範例:對於電子商務網站，例如 https://shopdemo.com您可以使用進度列讓使用者隨時掌握資訊。
適用於 自訂預先載入程式如果您想要品牌動畫，請上傳您標誌的 GIF 或 SVG。
- 按一下上傳來新增自訂的預載動畫。

自訂品牌標誌的 GIF 可以讓您的訪客留下深刻印象。您可以使用以下工具 Canva 或 Figma 來製作簡單的標誌動畫。

提示:確保您的自訂動畫是輕量級的，以免拖慢載入過程。動畫檔案大小應小於 200KB 以獲得最佳效能。

步驟 5：調整設計與時間

背景顏色:設定背景顏色以符合您的品牌色調。您可以使用與標誌形成對比的顏色，讓標誌更突出。
- 說明:按一下 背景顏色 部分，並選擇與您的網站主題相輔相成的顏色。
動畫長度:設定動畫播放的時間長度。通常，保持在 3 秒 最能留住使用者的注意力，而不會產生挫敗感。
- 提示:測試不同的持續時間，找出預載器感覺既不太快也不太慢的最佳位置。
頁面淡入/淡出:使用淡入/淡出效果，在預載器和實際內容之間提供更平滑的過渡。
- 提示:輕微的淡入效果可以讓過場感覺更精緻，不那麼突兀。

將 Preloader 與 Elementor 整合以獲得更大的控制權

如果您想對預載器出現的時間和地點進行更細粒度的控制，您可以將 Preloader Plus 與 Elementor 整合，使用 Elementor 的自訂 CSS 功能。

在 Elementor 中、 編輯頁面 您要新增預先載入程式的位置。
- 導覽到要編輯的頁面，然後按一下 使用 Elementor 編輯.
開啟進階索引標籤，然後往下捲動至 自訂 CSS.
- 按一下進階選項卡，然後往下捲動，找到 自訂 CSS 領域。
新增 CSS 程式碼，為頁面的特定區段建立預載動畫。例如

/* 預載器的自訂 CSS */
.preloader-section {
  animation: fadeIn 2s ease-in-out；
}

@keyframes fadeIn {
  0% { 不透明度: 0; }
  100% { 不透明度: 1; }
}

提示:使用此功能僅在需要較長載入時間的關鍵部分（如圖片庫或視訊嵌入）中新增預載器。這有助於保持頁面其他部分的快速反應。

測試並優化您的預先載入程式

現在您已設定好預載器，測試它是很重要的。以下是一些提示：

在不同裝置上檢查:使用下列工具 瀏覽器堆疊 查看您的預先載入程式在行動、平板電腦和桌上型電腦檢視上的外觀。確保它能在所有裝置上提供一致的體驗。
- 說明:開啟 BrowserStack，選擇您要測試的裝置，並導航到您的網站。
監控載入速度:請記住，預先載入器應該在不顯著減慢頁面速度的情況下增強使用體驗。使用以下工具 GTmetrix 或 Google PageSpeed Insights 以確保網站的載入速度得到最佳化。
- 提示:如果您的預先載入程式對載入時間造成負面影響，請考慮最佳化動畫檔案大小，或將預先載入程式的使用限制於特定頁面。
避免過度使用:預載動畫很有效，但在每個頁面上過度使用它們會讓訪客感到挫敗。有策略性地使用它們，特別是在需要額外時間載入的較重頁面上。
- 提示:使用下列工具測試特定頁面上有預載器和沒有預載器的使用者行為 Hotjar 看看預先載入器會改善還是妨礙使用者體驗。

最後的感想：讓您的 Elementor 網站脫穎而出

精心設計的預載器不僅僅是一個載入螢幕，它還是一個強大的品牌工具和用戶體驗增強器。為了讓您的 Elementor 網站更上一層樓，不要只停留在添加預載器。持續優化您網站的效能，並考慮每一個互動 - 從預載器到頁面動畫 - 如何增加您的品牌故事。

有了這些步驟和秘訣，您現在就能擁有建立自訂預先載入程式所需的一切，不僅能讓訪客投入其中，還能強化您的品牌形象。

目錄