Come aggiungere un preloader al sito Divi
Introduzione
In questo tutorial, ti insegneremo come aggiungere un preloader al tuo sito Web Divi. In questo post troverai il link a eccelenti risorse di preloader gratuite e ti mostreremo passo dopo passo come usarne uno sul tuo sito con Divi!
Cos’è il preloader?
Un preloader è un’animazione solitamente semplice che viene visualizzata durante il caricamento del tuo sito web. Può essere davvero utile quando un sito web è pesante e il suo tempo di caricamento richiede alcuni lunghi secondi. Quindi, per mantenere i tuoi visitatori interessati e per evitare che si sentano frustrati nell’attesa, ti consigliamo di utilizzare un preloader.
Ecco alcune risorse gratuite di preloader!
Queste immagini sono nei formati Png, Gif, Aep.
Procurati un preloader! Fai aspettare i tuoi visitatori con stile!
/*posiziona i bottoni sulla stessa riga*/
.pa-inline-buttons .et_pb_button_module_wrapper {
display: inline-block;
}
1. Carica il preloader GIF sul tuo sito Divi
Per prima cosa dobbiamo caricare il preloader che vogliamo utilizzare sul nostro sito Divi. Vai su Media / Aggiungi nuovo e fai clic su Seleziona file. Passa alla cartella con i preloader e seleziona l’immagine GIF che verrà utilizzata per il tuo sito web. Una volta caricata l’immagine, aprila nella tua libreria multimediale e copia l’URL.
2. Aggiungi codice CSS
Per seconda cosa, dobbiamo aggiungere il codice CSS che centrerà il nostro preloader. Possiamo anche specificare il colore di sfondo della pagina quando è in esecuzione il preloader e la dimensione del nostro preloader. Non dimenticare di cambiare l’URL del preloader per il tuo! Per aggiungere questo CSS, vai su Divi > Opzioni tema > CSS personalizzato
/* PRELOADER */
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fefefe;
z-index: 100000;
height: 100%;
width: 100%;
overflow: hidden !important;
}
.preloader .status {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
background-image: url(assets/img/loading.gif);
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
margin: -50px 0 0 -50px;
}
3. Aggiungi il seguente codice nella sezione <-head-> del tuo sito
In questo passaggio aggiungeremo il codice javascript all’Head del sito Divi. Si prenderà cura di quando viene visualizzato il preloader e si assicurerà che sparisca una volta caricata la pagina. Per farlo vai alla scheda Divi > Opzioni tema > Integrazione e aggiungi il seguente codice alla sezione <-head->:
<script type="text/javascript">
// makes sure the whole site is loaded
jQuery(window).load(function () {
"use strict";
// will first fade out the loading animation
if( jQuery( ‘.et-bfb’ ).length <= 0 && jQuery( ‘.et-fb’ ).length <= 0 ){
jQuery(".status").fadeOut();
// will fade out the whole DIV that covers the website.
jQuery(".preloader").delay(1000).fadeOut("slow");
}else{
jQuery(".preloader").css(‘display’,’none’);
}
});
</script>
4. Aggiungi questo codice al <-body-> del tuo sito
In questo passaggio aggiungeremo il codice HTML che posizionerà il nostro preloader nel nostro sito Divi. Per aggiungerlo, vai alla scheda Divi > Opzioni tema > Integrazione e aggiungi il seguente codice alla sezione :
<div class="preloader">
<div class="status"></div>
</div>
Vantaggi di avere un preloader
Un preloader non renderà il tuo sito Divi più veloce ma farà solo sapere ai tuoi utenti che sta per succedere qualcosa. Dovresti comunque rendere il tuo sito veloce senza il ricorso a un preloader, per renderlo il più leggero possibile. Lascia un commento nella sezione sotto se hai domande o dubbi!
