Cómo crear transiciones de página animadas con el generador de temas de Divi
Publicado: 2020-01-22Normalmente, cuando los visitantes navegan de una página a otra en su sitio web Divi, la transición ocurre instantáneamente. Ahora, ¿qué pasa si hay una forma de animar estas transiciones de página? Con el Theme Builder de Divi seguro que lo hay, ¡sin la necesidad de ningún código personalizado! Tan pronto como sus visitantes abandonen una página para ingresar a otra, puede hacer que se aplique una animación. En el tutorial de hoy, le mostraremos cómo crear estas transiciones de página animadas. Más aún, también compartiremos tres ejemplos diferentes que puede aplicar en su próximo proyecto de inmediato. ¡También podrá descargar los archivos JSON de plantilla de forma gratuita!
Hagámoslo.
Avance
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Transición de página animada n. ° 1
Escritorio
Móvil
Transición de página animada n. ° 2
Escritorio
Móvil
Transición de página animada n. ° 3
Escritorio
Móvil
Descargue las plantillas de página GRATIS
Para poner sus manos en las plantillas de página gratuitas, primero deberá descargarlas usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
1. Vaya a Divi Theme Builder y agregue una nueva plantilla de página
Vaya a Divi Theme Builder y agregue una nueva plantilla
Lo primero que deberá hacer es ir a su Divi Theme Builder y hacer clic en 'Agregar nueva plantilla'.
Usar plantilla en todas las páginas
Utilice la nueva plantilla en todas las páginas (o en las páginas a las que desea que se aplique la transición).
- Usar en: todas las páginas
Empezar a construir el cuerpo de la plantilla
Luego, comience a construir el cuerpo personalizado de su plantilla de página.
2. Cree el cuerpo de la página con el módulo de contenido de la publicación
Configuración de la sección
Espaciado
Una vez dentro del editor de plantillas, verá una sección. Abra esa sección y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Acolchado inferior: 0px
Visibilidad
Para asegurarnos de que no aparezca ninguna barra de desplazamiento horizontal cuando se esté realizando la animación, tendremos que ocultar ambos desbordamientos de sección en la pestaña avanzada de la configuración de la sección.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho del contenedor de la sección.
- Usar ancho de canalón personalizado: Sí
- Ancho de la canaleta: 1
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
También eliminaremos el relleno superior e inferior predeterminado de la fila. En este punto, los contenedores de sección, fila y columna tienen exactamente el mismo tamaño. No hay ningún espacio en blanco entre los contenedores. Esto es importante para lo que vendrá en el próximo paso; agregando el contenido dinámico de la página.
- Relleno superior: 0px
- Acolchado inferior: 0px
Agregar módulo de contenido de publicación a la columna
El único módulo que necesitamos para que el contenido de la página aparezca dinámicamente es el Módulo de contenido de publicación. Continúe y agregue este módulo a la columna de su fila. Gracias a la configuración de sección y fila que aplicamos en las partes anteriores de esta publicación, el contenido de la página dinámica ocupará todo el ancho y alto del contenedor de la sección.
3. Aplique la transición de página animada de su elección
Recrear la transición de página animada n. ° 1
Configuración de la sección
Color de fondo
¡Es hora de aplicar las transiciones de página animadas! Compartimos tres ejemplos diferentes, pero con las opciones integradas de Divi, las posibilidades de animación son infinitas. Para aplicar la primera transición de página animada, abra el contenedor de la sección y agregue un color de fondo.
- Color de fondo: # d8cdbe
Animación
También estamos aplicando la siguiente configuración de animación a la sección:
- Estilo de animación: diapositiva
- Dirección de animación: Derecha
- Opacidad inicial de la animación: 100%
- Curva de velocidad de animación: Ease-In-Out
- Repetición de animación: una vez
Configuración de filas
Color de fondo
Abra la configuración de la fila a continuación y agregue el siguiente color de fondo:
- Color de fondo: # e2e2e2
Animación
Continúe aplicando la siguiente animación a la fila:
- Estilo de animación: diapositiva
- Dirección de animación: Derecha
- Retraso de animación: 500 ms
- Opacidad inicial de la animación: 100%
- Curva de velocidad de animación: Ease-In-Out
- Repetición de animación: una vez
Configuración de columna
Color de fondo
Pasemos al siguiente contenedor que animaremos, que es el contenedor de la columna. Abra la configuración de la columna y agregue un color de fondo blanco.
- Color de fondo: #ffffff
Animación
Agrega también una animación personalizada a la columna.
- Estilo de animación: diapositiva
- Dirección de animación: izquierda
- Retraso de animación: 1200ms
- Curva de velocidad de animación: Ease-In-Out
- Repetición de animación: una vez
Configuración del módulo de contenido de publicación
Animación
Por último, pero no menos importante, animaremos el módulo de contenido de la publicación (que contiene todo el contenido dinámico de la página).
- Estilo de animación: Fade
- Retraso de animación: 2500 ms
- Curva de velocidad de animación: Ease-In-Out
- Repetición de animación: una vez
Recrear la transición de página animada n. ° 2
Configuración de la sección
Color de fondo
¿Quiere crear la segunda animación en su lugar? Abra la configuración de la sección y use el siguiente color de fondo:
- Color de fondo: # d8cdbe
Animación
Luego, aplique una animación personalizada a la sección.
- Estilo de animación: diapositiva
- Dirección de animación: izquierda
- Opacidad inicial de la animación: 100%
- Curva de velocidad de animación: Ease-In-Out
- Repetición de animación: una vez
Configuración de filas
Fondo degradado
Abra la configuración de la fila a continuación y use el siguiente fondo degradado para ello:
- Color 1: rgba (255,255,255,0)
- Color 2: #ffffff
- Tipo de degradado: lineal
- Dirección del gradiente: 90 grados
- Posición inicial: 50%
- Posición final: 50%
Animación
Agrega una animación personalizada a tu fila también.
- Estilo de animación: diapositiva
- Dirección de animación: Arriba
- Retraso de animación: 800ms
- Opacidad inicial de la animación: 100%
- Curva de velocidad de animación: Ease-In
- Repetición de animación: una vez
Configuración de columna
Color de fondo
Luego, abra la configuración de la columna de la fila y use un color de fondo blanco.
- Color de fondo: #ffffff
Animación
Continúe agregando una animación a la columna.
- Estilo de animación: diapositiva
- Dirección de animación: Derecha
- Retraso de animación: 2000 ms
- Opacidad inicial de la animación: 100%
- Curva de velocidad de animación: Ease-In-Out
- Repetición de animación: una vez
Configuración del módulo de contenido de publicación
Animación
Por último, pero no menos importante, abra la configuración del Módulo de contenido de publicación y use la siguiente configuración de animación:
- Estilo de animación: Fade
- Retraso de animación: 3000 ms
- Curva de velocidad de animación: Ease-In-Out
- Repetición de animación: una vez
Recrear la transición de página animada n. ° 3
Configuración de la sección
Fondo degradado
¡A la siguiente y última transición de página animada! Abra la configuración de la sección y use el siguiente fondo degradado:
- Color 1: # d8cdbe
- Color 2: #ffffff
- Tipo de degradado: radial
- Dirección radial: superior
- Posición inicial: 20%
- Posición final: 20%
Animación
Vaya a la pestaña de diseño de la sección y cambie la configuración de la animación en consecuencia:
- Estilo de animación: diapositiva
- Dirección de animación: Abajo
- Intensidad de animación: 10%
- Opacidad inicial de la animación: 100%
- Curva de velocidad de animación: Ease-In-Out
- Repetición de animación: una vez
Configuración de filas
Fondo degradado
Luego, abra la configuración de la fila y aplique un fondo degradado:
- Color 1: #ffffff
- Color 2: rgba (255,255,255,0)
- Tipo de degradado: radial
- Dirección radial: centro
- Posición inicial: 50%
- Posición final: 50%
Animación
Modifique también la configuración de animación de la fila.
- Estilo de animación: diapositiva
- Dirección de animación: Abajo
- Retraso de animación: 1000 ms
- Opacidad inicial de la animación: 100%
- Curva de velocidad de animación: Ease-In
- Repetición de animación: una vez
Configuración de columna
Color de fondo
Continúe abriendo la configuración de la columna. Cambia el color de fondo.
- Color de fondo: #ffffff
Animación
Aplique también la siguiente configuración de animación a la columna:
- Estilo de animación: diapositiva
- Dirección de animación: Abajo
- Retraso de animación: 1500 ms
- Curva de velocidad de animación: Ease-In-Out
- Repetición de animación: una vez
Configuración del módulo de contenido de publicación
Animación
Y complete la tercera transición de página animada aplicando la siguiente configuración de animación al Módulo de contenido de publicación:
- Estilo de animación: Fade
- Retraso de animación: 3000 ms
- Curva de velocidad de animación: Ease-In-Out
- Repetición de animación: una vez
6. Guarde todos los cambios del Generador de temas y obtenga una vista previa del resultado
Una vez que haya creado el cuerpo de la plantilla de su página y haya agregado la transición de página animada de su elección, puede guardar todos los cambios de Theme Builder y ver el resultado en su sitio web.
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Transición de página animada n. ° 1
Escritorio
Móvil
Transición de página animada n. ° 2
Escritorio
Móvil
Transición de página animada n. ° 3
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo crear transiciones de página animadas con las opciones integradas de Divi y Theme Builder únicamente. Esta es una excelente manera de agregar otro nivel de interacción a su sitio web, sin la necesidad de código adicional. ¡También pudo descargar los archivos JSON de plantilla de ejemplo de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.
Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.