Cerrar video

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

por | Sep 7, 2022 | Tutorial gratuito | 26 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

26 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
    • Gustavo

      A mi me pasó lo mismo y al revisar el código, me di cuenta que cuando copio el código, Divi me genera símbolos raros, esos simbolos debes reemplazarlos por los signos según corresponda, luego de corregir eso, después me funcionó sin problemas.

      saludos

      Responder
      • Oscar Viedma

        Excelente sugerencia Gustavo, también se puede seleccionar y copiar el código manualmente, sin hacer click en el botón COPIAR, quizá eso funcione.

        Saludos.

        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
  4. José Luis Mendoza

    Hola excelente tutorial una pregunta, hice todos los pasos y la version de escritorio todo sale bien, pero en la version para celular el icono no sale centrado. Que puedo hacer para corregir esto?

    Responder
    • Oscar Viedma

      Hola José Luis, necesito ver tu sitio para ver como se comporta el icono en móvil y así poder ayudarte 😀

      Responder
    • Oscar Viedma

      Hola José Luis, considero que tu logo es demasiado grande para móvil.

      Utiliza este código para adaptarlo en móviles:

      @media only screen and (max-width: 768px) {
        .ov-preloader .ov-icon {
         width: 100px;
         height: 100px;
         position: absolute;
         left: 50%;
         top: 50%;
         margin: -50px 0 0 -50px;
       }
      }
      

      Debes reemplazar los valores de width, height y si es necesario left, top y margin…

      Responder
  5. Juan

    Hola Oscar,
    Hice todos los pasos que se queda en blanco mi página y al deslizar veo que es una capa ya que por detrás si esta deslizando mi web pero todo blanco por delante

    Responder
    • Oscar Viedma

      Hola Juan, ¿haz seguido el paso por paso cómo lo hicimos en el tutorial?

      Por cierto, ¿Cuál es la url de tu web?

      Responder
  6. vero

    Hola Oscar! Es posible usar este efecto de preloader pero dentro de una página específica de divi? Es para darle tiempo a cargar a un módulo.

    Gracias!

    Responder
    • Oscar Viedma

      Hola Vero, se puede implementar en una sola página, solamente el código CSS lo introduces en los ajustes de la página / Avanzado / CSS Personalizado. El código jQuery lo introduces en un módulo código y el código HTML del punto 4 también lo introduces en un módulo código 😉

      Responder
  7. Gabriela

    Hola! por una fracción de segundo se muestra en primer lugar, como en un pantallazo, el sitio con su carga a medias y sólo después empieza el preloader, muy bien, que muestra después el sitio ya cargado. ¿Qué puedo hacer para que el preloader empiece justo al principio? Deshabilitéel plugin de caché por si acaso, pero se mantiene esa situación.

    Responder
    • Oscar Viedma

      Hola Gabriela, a ver agrega este código en Divi / Opciones del tema / Integración / Agregar código al «head»…

      <script type="text/javascript">
      var elm=document.getElementsByTagName("html")[0];
      elm.style.display="none";
      document.addEventListener("DOMContentLoaded",function(event) {elm.style.display="block"; });
      </script>
      

      A ver qué pasa jeje, ya me dirás.

      Responder
      • Gabriela

        Sii, ahora sí! ¿qué pasó, por qué se produjo?

        Responder
        • Oscar Viedma

          Cositas de divi jeje pero que genial que se solucionó 🙂

          Responder
  8. Sara

    Buenas, se podría hacer con un clip de video y ponerle un tiempo de duración en plan 3-5segundos

    Responder
    • Oscar Viedma

      Hola Sara, no 🙁 solamente podemos hacerlo con imágenes en formato jpg, png o gif

      Responder
  9. cesar

    Hola gracias! me sirvio bastante. tuve que hacer unas declaraciones especificas para mobile pero del resto funciona bien.

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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