¡Desbloquea tu clase gratis de Marketing Digital!

¿Cómo añadir un Preloader o Precargador en tu Web con WordPress? Sin plugins

Como Poner Un Preloader En Divi Tutorial

Bueno chicos, en esta ocasión os enseñaré a cómo crear un Preloader con código para que lo podáis implementar en vuestro sitio web hecho con el maquetador Divi.

Y para lo más «rápidos» también os enseñaré a poner un Preloader facilmente con un plugin en tu sitio web con WordPress.

En este vídeo podéis ver el tutorial paso a paso:

Aquí os dejo los dos códigos que tenéis que usar.

Código JavaScrip → El que va en la parte de Head de Divi


<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> 

Código JavaScrip → El que va en la parte de Body de Divi

<div class="preloader">
<div class="status"></div>
</div>

Código CSS → El que va en «Opciones del tema» → «CSS personalizado»

/* 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(poner la url de la imagen);
   background-repeat: no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   background-size: cover;
   margin: -50px 0 0 -50px;
}

Si queréis descargar el plugin el enlace es este:

Loft Loader → https://es.wordpress.org/plugins/loftloader/

5 Consejos para que te vaya mejor en la vida y los negocios

5 Consejos para que te vaya mejor en la vida y los negocios

En esta entrada te voy a contar las 5 lecciones que mejor he aprendido y más me han marcado en la vida. Te ayudarán tanto en lo personal como en el mundo de los negocios. Empezamos: 1. NO LO CONSERVES, TIRALO. Creo que me viene por parte materna la mala manía de...

leer más
¿Cómo delegar tareas en mi Negocio?

¿Cómo delegar tareas en mi Negocio?

Hola chicos, que tal, hoy vamos a abordar el gran dilema que es delegar. Vamos a ver los siguientes puntos: ¿Qué es delegar?¿Por qué delegar es tan importante?¿Cómo empiezo a delegar tareas de mi empresa y por dónde empiezo a delegar?¿Cuándo empiezo a delegar?...

leer más

0 comentarios