Normalmente, 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 Divi’s Theme Builder seguro que lo hay, ¡sin 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 la plantilla de forma gratuita!
Hagámoslo.
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 #1
Escritorio
Móvil
Transición de página animada #2
Escritorio
Móvil
Transición de página animada #3
Escritorio
Móvil
Descarga 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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 Divi Theme Builder y hacer clic en ‘Agregar nueva plantilla’.
Usar plantilla en todas las páginas
Use 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
Comience a construir el cuerpo de la plantilla
Luego, comience a crear el cuerpo personalizado de su plantilla de página.
2. Crear cuerpo de página usando el módulo de contenido de publicación
Ajustes de sección
Espaciado
Una vez dentro del editor de plantillas, verás una sección. Abra esa sección y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
Visibilidad
Para asegurarnos de que no aparezca una barra de desplazamiento horizontal cuando se esté realizando la animación, debemos ocultar los desbordamientos de ambas secciones 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 utilizando 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 del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
También estamos eliminando 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 espacios en blanco entre los contenedores en absoluto. Esto es importante para lo que vendrá en el siguiente paso; agregando el contenido de la página dinámica.
- Relleno superior: 0px
- Relleno 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 la altura del contenedor de la sección.
3. Aplique la transición de página animada de su elección
Recrear transición de página animada #1
Ajustes de sección
Color de fondo
¡Es hora de aplicar las transiciones de página animadas! Estamos compartiendo 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 animación: 100%
- Curva de velocidad de animación: Facilidad de entrada y salida
- Repetición de animación: una vez
Configuración de fila
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
- Retardo de animación: 500ms
- Opacidad inicial de animación: 100%
- Curva de velocidad de animación: Facilidad de entrada y salida
- Repetición de animación: una vez
Configuración de columna
Color de fondo
Pasamos al siguiente contenedor que animaremos, que es el contenedor de columnas. Abra la configuración de la columna y agregue un color de fondo blanco.
- Color de fondo: #ffffff
Animación
Agregue también una animación personalizada a la columna.
- Estilo de animación: Diapositiva
- Dirección de animación: Izquierda
- Retardo de animación: 1200ms
- Curva de velocidad de animación: Facilidad de entrada y salida
- Repetición de animación: una vez
Configuración del módulo de publicación de contenido
Animación
Por último, pero no menos importante, animaremos el Módulo de contenido de publicaciones (que contiene todo el contenido dinámico de la página).
- Estilo de animación: Fundido
- Retardo de animación: 2500ms
- Curva de velocidad de animación: Facilidad de entrada y salida
- Repetición de animación: una vez
Recrear transición de página animada #2
Ajustes de sección
Color de fondo
¿Quieres 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 animación: 100%
- Curva de velocidad de animación: Facilidad de entrada y salida
- Repetición de animación: una vez
Configuración de fila
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 gradiente: lineal
- Dirección del gradiente: 90 grados
- Posición inicial: 50%
- Posición final: 50%
Animación
Agregue una animación personalizada a su fila también.
- Estilo de animación: Diapositiva
- Dirección de animación: Arriba
- Retardo de animación: 800ms
- Opacidad inicial de animación: 100%
- Curva de velocidad de animación: Facilidad de entrada
- 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
- Retardo de animación: 2000ms
- Opacidad inicial de animación: 100%
- Curva de velocidad de animación: Facilidad de entrada y salida
- Repetición de animación: una vez
Configuración del módulo de publicación de contenido
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: Fundido
- Retardo de animación: 3000ms
- Curva de velocidad de animación: Facilidad de entrada y salida
- Repetición de animación: una vez
Recrear transición de página animada #3
Ajustes de sección
Fondo degradado
¡Pasamos 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 gradiente: Radial
- Dirección radial: Superior
- Posición inicial: 20%
- Posición final: 20%
Animación
Pase a la pestaña de diseño de la sección y cambie la configuración de animación en consecuencia:
- Estilo de animación: Diapositiva
- Dirección de animación: Abajo
- Intensidad de animación: 10%
- Opacidad inicial de animación: 100%
- Curva de velocidad de animación: Facilidad de entrada y salida
- Repetición de animación: una vez
Configuración de fila
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 gradiente: 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
- Retardo de animación: 1000ms
- Opacidad inicial de animación: 100%
- Curva de velocidad de animación: Facilidad de entrada
- 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 la siguiente configuración de animación a la columna también:
- Estilo de animación: Diapositiva
- Dirección de animación: Abajo
- Retardo de animación: 1500ms
- Curva de velocidad de animación: Facilidad de entrada y salida
- Repetición de animación: una vez
Configuración del módulo de publicación de contenido
Animación
Y complete la transición de la tercera página animada aplicando la siguiente configuración de animación al módulo de publicación de contenido:
- Estilo de animación: Fundido
- Retardo de animación: 3000ms
- Curva de velocidad de animación: Facilidad de entrada y salida
- Repetición de animación: una vez
6. Guardar todos los cambios del generador de temas y obtener 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 #1
Escritorio
Móvil
Transición de página animada #2
Escritorio
Móvil
Transición de página animada #3
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo crear transiciones de página animadas solo con las opciones integradas de Divi y Theme Builder. Esta es una excelente manera de agregar otro nivel de interacción a su sitio web, sin necesidad de código adicional. ¡También pudo descargar los archivos JSON de la 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 regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.