3 Efectos de movimiento sin esfuerzo que puede agregar a sus títulos con Div

Los nuevos efectos del desfile de Divi traen muchas posibilidades de diseño nuevas para las páginas que construye. Puede agregar un efecto de desfile personalizado a cada contenedor y puede sincronizar los efectos en consecuencia. Esta libertad de diseño le ayuda a resaltar fácilmente ciertos contenidos de una manera elegante. En este tutorial, le mostraremos cómo agregar efectos de movimiento a sus títulos de esta manera, puede poner un énfasis adicional en sus títulos y puede mantener a sus visitantes involucrados. ¡Podrá descargar los archivos JSON de forma 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. Ejemplo no. 1 escritorio

Móvil

Ejemplo no. 2 escritorio

Móvil

Ejemplo no. 3 escritorio

Móvil

Descargue la sección de efectos de movimiento de desplazamiento de forma gratuita para tener en sus manos los aspectos de la sección gratuita, primero deberá descargarlos 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. Construya su diseño de la sección Hero en una página nueva o existente Agregue un nuevo color de fondo. Inicie agregando una nueva sección a la página en la que trabaja. Abra la configuración de la sección y cambie el color de fondo a blanco.
Color de fondo: #ffffff
Espacio ir a la pestaña Design y modificar los valores de espaciado.

Revelaje superior: 15VW (escritorio), 20VW (tableta), 25VW (teléfono)
Revestimiento inferior: 0 VW
Operaciones y para garantizar que los efectos del desplazamiento no hagan ninguna barra de desplazamiento horizontal, también ocultaremos los derrames de la sección.

Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila y modifique el ancho y el ancho máximos en la configuración del tamaño.

Ancho: 90%
Ancho máximo: 100%
El espacio elimina y todos los rellenos predeterminados, arriba e inferior.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue el módulo de texto no. 1 En la columna Agregar contenido H1 La única forma en que necesitamos en esta fila es un módulo de texto con un contenido H. Sexts H1 Modifique la configuración de texto H1 de acuerdo con:

Fuente del título: PlayFair Display

Título Fuente de peso: Bold
Alineación del texto del encabezado: Centro
Text Pre -Text: # 000000
Encabezado de texto de tamaño: 6VW
Agregue la estructura de la columna de la fila # 2 y luego agregue otra fila usando la siguiente estructura de columna:
Fondo de gradiente sin agregar módulos, abrir la configuración de línea y usar un fondo de gradiente.

Color 1: # 444444

Color 2: # 000000
Tipo de gradiente: lineal
Dirección de gradiente: 237 grados
Dimensión Modifique la configuración de tamaño de la fila.
Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Espacio y luego, agregue algunos revestimientos personalizados desde arriba e inferior.
SUS Lingo: 0VW

Bajo forro: 10 VW (escritorio), 15VW (tableta), 20VW (teléfono)
Agregue el módulo de texto no. 2 En la columna agrega contenido, el primer módulo que necesitamos en esta fila es un módulo de texto con un determinado contenido.
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de la siguiente manera:

Texto de fuente: PlayFair Display

Color de texto: #dddddd
Tamaño del texto: 6VW
La altura de la línea de texto: 1em
Fuerza de desvanecimiento de la sombra de texto: 0.29em
Texto del color de la sombra: #ffffff
Alineación de texto: Centro
Agregue el módulo de texto no. 3 En la columna Agregar contenido y luego, agregue otro módulo de texto con un contenido de descripción.
Configuración de texto Cambie la configuración de texto del módulo de la siguiente manera:

Texto de fuente: Abra el sanskus del texto: # E8E8E8

Tamaño de texto: 0.9VW (escritorio), 2VW (tableta), 2.5VW (teléfono)
Altura de la línea de texto: 2em
Alineación de texto: Centro
Dimensión Modifique la configuración de tamaño.
Ancho: 40% (escritorio), 90% (tableta y teléfono)
Alineación del módulo: centro

Espacio e incluye algunos bordes superiores e inferiores en diferentes tamaños de pantalla.
Margen superior: 10 VW (escritorio), 15VW (tableta), 20VW (teléfono)
Margen inferior: 3VW (escritorio), 8VW (tableta), 13VW (teléfono)

Agregue un módulo de botón a la columna Agregue una copia a continuación y el último módulo que necesitamos es un módulo de botón. Agregue una copia de su elección.
La alineación continúa cambiando la alineación de los botones de la pestaña Design.
Alineación de botones: centro

Establece el botón Entonces, estilice el botón de la siguiente manera:


Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 0.8VW (escritorio), 1.5VW (tableta), 2.5VW (teléfono)

El color del texto del botón: #ffffff
El color del marco del botón: #fffff
Botón Raza: 1 PX
Botón de fuente: Abrir sans
Botón de peso de fuente de fuente: en negrita
El estilo de la fuente del botón: mayúscula
Espaciado e incluye algunos valores de llenado personalizados en diferentes tamaños de pantalla.
Revelaje superior: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Bajo forro: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)

ENLIZACIÓN IZQUIERDA: 2.5VW (escritorio), 5VW (tableta), 8VW (teléfono)
Revestimiento derecho: 2.5VW (escritorio), 5VW (tableta), 8VW (teléfono)
2. Aplicar efectos para el ejemplo no. 1
Modo de texto # 1 Movimiento horizontal ahora, después de diseñar la apariencia general de la sección Hero, es el momento de aplicar los diferentes efectos de ejecutar nuestra copia. Para recrear el primer ejemplo, abra el primer módulo de texto y use el siguiente movimiento horizontal: active el movimiento horizontal: sí
Compensación de inicio: 0

Brecha promedio: 0

0% – 80% (escritorio)
0% – 95% (tableta y teléfono)
Compensación final: -10
Distribuir y salir también agregaremos un efecto de decoloración y salida.
Habilitar el desvanecimiento dentro y fuera: Sí
Opacidad inicial: 100%
Opacidad promedio: 100%

0% – 70% (escritorio)
0% – 95% (tableta y teléfono)
Opacidad final: 0%
Modo de texto # 2 Movimiento horizontal y luego abra el segundo módulo de texto en su sección y aplique el siguiente movimiento horizontal:
Active el movimiento horizontal: sí
Comenzando el desplazamiento: 10
Brecha promedio: 0

10% – 70% (escritorio)
10% – 95% (tableta y teléfono)
Retraso final: 10
Desvanecerse dentro y fuera junto con un efecto de desenfoque y salida adecuado:
Habilitar el desvanecimiento dentro y fuera: Sí
Opacidad inicial: 0%
Opacidad promedio: 100%

35% – 60% (escritorio)
35% – 95% (tableta y teléfono)
Opacidad final: 0%
Ejemplo no. 2
Modo de texto # 1 Movimiento vertical ¿Quieres recrear el segundo movimiento de desplazamiento en su lugar? Abra el primer módulo de texto en su sección y agregue el siguiente movimiento vertical:
Habilitar el movimiento vertical: sí
Compensación de inicio: 0

Brecha promedio: 0

90% (escritorio)
95% (tableta y teléfono)
Grado final: -8
Escalar hacia arriba y hacia abajo Agregue un cambio de tamaño y hacia abajo.
Active la escala hacia arriba y hacia abajo: sí
Escala inicial: 20%
Escala promedio: 100%

20% – 80% (escritorio)
20% – 95% (tableta y teléfono)
Escala de conclusión: Modo de texto del 20% # 2 Movimiento vertical luego abra el segundo módulo de texto y use la siguiente configuración de movimiento vertical:
Habilitar el movimiento vertical: sí
Compensación de inicio: 0
Brecha promedio: 0
15% – 70% (escritorio)

15% – 90% (tableta y teléfono)
Grado final: -8
Escalar hacia arriba y hacia abajo Agregue un cambio de tamaño y hacia abajo.
Active la escala hacia arriba y hacia abajo: sí
Escala inicial: 0%
Escala promedio: 100%
30% – 70% (escritorio)

30% – 90% (tableta y teléfono)
Escala de conclusión: 100%
Descande y complete el efecto de desplazamiento agregando un efecto desenfoque al segundo módulo de texto de su sección.
Habilitar desenfoque: si
Comienzo de blur: 10 px
Desenfoque medio: 0 PX
40% – 73% (escritorio)

40% – 95% (tableta y teléfono)
Desenfoque final: 100 PX
Ejemplo no. 3
Modo de texto # 1 Movimiento horizontal por último, pero no menos importante, le mostraremos cómo recrear el tercer movimiento de desplazamiento. Abra el primer módulo de texto de la sección y agregue un efecto de movimiento horizontal.
Active el movimiento horizontal: sí
Compensación de inicio: 0
Brecha promedio: 0

0% – 90%

Retraso final: 10
Desvanecerse dentro y fuera Use un efecto de desvanecimiento dentro y fuera para este módulo.
Habilitar el desvanecimiento dentro y fuera: Sí
Opacidad inicial: 100%
Opacidad promedio: 100%
0% – 90% (escritorio)

0% – 95% (tableta y teléfono)
Opacidad final: 0%
Rotación y también aplicaremos un efecto rotativo.
Activar la rotación: si
Rotación de arranque: 0 °
Rotación promedio: 0 °
0% – 90% (escritorio)

0% – 95% (tableta y teléfono)
Rotación final: 90 °
Modo de texto # 2 Movimiento horizontal y luego abra el segundo módulo de texto en su sección y aplique la siguiente configuración de movimiento horizontal:
Active el movimiento horizontal: sí
Compensación de inicio: 0
Brecha promedio: 0
0% – 90%

Compensación final: -10
Se desvanece dentro y fuera, continúa usando un efecto de movimiento en el desvanecimiento y hacia afuera.
Habilitar el desvanecimiento dentro y fuera: Sí
Opacidad inicial: 100%
Opacidad promedio: 100%
0% – 80% (escritorio)

0% – 95% (tableta y teléfono)
Opacidad final: 0%
Rotación y complete la configuración del módulo agregando un efecto de desplazamiento rotativo.
Activar la rotación: si
Rotación de arranque: 0 °
Rotación promedio: 0 °
0% – 80% (escritorio)

0% – 90% (tableta y teléfono)
Rotación final: -90 °
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Ejemplo no. 1 escritorio
Móvil
Ejemplo no. 2 escritorio
Móvil
Ejemplo no. 3 escritorio

Móvil

Pensamientos finales En esta publicación, le mostré cómo usar los nuevos efectos de la división para agregar efectos de movimiento a su título. Hemos tratado tres ejemplos diferentes, pero las posibilidades son realmente ilimitadas. ¡Podrías descargar los archivos JSON gratis! 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.