Cerrar video

Cómo agregar un precargador (preloader) en tu sitio web creado con divi y sin plugins

por | Sep 7, 2022 | Tutorial gratuito | 7 Comentarios

En este tutorial aprenderás a agregar un precargador o preloader en tu sitio web creado con divi y lo mejor es que esta funcionalidad la vamos a lograr sin plugins 😍

Primero lo primero ¿Qué es un precargador? Un precargador es una animación que se muestra antes de que cargue toda la página, este preloader es de gran ayuda cuando tienes un sitio complejo y que tarda unos segundos en cargar. Gracias a este precargador mantenemos a los visitantes interesados y evitamos que se frustren y abandonen nuestro sitio al no saber que está pasando.

¿Cómo instalar un precargador en divi? Vamos a ello…

1. Lo primero es generarnos el icono animado que deseamos mostrar, hay diversas páginas para generarnos algunos precargadores pero la que usaremos en este tutorial es loading.io

Una vez nos generemos el preloader, lo vamos a descargar y lo subiremos a nuestro wordpress desde la biblioteca de medios…
 
2. Posteriormente vamos a copiarnos el siguiente código CSS y lo vamos a pegar en Divi / Opciones del tema / CSS Personalizado:

/* OV PRELOADER */ 
.ov-preloader {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #fefefe;
   z-index: 999999;
   height: 100%;
   width: 100%;
   overflow: hidden !important;
}
.ov-preloader .ov-icon {
   width: 100px;
   height: 100px;
   position: absolute;
   left: 50%;
   top: 50%;
   background-image: url(icono-preloader.gif);
   background-repeat: no-repeat;
   background-position: center;
   -webkit-background-size: cover;
   background-size: cover;
   margin: -50px 0 0 -50px;
}

En el fragmento de código anterior debemos reemplazar la url de la línea: background-image: url(icono-preloader.gif); por la url del icono que subimos anteriormente en la biblioteca de medios…
 
3. Después necesitamos agregar el siguiente código jQuery en Divi / Opciones del tema / Integración / Agregar código al «head» de su blog:

<script type="text/javascript">
    // Asegurarse que todo el sitio esté cargado
    jQuery(window).load(function () {
        "use strict";
        // Se desvanece la animación con el icono
	    if(jQuery( '.et-bfb' ).length <= 0 && jQuery( '.et-fb' ).length <= 0  ){ 
			jQuery(".ov-icon").fadeOut();
			// Posteriormente se desvanece todo el contenedor que cubre la pantalla completa
			jQuery(".ov-preloader").delay(1000).fadeOut("slow");
		}else{
			jQuery(".ov-preloader").css('display','none');
		}
    }); 
</script>

4. Por último vamos a agregar el siguiente fragmento de código html en Divi / Opciones del tema / Integración / Agregar código al «body»:

<div class="ov-preloader">
<div class="ov-icon"></div>
</div>

Y así de fácil es agregar un preloader sin plugins en tu sitio web creado con divi. Si no te quedaron claros los pasos dale play al video para que lo realices conmigo 🤩

Si te ha quedado alguna duda puedes usar la sección de los comentarios de abajo para preguntarme cualquier cosa relacionada a este tutorial 😀

Un abrazo.

Tutoriales Relacionados

7 Comentarios

  1. Sebastian

    Hola, tengo problemas con este tutorial, se queda en la pantalla de carga y no hace nada mas, sabes a que se pueda deber.

    Responder
    • Oscar Viedma

      Hola Sebastian, quizá tengas un plugin cache que está causando el problema. ¿Cuál es la url de tu web?

      Responder
  2. maria

    Buenísimo y super fácil, gracias Oscar

    Responder
  3. Ale Lugo

    ¿Hola oscar sabes cómo puedo hacer una topbar preload?

    Responder
    • Oscar Viedma

      Hola Ale, Me puedes enviar un ejemplo de un topbar preload es que desconozco a qué te refieras con esto, disculpa Ale 😬

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada.

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$8 USD / mes

Pin It on Pinterest