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.
Hola, tengo problemas con este tutorial, se queda en la pantalla de carga y no hace nada mas, sabes a que se pueda deber.
Hola Sebastian, quizá tengas un plugin cache que está causando el problema. ¿Cuál es la url de tu web?
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
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.
Buenísimo y super fácil, gracias Oscar
Muchas gracias María. Un abrazo 🙂
¿Hola oscar sabes cómo puedo hacer una topbar preload?
Hola Ale, Me puedes enviar un ejemplo de un topbar preload es que desconozco a qué te refieras con esto, disculpa Ale 😬
Hola algo así pero en Divi y con degradados de color 😵💫
https://codepen.io/stoepke/pen/QOOqGW
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?
Hola José Luis, necesito ver tu sitio para ver como se comporta el icono en móvil y así poder ayudarte 😀
Hola Oscar, Claro el enlace de la pagina es: https://mb-abogado.com
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…
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
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?
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!
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 😉
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.
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.
Sii, ahora sí! ¿qué pasó, por qué se produjo?
Cositas de divi jeje pero que genial que se solucionó 🙂
¡¡Gracias miles!! 🙂
Buenas, se podría hacer con un clip de video y ponerle un tiempo de duración en plan 3-5segundos
Hola Sara, no 🙁 solamente podemos hacerlo con imágenes en formato jpg, png o gif
Hola gracias! me sirvio bastante. tuve que hacer unas declaraciones especificas para mobile pero del resto funciona bien.
Genial Cesar 🙂