Seleziona una pagina

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!

Mostra/Nascondi Commenti (0 commenti)
L

0 commenti

Invia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Ti potrebbe anche interessare…

Nov 17 2022

Come aggiungere le icone Font Awesome al tema Divi

In questo post ti mostro come aggiungere icone Font Awesome al tuo sito WordPress con un plugin o integrando manualmente con Divi.
Ottimizzare le immagini per la SEO
Nov 15 2022

Come ottimizzare le immagini per la SEO in Divi

Scopri come ottimizzare le immagini del tuo sito Divi in ottica SEO in questa guida passo dopo passo!
Modulo Divi Blur
Nov 14 2022

Come spostare il titolo del modulo Divi Blur sopra l’immagine

Oggi ti mostrerò come spostare il titolo del modulo Divi Blurb sopra l’immagine grazie a un frammento di codice.
Icone Social Mobile Divi
Mag 11 2022

Mostrare le icone social nell’header Divi da mobile

In questo post scoprirai un semplice trucchetto per abilitare le icone social nell’header Divi da mobile.
Video Vimeo Modulo
Mag 08 2022

Come incorporare Vimeo nel modulo video di Divi

In questo articolo ti mostro come inserire correttamente un video Vimeo nel modulo video di Divi.
Sosituire Icona Hamburger Divi
Feb 18 2022

Come sostituire l’icona hamburger per mobile nel tema Divi

In questa breve guida imparerai a sostituire l’icona hamburger standard di Divi per dispositivi mobili come cellulari e tablet.
Disabilitare IMG title
Feb 12 2022

Come ottimizzare gli attributi img alt e img title per la SEO

Ecco una breve guida sugli attributi img alt e img title e come disabilitarli in un sito WordPress.
Animazione Lottie WordPress
Nov 12 2021

Come aggiungere una animazione Lottie al tuo sito Divi

La animazione Lottie è molto attraente e in grado di catturare l’attenzione degli utenti. Scopriamo come aggiungerle su Divi!
Aggiornamento Divi Novembre
Nov 06 2021

Aggiornamento Novembre Divi: nuovo modulo icone

Le nuove opzioni per le icone di Divi sono disponibili dal 4 di Novembre! Ora possiamo integrare tutte le icone di Font Awesome.
Header Divi sfondo
Ott 23 2021

Aggiungere del testo al menu secondario Divi

Questo post descrive come aggiungere una semplice riga di testo personalizzato all’header superiore del tema Divi.
Divi Logo

Vuoi conoscere Divi?

Divi Builder WordPress

Crea siti Web professionali con i layout Divi

Prova i layout per il tema Divi, usato da web agency e professionisti di WordPress

Membership

Sepa

29,00 €  per sempre!

Con l’aggiunta di nuovi layout, il prezzo
può essere soggetto a modifiche.

R Più di 50 Layout Divi
R Download illimitati
R DOCUMENTAZIONE
R Assistenza PER email

29,00 €  per sempre!

Con l’aggiunta di nuovi layout, il prezzo
può essere soggetto a modifiche.

Perchè scegliere Divi Design Studio

Più di 70 layout Divi pronti da usare per i tuoi siti WordPress

Scarica la collezione completa dall’area download del tuo account e importa i layout Divi nel tuo sito WordPress o in quello dei tuoi clienti.

Realizzazione di Layout Divi personalizzati e su misura

Il nostro team è in grado di realizzare layout Divi personalizzati con un design unico e su misura che rispecchi la propria azienda o personalità.

Esperienza decennale nello sviluppo di siti WordPress

L’esperienza decennale e la professionalità del nostro team garantiscono lo sviluppo di layout Divi adatti a molti settori commerciali.