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