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

tomsqum

2 個月前

簡介

增強這種體驗的一種有效方法是加入預先載入程式 - 一個動畫或圖片當頁面內容在背景載入時會出現。這可讓使用者在等待時有一個無縫的轉換，確保您的網站感覺完美且專業。在本指南中，我們將逐步介紹設定 預載程式 於 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；
}