Cómo crear transiciones de páginas animadas con el constructor de temas de Div ‘

Normalmente, cuando los visitantes navegan de una página a otra en su sitio de la Divica, la transición se lleva a cabo al instante. ¿Ahora si hay una forma de animar estas transiciones de página? Con el creador de temas de Divin, está seguro, ¡sin la necesidad de ningún código personalizado! Tan pronto como sus visitantes salgan de una página para ingresar a otra, puede aplicar una animación. En el tutorial de hoy, le mostraremos cómo crear estas páginas animadas. Además, también compartiremos tres ejemplos diferentes que puede solicitar inmediatamente a su próximo proyecto. ¡Podrá descargar la plantilla JSON gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Transición de página animada no. 1 escritorio

Móvil

La transición de la página animada no. 2 escritorio

Móvil

La transición de la página animada no. 3 escritorio

Móvil

Descargue las plantillas de página gratuitas para poner sus manos en sus plantillas de página gratuitas, primero deberá descargarlas usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Vaya al Temo Builder Divin y agregue una nueva plantilla de página Acceda al constructor de temas de la división y agregue una nueva plantilla para hacer lo primero que debe hacer es ir al edificio del tema y hacer clic en “Agregar una nueva plantilla”.
Use la plantilla en todas las páginas Use la nueva plantilla en todas las páginas (o páginas que desea aplicar).

Usar en: todas las páginas
Comience a construir el cuerpo de la plantilla y luego comience a crear la página personalizada de la plantilla de página.

2. Cree la página de la página utilizando la configuración de Configuración del módulo contenido Una vez que llegue al editor de plantillas, notará una sección. Abra esa sección y elimine todo el revestimiento predeterminado e inferior.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Visibilidad para garantizar que no aparezca una barra de desplazamiento horizontal cuando ocurra la animación, tendremos que ocultar ambas secciones en la pestaña avanzada de la configuración de la sección.

Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Agregue una nueva fila La estructura de la columna continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columnas: dimensionamiento sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho del contenedor de sección.

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
El espaciado también elimina el llenado predeterminado e inferior de la fila. En este momento, los contenedores para secciones, filas y columnas tienen exactamente el mismo tamaño. No hay espacio en blanco entre contenedores. Esto es importante para lo que seguirá en el siguiente paso; Agregar el contenido dinámico de la página.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Agregue un módulo de contenido para publicar en la columna La única forma en que necesitamos hacer que el contenido de la página parezca dinámico es el módulo de contenido de publicación. Continúe y agregue este módulo a su columna de línea debido a la configuración de sección y fila que hemos aplicado en las partes anteriores de esta publicación, el contenido dinámico de la página ocupará todo el ancho y la altura del contenedor de sección.
3. Aplique la transición de la página animada de su elección Recree la transición de la página animada no. 1

¡La sección de configuración, el color del sótano es el momento de aplicar las transiciones de páginas animadas! Compartimos tres ejemplos diferentes, pero con las opciones integradas Div, las posibilidades de animación son ilimitadas. Para aplicar la primera transición animada de la página, abra el contenedor de sección y agregue un color de fondo.

Color de fondo: # D8CDBE

Animación También aplicamos las siguientes secciones de animación para la sección:
Estilo de animación: diapositiva

Dirección de la animación: Opacidad correcta de inicio: 100%
Curva de velocidad de animación: limpieza de la entrada de facilidad
Repita la animación: una vez
Configuración Color de fondo de fila Luego abra la configuración de la fila y agregue el siguiente color de fondo:
Color de fondo: # E2E2E2
La animación continúa aplicando la siguiente animación en una fila:

Estilo de animación: diapositiva
Dirección de la animación: correcto

Retraso de animación: 500 ms
Opacidad de animación para comenzar: 100%
Curva de velocidad de animación: limpieza de la entrada de facilidad
Repita la animación: una vez
Configuración de la columna de color de fondo en el siguiente contenedor que animaremos, que es el contenedor de columna. Abra la configuración de la columna y agregue un color de fondo blanco.
Color de fondo: #ffffff
La animación también agrega una animación personalizada a la columna.

Estilo de animación: diapositiva

Dirección de la animación: izquierda

Retraso de animación: 1200 ms
Curva de velocidad de animación: limpieza de la entrada de facilidad
Repita la animación: una vez
Publique la configuración del módulo de contenido de animación, 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: limpieza de la entrada de facilidad
Repita la animación: una vez
Recree la transición de la página animada no. 2
Sección de configuración Color del sótano ¿Desea crear la segunda animación? Abra la configuración de la sección y use el siguiente color de fondo:
Color de fondo: # D8CDBE

Animación entonces, aplique una animación personalizada a la sección.

Estilo de animación: diapositiva
Dirección de la animación: izquierda

Opacidad de animación para comenzar: 100%
Curva de velocidad de animación: limpieza de la entrada de facilidad
Repita la animación: una vez
Configuración de fondo de gradiente Luego abra la configuración de la fila y use el siguiente fondo de gradiente para esto: Color 1: RGBA (255,255,255.0)
Color 2: #ffffff
Tipo de gradiente: lineal

Dirección de gradiente: 90 grados
Posición inicial: 50%
Posición final: 50%
Animación Agregue una animación personalizada en su turno y
Estilo de animación: diapositiva
Dirección de Animación: Up
Retraso de animación: 800 ms

Opacidad de animación para comenzar: 100%
Curva de velocidad de animación: facilidad
Repita la animación: una vez
Configuración del color de fondo luego, abra la configuración de la columna de fila y use un color de fondo blanco.
Color de fondo: #ffffff
Continúa continuando agregando una animación a la columna.
Estilo de animación: diapositiva

Dirección de la animación: correcto
Retraso de animación: 2000 ms

Opacidad de animación para comenzar: 100%
Curva de velocidad de animación: limpieza de la entrada de facilidad
Repita la animación: una vez
Publique la configuración del módulo de contenido de animación 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
Animación de retraso: 3000 ms
Curva de velocidad de animación: limpieza de la entrada de facilidad

Repita la animación: una vez
Recrear la transición de la página animada # 3
¡Configuración de la sección de fondo de gradiente en la siguiente y última transición de página animada! Abra la configuración de la sección y use el siguiente fondo de gradiente:
Color 1: # D8CDBE
Color 2: #ffffff

Tipo de gradiente: radial

Dirección radial: arriba
Posición inicial: 20%
Posición final: 20%
Animación Vaya a la pestaña Diseño de sección y modifique la configuración de animación en consecuencia:
Estilo de animación: diapositiva
Dirección de la animación: Down
Intensidad de animación: 10%

Opacidad de animación del inicio: 100%Curva de velocidad de animación: Irre de entrada fácil
Repita la animación: una vez
Configuración de la fila de fondo de gradiente Luego abra la configuración de la fila y aplique un fondo de gradiente:
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 la configuración de animación de la fila.
Estilo de animación: diapositiva
Dirección de la animación: Down
Animación de retraso: 1000 ms
Opacidad de animación para comenzar: 100%

Curva de velocidad de animación: facilidad
Repita la animación: una vez
Configuración de la columna de color de fondo continúa abriendo la configuración de la columna. Cambiar el color de fondo.
Color de fondo: #ffffff
Animación Aplicar la siguiente configuración de animación a la columna:
Estilo de animación: diapositiva
Dirección de la animación: Down

Retraso de animación: 1500 ms
Curva de velocidad de animación: limpieza de la entrada de facilidad

Repita la animación: una vez
Publique la configuración del módulo de contenido de animación y complete la tercera transición de la página animada aplicando la siguiente configuración de animación al módulo continuo:
Estilo de animación: Fade
Animación de retraso: 3000 ms
Curva de velocidad de animación: limpieza de la entrada de facilidad
Repita la animación: una vez

6. Guarde todos los cambios y el resultado de la vista previa del constructor después de que haya construido el cuerpo de la plantilla de página y haya agregado la transición de página animada, ¡puede guardar todos los cambios de constructor de temas y puede ver el resultado en su sitio web!
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Transición de página animada no. 1 escritorio
Móvil
La transición de la página animada no.2 Desktopmobil
La transición de la página animada no.3 escritorio

Móvil


Pensamientos finales En esta publicación, le mostré cómo crear transiciones de páginas animadas solo con las opciones incorporadas de la división y solo con temas constructor.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 logró descargar la copia gratuita del archivo JSON!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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.