在 Elementor Pro 中製作專業預載器的完整指南，讓網站體驗更流暢

簡介

增強這種體驗的一種有效方法是加入預先載入程式 - 一個 動畫 或 圖片 頁面內容在背景載入時會出現。這可讓使用者在等待時有一個無縫的轉換，確保您的網站感覺完美且專業。在本指南中，我們將逐步介紹設定 預載程式 於 Elementor Pro可讓您顯示自訂動畫或品牌標誌，強化您的網站形象。

點擊進入 前往 Elementor Pro 正版購買頻道。

什麼是預先載入程式？

預載器是一種占位動畫或圖形，會在您的網站內容正在載入時顯示。這對於內容繁多、載入時間較長的頁面尤其有用。使用預先載入程式可減少感知載入時間，讓使用者保持投入，並避免他們看到部分載入的頁面，從而創造更好的使用者體驗。此外，預先載入器還可以展示您的品牌，為您的網站增添一點個性。

如何在 Elementor Pro 中建立預載器

步驟 1：建立標題範本

第一步是 建立標頭 範本 包括預先載入程式。將預載器放置在標頭範本中，就能確保它在網站上所有頁面上的顯示一致。

存取主題建立程式:

• 前往您的 Elementor 控制面板, 導航 範本, 並選擇 主題建立程式.

建立新的標題範本:

• 在 Theme Builder 中，找到 標頭 部分，然後按一下 + 圖示來建立新的範本。

• 選取範本，然後按一下插入即可進入頁面。

發佈範本:

• 設計好標頭後，按一下 發表.

• 提示顯示條件時，請選擇 整個網站 以確保預載器套用至網站上的每個頁面。

• 按一下 儲存與關閉.

步驟 2：新增容器並設定 CSS ID

現在，讓我們加入一個 容器 將放置預載動畫。設定唯一的 CSS ID 將允許我們稍後使用 CSS 和 JavaScript 針對此容器。

新增容器:

• 在新的標題範本中，新增一個單欄容器。

設定 CSS ID:

• 前往 進階 選項卡。

• 在 CSS ID 欄位，輸入 abc_preload.此 ID 將用於套用自訂 CSS 和 JavaScript，以控制預載器的行為。

步驟 3：新增圖示或圖片小工具

要建立 視覺元素 的預加载器，您可以添加一個 圖示 或 圖片 Widget 可顯示載入圖示或您的品牌標誌。

新增 Widget:

• 您可以在容器中加入 Icon 或 Image widget，視您要的是標準載入圖示或自訂標誌而定。

設定 Widget 的 CSS ID:

• 前往 進階 標籤，並將 CSS ID 設為 abc_loader.

圖示或圖片的樣式:

• 導覽到 風格 選項卡，並調整圖示或影像的大小，以符合您的設計。通常最好使用大小約為 1px.

步驟 4：新增 HTML Widget 以控制預載器

接下來，我們要新增一個 HTML widget，其中包含 JavaScript，用來控制預載器何時顯示、何時消失。這個腳本會在短暫延遲後隱藏預先載入程式，讓您的內容能順利載入。

新增 HTML Widget:

• 在圖示或圖片 widget 下方，新增 HTML widget。

插入 JavaScript 程式碼:

• 在 HTML widget 中，貼上下列 JavaScript 程式碼：

<script
  document.addEventListener('DOMContentLoaded', function () {
    setTimeout(function () {
      document.getElementById('abc_preload').style.display = 'none'；
      document.getElementById('content').classList.add('visible')；
    }, 2000); // 依需要調整延遲時間 (以毫秒為單位)
  });

此代碼會在頁面內容開始載入 2 秒後隱藏預載器。根據您網站的平均載入時間，您可以調整 2000 值來增加或減少延遲（以毫秒為單位）。

設定 HTML Widget 的 CSS ID:

• 在 HTML widget 的 進階 索引標籤，將 CSS ID 設為 abc_preloader_adds 以防止意外的間隔。

步驟 5：新增自訂 CSS 以設定預先載入程式的樣式

架構就緒後，我們會 新增自訂 CSS 來設定預載容器和載入動畫的樣式。

開啟自訂 CSS 設定:

• 按一下 頁面設定 圖示 (齒輪圖示)。

• 前往 進階 索引標籤，並開啟 自訂 CSS 節。

• 貼上下列 CSS 程式碼:

#abc_preload {
  position: fixed；
  top：0;
  left: 0；
  width: 100%；
  height: 100%；
  background: #fff；
  display: flex；
  align-items: center；
  justify-content: center；
  z-index：1000;
}

#abc_loader {
  border：8px solid #363636；
  border-top: 8px solid #3498db；
  border-radius: 50%；
  width: 50px；
  height: 50px；
  animation: spin 1s linear infinite；
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#abc_preloader_adds {
  display: none；
}

• 此代碼將會
  • 覆蓋整個頁面 以白色背景顯示，直到隱藏預載器為止。
  • 將裝載機置中 (#abc_loader) 在頁面上的垂直和水平位置。
  • 動畫 裝載器無限期旋轉。

步驟 6：發佈範本並測試預載器

發佈標題範本:

• 按一下 發表 並確認顯示條件為 整個網站 以確保預先載入程式在您的網站上啟用。

測試預載器:

• 請造訪您的網站觀看預載器的運作。如果感覺載入時間太短或太長，請視需要調整 JavaScript 程式碼中的延遲時間。

總結

在您的 Elementor Pro 網站中加入預載器，可在內容載入時創造無縫轉換，從而提升使用者體驗。這個動畫或圖形可以吸引使用者，縮短加載時間，並透過自訂的視覺效果（如標誌或載入圖示）加強您的品牌形象。設定過程包括

• 建立標頭範本。
• 為預載器新增容器。
• CSS 和 JavaScript 用來控制其外觀和行為。

可自訂且具備回應功能，精心設計的預載器可為您的網站增添光澤，確保在所有裝置上都能獲得流暢、專業的體驗。

常見問題

1.使用預先載入程式有什麼好處？

預先載入程式可減少感知載入時間、讓使用者保持投入，並為您的網站增添專業外觀，從而提升使用者體驗。它還有助於防止用戶看到部分載入的頁面，創造更流暢的瀏覽體驗。

2.我可以自訂預先載入的動畫嗎？

是的，您可以透過修改程式碼中的 CSS 自訂預先載入的動畫。您可以更改 #abc_loader 元素，使其包含不同類型的動畫、顏色、大小和其他視覺效果。如果需要，您可以用 GIF 或其他自訂動畫取代圖示。

3.如何調整預載器的持續時間？

在 JavaScript 程式碼中，您會看到 setTimeout 函式中的 2000 值，代表以毫秒為單位的延遲時間。您可以更改此值來增加或減少預先載入程式的可見時間。例如，將其變更為 3000 將使預載器顯示 3 秒。