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 manera de animar estas transiciones de página? Con Divi’s Theme Builder 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áginas animadas. Más aún, también compartiremos tres ejemplos diferentes que puede aplicar en su próximo proyecto de inmediato. ¡También podrás descargar los archivos JSON de plantilla gratis!

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Transición animada de páginas # 1

Escritorio

transiciones de páginas animadas

Móvil

transiciones de páginas animadas

Transición animada de páginas # 2

Escritorio

transiciones de páginas animadas

Móvil

transiciones de páginas animadas

Transición animada de páginas # 3

Escritorio

transiciones de páginas animadas

Móvil

transiciones de páginas animadas

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 debe hacer es ir a Divi Theme Builder y hacer clic en ‘Agregar nueva plantilla’.

transiciones de páginas animadas

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

transiciones de páginas animadas

Comience a construir el cuerpo de la plantilla

Luego, comience a construir el cuerpo personalizado de su plantilla de página.

transiciones de páginas animadas

2. Crear cuerpo de página usando el módulo de contenido de publicación

Configuraciones de sección

Espaciado

Una vez dentro del editor de plantillas, verás una sección. Abra esa sección y elimine todos los rellenos superiores e inferiores predeterminados.

  • Relleno superior: 0px
  • Relleno inferior: 0px

transiciones de páginas animadas

Visibilidad

Para asegurarnos de que no aparezca una barra de desplazamiento horizontal cuando ocurra la animación, tendremos que 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

transiciones de páginas animadas

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

transiciones de páginas animadas

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 personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

transiciones de páginas animadas

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 de ningún tipo. Esto es importante para lo que vendrá en el próximo paso; agregando el contenido dinámico de la página.

  • Relleno superior: 0px
  • Relleno inferior: 0px

transiciones de páginas animadas

Agregar módulo de contenido de publicación a columna

El único módulo que necesitamos para que el contenido de la página aparezca dinámicamente es el Módulo de publicación de contenido. 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 dinámico de la página ocupará todo el ancho y alto del contenedor de la sección.

transiciones de páginas animadas

3. Aplique la transición de página animada de su elección

Recrea la página animada Transición # 1

transiciones de páginas animadas

Configuraciones de sección

Color de fondo

¡Hora de aplicar las transiciones animadas de la página! 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

transiciones de páginas animadas

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 de inicio de animación: 100%
  • Curva de velocidad de animación: facilidad de entrada y salida
  • Repetición de animación: una vez

transiciones de páginas animadas

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

transiciones de páginas animadas

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 de inicio de animación: 100%
  • Curva de velocidad de animación: facilidad de entrada y salida
  • Repetición de animación: una vez

transiciones de páginas animadas

Configuraciones de columna

Color de fondo

En el 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

transiciones de páginas animadas

Animación

Agregue una animación personalizada a la columna también.

  • Estilo de animación: diapositiva
  • Dirección de animación: izquierda
  • Retraso de animación: 1200 ms
  • Curva de velocidad de animación: facilidad de entrada y salida
  • Repetición de animación: una vez

transiciones de páginas animadas

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 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: facilidad de entrada y salida
  • Repetición de animación: una vez

transiciones de páginas animadas

Recrea la página animada Transición # 2

transiciones de páginas animadas

Configuraciones 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

transiciones de páginas animadas

Animación

Luego, aplique una animación personalizada a la sección.

  • Estilo de animación: diapositiva
  • Dirección de animación: izquierda
  • Opacidad de inicio de animación: 100%
  • Curva de velocidad de animación: facilidad de entrada y salida
  • Repetición de animación: una vez

transiciones de páginas animadas

Configuración de fila

Fondo degradado

A continuación, abra la configuración de la fila y use el siguiente fondo degradado:

  • Color 1: rgba (255,255,255,0)
  • Color 2: #ffffff
  • Tipo de degradado: lineal
  • Dirección de degradado: 90 grados
  • Posición de inicio: 50%
  • Posición final: 50%

transiciones de páginas animadas

Animación

Agregue una animación personalizada a su fila también.

  • Estilo de animación: diapositiva
  • Dirección de animación: arriba
  • Retraso de animación: 800 ms
  • Opacidad de inicio de animación: 100%
  • Curva de velocidad de animación: facilidad de instalación
  • Repetición de animación: una vez

transiciones de páginas animadas

Configuraciones de columna

Color de fondo

Luego, abra la configuración de columna de la fila y use un color de fondo blanco.

  • Color de fondo: #ffffff

transiciones de páginas animadas

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 de inicio de animación: 100%
  • Curva de velocidad de animación: facilidad de entrada y salida
  • Repetición de animación: una vez

transiciones de páginas animadas

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: facilidad de entrada y salida
  • Repetición de animación: una vez

transiciones de páginas animadas

Recrea la transición animada de la página # 3

transiciones de páginas animadas

Configuraciones de sección

Fondo degradado

¡A la próxima y última transición animada de la página! 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 de inicio: 20%
  • Posición final: 20%

transiciones de páginas animadas

Animación

Pase 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 de inicio de animación: 100%
  • Curva de velocidad de animación: facilidad de entrada y salida
  • Repetición de animación: una vez

transiciones de páginas animadas

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 degradado: radial
  • Dirección radial: centro
  • Posición de inicio: 50%
  • Posición final: 50%

transiciones de páginas animadas

Animación

Modifique la configuración de animación de la fila también.

  • Estilo de animación: diapositiva
  • Dirección de animación: abajo
  • Retraso de animación: 1000 ms
  • Opacidad de inicio de animación: 100%
  • Curva de velocidad de animación: facilidad de instalación
  • Repetición de animación: una vez

transiciones de páginas animadas

Configuraciones de columna

Color de fondo

Continúe abriendo la configuración de la columna. Cambia el color de fondo.

  • Color de fondo: #ffffff

transiciones de páginas animadas

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
  • Retraso de animación: 1500 ms
  • Curva de velocidad de animación: facilidad de entrada y salida
  • Repetición de animación: una vez

transiciones de páginas animadas

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: facilidad de entrada y salida
  • Repetición de animación: una vez

transiciones de páginas animadas

6. Guardar todos los cambios del generador de temas y obtener una vista previa

Una vez que haya creado el cuerpo de la plantilla de su página y haya agregado la transición animada de la página que elija, puede guardar todos los cambios de Theme Builder y ver el resultado en su sitio web.

transiciones de páginas animadas

transiciones de páginas animadas

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!