Come aggiungere un preloader al sito Divi

Qui troverai eccelenti risorse gratuite e ti mostreremo passo dopo passo come usare un preloader sul tuo 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.

Attesa al pc

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.

Caricamento

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!

Ti potrebbe anche interessare…

Mostra/Nascondi Commenti (0 commenti)
L

0 commenti

Invia un commento

Ordina il tuo sito web e ricevilo in 5 giorni

WordPress Divi Designer

Realizziamo siti web moderni e professionali con Divi, il tema WordPress e builder visivo più potente al mondo.

Negozio dei Layout

I layout Divi sono nati per donare un look pulito e professionale e farti risparmiare tempo nella creazione del tuo sito Web.

Travel Blogger Child Tema
Panificio Divi Child Tema
Carrozziere Divi Child Tema