En este tutorial gratuito aprenderás a crear un efecto de transición entre páginas en divi. La realidad es un efecto es muy simple y básico pero realmente le puede dar un «toque» de dinamismo a tu sitio web al navegar entre las páginas.
Este efecto de transición puede servir para cualquier sitio web creado con wordpress, pero en este tutorial te enseñaré a implementarlo en el tema divi.
Por cierto, hace unos días también he realizado un tutorial premium dónde implementamos también un efecto de transición entre páginas, el efecto implementado en dicho tutorial es un poco más avanzado y realmente se ve genial, así que si estás interesado en este y muchos más tutoriales premium y exclusivos te invito a unirte a estos tutoriales exclusivos por solamente $6.00 USD al mes. La verdad valen cada centavo. 🙂
Genial, entonces para crear este tutorial vamos a necesitar de unos cuantos fragmentos de código. Fiel a la costumbre de OV DIVI aquí te dejo todos los fragmentos para que solo copies y pegues:
Primero necesitamos agregar la clase «animate-in-ov» a la etiqueta body de nuestro sitio web. Para esto requerimos de una función que debes pegar en el archivo functions.php de tu tema hijo o si no tienes un tema hijo lo puedes hacer mediante el plugin Code Snippets.
add_filter( 'body_class','my_body_classes' );
function my_body_classes( $classes ) {
$classes[] = 'animate-in-ov';
return $classes;
}
Posteriormente tenemos que insertar los estilos CSS de la clase que agregamos anteriormente. Para eso solo tienes que copiar y pegar el siguiente código en el CSS Personalizado de divi:
.animate-in-ov {
-webkit-animation: fadeIn .5s ease-in;
animation: fadeIn .5s ease-in;
}
.animate-out-ov {
-webkit-transition: opacity .5s;
transition: opacity .5s;
opacity: 0;
}
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
Y para finalizar nos falta un último paso, y es agregar el efecto de desvanecido justo antes que se cargue la página. Esto lo haremos con el siguiente código javascript, solo tienes que copiar y pegarlo en las Opciones del tema divi / Integración / Agregar código al
de su blog.
<script>
window.addEventListener("beforeunload", function () {
document.body.classList.add("animate-out-ov");
});
</script>
Y listo con esto hecho tendrás un bonito efecto de transición entre páginas. 🙂
Hola!
Me encanta esta transición, aunque no sé si has notado que en el navegador safari, al navegar todo esta muy bien, pero cuando usas el botón de regresar una pagina se regresa en blanco y ya no carga el sitio hasta darle en refrescar. ¿Crees que hay algo que se pueda hacer? Algunas veces, igual en safari, me pasa lo mismo en tu sitio y no tengo manera de ver el blog.
Hola Caleb!
La verdad no he notado el detalle que comentas con safari, tengo que investigar que está sucediendo. Pero he realizado mis pruebas con mi sitio en safari y todo funciona muy bien, de hecho ni si quiera aplica una transición cuando regreso a la página anterior. 🤔
Lo usé en https://www.krossov.mx realmente es como si el efecto se quedara encima. Pensé que podia ser problema mío pero fue otra persona persona la que lo detecto y me dio aviso. 😅
Y cuando me pasa en tu sitio, es mas especifico en el blog, se puede ver que por detrás todo se mueve pero el color blanco se queda por encima.
Lo veo muy bien en Safari! ¿Cómo lo solucionaste?
Y bonito sitio! en verdad 😊
¡ Muchas Gracias !
Realmente es una web «muy sencilla» pero eso sí, dinámica para el cliente. 😊
No lo he solucionado solo pasa en safari pero de la Macarena ( en la Mac ) en los otros navegadores incluyendo el del iPhone no pasa.
Lo sencillo» a los ojos de un diseñador «dice» mucho! 😉
Sí, ví tu sitio en Safari, monitor de MacBookPro, y lo veo igual que en Chrome. Tal vez sea algo muy imperceptible para el usuario: llama más la atención las bonitas imágenes 3d del slider que ni te detienes en ver ese detalle 😉
Un tutorial mejor que otro! Impecable trabajo OV Divi!!
Así cómo ustedes yo también sigo aprendiendo. La clave está en nunca dejar de hacerlo. Un abrazo querida Adriana.
Hola Oscar, mi problema es que al navegar entre paginas se ve la cabecera en segundo plano, veo el logotipo y el menú un poco mas bajo que en el sitio original y cuando se carga la pagina desaparece, esto queda bastante feo, si aplico tu solución ya no la veo, pero si cambio el tiempo que lo tienes en 5s y lo paso por ejemplo a 2s sigo viéndola, como podría hacer para pasar entre paginas sin transición, es decir, lo mas rápido posible pero sin que se vea la cabecera en el fondo? muchas gracias por el tiempo y tutoriales que compartes son de mucha ayuda para personas que no estamos muy puestos en estos temas, un saludo.
Hola Manuel, ese problema con la cabecera muchas veces ocurre porque tu logotipo es demasiado grande al tamaño real que lo estás mostrando en tu menú, muchas veces cargan sus logos con una proporción muy grande cuando quizá el máximo tamaño que se está visualizando es de máximo 100px. Esto puede estarte sucediendo.
La otra es optimizar bien tus páginas con un plugin cache.
Y si ya hiciste todo lo anterior y sigue mostrando ese «flashing» tengo un snippet que soluciona justamente ese detalle, lo encuentras en la página snippets en los Fragmentos Generales con el título: Soluciona el contenido sin estilos que se muestra al cargar la página en divi.
Saludos
Muchas gracias, Oscar. Lo probaré y te contaré. Otro problema que tengo es como hacer para que los iconos de redes sociales no actúen al pasar el ratón, aunque no les pongo el enlace si doy clic a un icono se me abre una página nueva o a veces se va arriba a la cabecera, lo que quiero es que se vean los iconos tanto en la cabecera como en el pie de página pero cuando pases el ratón por encima no haga nada aunque des un clic ya que todavía no tengo redes sociales.
Hola Manuel, ooh eres Manu el que me ha contactado por messenger y email. Me alegró saber que lograste solucionar el «detalle» de los iconos. Qué genial Manuel.
Un abrazo.