如何向 Elementor 添加預加載器

預加載器（或加載動畫）顯示網頁加載過程的進度。 它們只持續幾秒鐘，而服務器和瀏覽器協同工作以呈現您的頁面，但可以服務於一個重要目的——在您的網站加載內容時讓訪問者留在您的網站上。

沒有它們，如果你的網站很大，訪問者可能會被迫在那裡觀看頁面渲染的醜陋過程，首先是 HTML 內容，然後是 CSS，然後是字體，然後是圖像……這是一個糟糕的第一印象，如果需要很長時間，訪問者可以輕鬆單擊“返回”按鈕，然後轉到 Google 上的第二個鏈接。 不好！

加載動畫既有趣又令人愉悅。 讓我們看看如何將預加載器加載到 Elementor。

使用插件向 Elementor 添加預加載器

如果您正在尋找一個插件來為您的 Elementor 網站添加預加載動畫，那麼最好的就是 LoftLoader。

在過去的幾年裡，我們在許多項目中都使用了它——從一個想要在加載時顯示其徽標的簡單公司網站，到我們的 SpeedOpp 報告工具（輸入一個 URL 以查看它的運行情況）。

我們之所以推薦將此插件與 Elementor 一起使用，是因為我們過去曾使用過它，而且效果很好。 設置起來也非常簡單。 就是這樣。

使用 Loftloader 向 Elementor 添加預加載器

第一步，從 Envato 獲取插件文件。 我們選擇了 LoftLoader 的專業版，因為它比有限的 Lite 版本具有更多的功能。 如果您只是在尋找一個非常基本的清晰加載器，您無法真正自定義（但它是免費的），請向下滾動到下一部分。 但是，如果您想添加大量自定義，這是您最好的選擇。

在您的 WordPress 網站上安裝後，單擊自定義按鈕（或通過外觀導航到它，自定義）。 這將加載 Preloader Customizer。

您現在有幾個選項可以自定義。 讓我們來看看我們如何在客戶的 Elementor 網站上設置 LoftLoader。

首先，確保啟用了預加載器。 然後，設置顯示規則。 我們通常將預加載器設置為在元素或主頁上運行，如果網站相當繁重並且需要一段時間才能加載，我們將在全局範圍內啟用它。

如果需要，您還可以排除頁面和帖子。 當涉及到登陸頁面和類似的東西時，這很有幫助。

然後，設置背景。 我們通常使用適合客戶品牌的純色深色。 如有疑問，請選擇灰色。 您還可以選擇一個圖像（如果您使用的是在 Photoshop 之類的工具中創建的背景，這很好）。

預加載器最重要的設置之一包含在後台設置中； “結束動畫”。 我們總是選擇淡入淡出，但你有很多選擇——從分裂到縮小。

下一個要操作的設置是實際的加載圖標本身。 您可以從一堆預設中進行選擇，但是使該工具如此強大的原因在於您可以上傳自己的文件。 這些可以包括動畫 GIF、公司徽標或其他任何內容。

還可以添加html代碼，這樣就可以集成彩票等複雜的動畫了。 超級強大！

對於我們的客戶加載器，我們通常會選擇深色背景、白色公司徽標或定制設計的加載 gif ...... 像這樣：

還有其他不太重要的選項，例如進度加載欄、顯示加載頁面所需的百分比或時間、可以在圖標/徽標下方或上方顯示的自定義消息等等。

還有一些實用程序真正使它成為任何 WordPress 網站（包括 Elementor）的絕佳解決方案。

生成要放置在任何頁面上的簡碼（使用 Elementor 中的簡碼塊），為預加載器的內部元素設置動畫，將加載動畫應用於特定元素（不是整個頁面——與 Elementors 自定義 ID 和類配對時很有用），在特定設備上切換，並設置最小/最大加載時間。

完成配置後，只需單擊“發布”，您的殺手級預加載器就會顯示在您選擇的頁面上。

使用 Preloader Plus 將 Preloader 添加到 Elementor

如果您正在尋找免費（但更有限的解決方案），我們聽說過 Preloader Plus 的好消息。

安裝插件，您將能夠切換背景、圖標、進度條等。

Loftloader 有一個精簡版，但它非常有限。 Plus 更易於使用，並具有更多功能。

當談到我們的 Elementor 客戶端網站時，我們為 LoftLoader 而不是 Preloader Plus 揮霍的主要原因是因為 Loft 具有大量功能，這些功能不包含在任何免費插件中。

此外，如果我們的客戶想要更改任何預加載器設置，即使他們不了解代碼也很容易做到（這對我們來說尤其必要，因為我們宣傳我們的網站非常易於使用）。

使用代碼向 Elementor 添加預加載器（複製/粘貼）

我們已經介紹了插件，但這實際上是我們推薦的向 Elementor 添加預加載器的方法。

如果您採用編碼路線，您將獲得靈活性、可控性的好處，而且最重要的是它是完全免費的。 您可能在想，我對此一無所知，我將堅持使用該插件，但這在任何 Elementor 網站中實現起來都相當簡單，並且會為您省錢。

您需要做的就是複制並粘貼下面的代碼。 我們將解釋它是如何工作的，以便您可以修改它以滿足您網站的需求。

GIF/圖像預加載器

此代碼來自此處，然後進行了修改。

 <!--Preloader--> < div id = "load" class = "spinner-loader" > < div class = "load-wrap" > </ div > </ div >
 代碼語言： HTML、XML （ xml ）

這被插入到您的 WordPress 網站的標題中（我們稍後會討論如何做到這一點）。

/** Body Overlay **/ body #load { display : block; height : 100% ; overflow : hidden; position : fixed; top : 0 ; left : 0 ; width : 100% ; z-index : 9901 ; opacity : 1 ; background-color : #FFFFFF ; visibility : visible; -webkit-transition : all . 35s ease-out; transition : all . 35s ease-out; } body #load .loader-removed { opacity : 0 ; visibility : hidden; } .spinner-loader .load-wrap { background-image : url ( "https://isotropic.co/wp-content/uploads/2020/11/isodarklogo1.png" ); background-position : center center; background-repeat : no-repeat; text-align : center; width : 100% ; height : 100% ; }
 代碼語言： CSS （ css ）

這將進入您的樣式表（您可以將其添加到 Elementor 中的自定義 css 或外觀下的自定義 css，自定義）。

最後，我們將它與一些 JS 綁定在一起，在頁面加載時顯示和隱藏預加載器：

 < script type = "text/javascript" > // Javascript function to display loader on page load document .addEventListener( "DOMContentLoaded" , function ( event ) { var $load = document .getElementById( "load" ); var removeLoading = setTimeout( function ( ) { $load.className += " loader-removed" ; }, 500 ); }); </ script >
 代碼語言： HTML、XML （ xml ）

這也出現在您網站的標題中。

如果您要自定義徽標和顏色，則需要編輯兩個主要內容； 兩者都在 CSS 中找到。

頁面背景：

background-color : #FFFFFF ;
 代碼語言： CSS （ css ）

默認為白色，更改#ffffff 以更改顏色。

裝載機：

 background-image: url( "https://isotropic.co/wp-content/uploads/2020/11/isodarklogo1.png" );
 代碼語言： JavaScript （ javascript ）

我們正在使用PNG。 確保圖像的大小預先設置為 50 x 50 像素。 您還可以使用 GIF 或其他 Css 背景支持的東西。 將 url 更改為您的資產位置。 這是一個簡單的加載 gif。

 background-image: url( "https://i.imgur.com/llF5iyg.gif" ); /** Resize it to 50px by 50px like so **/ background-size: 50 px 50 px;
 代碼語言： JavaScript （ javascript ）

還可以自定義加載器的顯示時間：在JS中設置為500ms。 將 500 更改為任何其他值以更改其顯示的時間。

如何將編碼的預加載器添加到 Elementor

您可以通過複製並粘貼到 Elementor 來添加此代碼。 這裡有幾條路線。

整個站點上的預加載器（Elementor 方法）：

假設您已經在 Elementor 中構建了 Header，只需複制並粘貼下一節中的代碼，不包括所有 PHP 方面，因此 (" add_action( 'wp_head', function () { ?> " 和 " <?php } ); " ) 到一個 html 塊中，就像這樣。

它應該顯示覆蓋所有內容的預加載器（那是因為 JS 沒有啟動）。 在前端保存並測試。

整個站點上的預加載器（其他方法）：

1. 下載代碼片段插件。
2. 製作一個新的代碼片段（並在全球範圍內應用它）
3. 將以下內容粘貼到代碼片段中：

 add_action( 'wp_head' , function ( ) { ?> < style > /** Body Overlay **/ body #load { display : block; height : 100% ; overflow : hidden; position : fixed; top : 0 ; left : 0 ; width : 100% ; z-index : 9901 ; opacity : 1 ; background-color : #FFFFFF ; visibility : visible; -webkit-transition : all . 35s ease-out; transition : all . 35s ease-out; } body #load .loader-removed { opacity : 0 ; visibility : hidden; } .spinner-loader .load-wrap { background-image : url ( "https://isotropic.co/wp-content/uploads/2020/11/isodarklogo1.png" ); background-position : center center; background-repeat : no-repeat; text-align : center; width : 100% ; height : 100% ; } </ style > < div id = "load" class = "spinner-loader" > < div class = "load-wrap" > </ div > </ div > < script type = "text/javascript" > // Javascript function to display loader on page load document .addEventListener( "DOMContentLoaded" , function ( event ) { var $load = document .getElementById( "load" ); var removeLoading = setTimeout( function ( ) { $load.className += " loader-removed" ; }, 500 ); }); </ script > <?php } );
 代碼語言： JavaScript （ javascript ）

頁面集合上的預加載器：

像這樣過濾：

 <?php global $post; if ( $post->ID == 120 ) { ?> <!-- add the preloader code here --> <?php } ?>
 代碼語言： HTML、XML （ xml ）

這只會將預加載器應用於 ID 為 120 的特定頁面/帖子。您還可以使用 is_page 和數組來選擇多個頁面。