在使用 Elementor 構(gòu)建網(wǎng)站時，為用戶創(chuàng)建流暢的視覺體驗至關(guān)重要。預(yù)加載器可以在頁面內(nèi)容完全加載前展示加載動畫。下面，我們將一步步地指導(dǎo)你如何在 Elementor Pro 中創(chuàng)建預(yù)加載器。

預(yù)加載器是什么？

預(yù)加載器通常是網(wǎng)站在內(nèi)容完全加載之前顯示的圖像或動畫。通過預(yù)加載器，可以展示品牌標志或特定動畫，讓用戶感受到更專業(yè)和流暢的瀏覽體驗。

步驟 1：創(chuàng)建標題模板

首先，需要創(chuàng)建一個標題模板，以便將預(yù)加載器應(yīng)用到網(wǎng)站的所有頁面。
操作步驟：

1. 導(dǎo)航至 Elementor 儀表盤中的 模板 > 主題生成器。

2. 點擊 標題 部分，然后點擊 + 圖標創(chuàng)建一個新的標題模板。

3. 完成模板的設(shè)置后，點擊 發(fā)布 并應(yīng)用顯示條件。

系統(tǒng)會彈出 顯示條件 窗口。在這里，選擇想要應(yīng)用該標題模板的頁面范圍。選擇 整個網(wǎng)站 將確保該標題在所有頁面上顯示。確認選擇并點擊 保存和關(guān)閉 以完成發(fā)布。

步驟 2：添加容器并設(shè)置 CSS ID

在標題模板內(nèi)，添加一個容器以容納預(yù)加載動畫。
操作步驟：

1. 在標題模板的編輯頁面，添加一個單列容器。

2. 點擊容器的高級選項卡，將 CSS ID 設(shè)置為 der_preload。

步驟 3：添加小部件圖標或圖像

為預(yù)加載器添加視覺效果，例如圖標或品牌標志。
操作步驟：

1. 在容器中，添加 圖標 或 圖像 小部件。

2. 在小部件的高級菜單中，將 CSS ID 設(shè)置為 der_loader。

3. 進入樣式菜單，調(diào)整圖標的大?。ńㄗh設(shè)置為 1）以適應(yīng)你的設(shè)計需求。

步驟 4：添加 HTML 小部件以運行腳本

接下來，添加 HTML 小部件并插入 JavaScript 代碼，以控制預(yù)加載器的顯示和隱藏。
操作步驟：

1. 在圖標或圖像小部件下方添加 HTML 小部件。

2. 插入以下代碼：

<script> document.addEventListener('DOMContentLoaded', function () { setTimeout(function () { document.getElementById('der_preload').style.display = 'none'; document.getElementById('content').classList.add('visible'); }, 2000); }); </script>

3. 在 HTML 小部件的高級選項中，設(shè)置 CSS ID 為 der_preloader_adds，以便隱藏該小部件，避免不必要的空白區(qū)域。

步驟 5：添加自定義 CSS

為了讓預(yù)加載器正常工作，添加一些 CSS 代碼來美化預(yù)加載效果。

1. 點擊頁面設(shè)置圖標，打開高級菜單。

2. 在自定義 CSS 欄中粘貼以下代碼：

#der_preload { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; align-items: center; justify-content: center; z-index: 1000; } #der_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); } } #der_preloader_adds { display: none; }

步驟 6：發(fā)布并測試預(yù)加載器

發(fā)布你的模板并設(shè)置顯示條件，以確保預(yù)加載器在指定頁面上正常顯示。
操作步驟：

1. 點擊 發(fā)布，在顯示條件彈出窗口中選擇 整個網(wǎng)站。

2. 保存設(shè)置并訪問你的網(wǎng)站頁面，檢查預(yù)加載器是否按預(yù)期工作。

總結(jié)

通過以上步驟，你已成功創(chuàng)建了一個自定義的 Elementor Pro 預(yù)加載器。還可以通過調(diào)整 CSS 和 JavaScript 代碼進一步個性化預(yù)加載效果，使其與品牌風格保持一致。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息