Descargue una sección de color de animación de héroe gratuito para Div Div

La forma en que diseña la sección Hero de su página establece expectativas para el resto de la página. Si diseña una página de destino que celebra algo, ya sea un aniversario o una venta, ciertamente puede ayudarlo a traer la atmósfera festiva en su diseño. Una forma de acercarse es agregar una animación coloreada en el fondo de la sección de héroes. El énfasis permanecerá en la copia escrita y en el CTA que proporciona. En este tutorial, le mostraremos cómo crear una hermosa sección de animación colorida, con la configuración construida del Div. ¡Podrá descargar el archivo 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. Escritorio

Móvil

Descargue la sección gratuita del diseño de la sección de héroe de animación de salpicaduras de forma gratuita para poner su mano en el aspecto gratuito del héroe de animación, primero debe descargarlo con 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!
¡Comencemos a recrear! Agregue una nueva sección de fondo de gradiente, inicie agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y aplique un fondo de gradiente.
Color 1: # 070A49
Color 2: # 6F00F7
Tipo de gradiente: lineal
Dirección de gradiente: 148 grados
Dimensión Cambiar a la pestaña de diseño de la sección y agregue una altura mínima a la configuración del tamaño. Esto convertirá nuestra sección en una pantalla completa.

Altura mínima: 100 VH
El espacio es eliminar todos los valores predeterminados, arriba y abajo.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Visibilidad y para garantizar que no haya una barra de desplazamiento horizontal en nuestro diseño, ocultaremos la abrumadora de la sección.

Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Agregue la estructura de la columna de la fila # 1 Una vez que la configuración de la sección esté en su lugar, agregue una primera fila utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila toque tanto a la izquierda como a la derecha del contenedor de sección cambiando la configuración de dimensionamiento de la siguiente manera: ancho: 100%

Ancho máximo: 100%
El espacio elimina todas las deflantes predeterminadas y sin fondo.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
El elemento CSS principal y para garantizar que los módulos aparezcan uno al lado del otro en dimensiones de pantalla más pequeñas, agregaremos una línea de código CSS al elemento principal de la fila.
Pantalla: Flex;

Animación de la columna 1 Una vez que la configuración de línea general esté en su lugar, abra la configuración de la columna 1 y agregue la animación.
Estilo de animación: Zoom

Director de Animación: Centro
Animación de intensidad: 100%
Animación de la columna 2 Agregar animación a la siguiente segunda columna.
Estilo de animación: Zoom

Director de Animación: Centro
Retraso de animación: 250 ms
Animación de intensidad: 100%
Animación de la columna 3 y usamos animación para la tercera columna.
Estilo de animación: Zoom

Director de Animación: Centro
Retraso de animación: 500 ms
Animación de intensidad: 100%
Agregue el módulo de imagen a la columna 1 Cargue la imagen de las salpicaduras es hora de agregar módulos, comenzando con un módulo de imagen en la columna 1. Cargue la imagen de dispersión que puede encontrar en la carpeta de descarga que pueda descargar al comienzo de este tutorial.
Dimension Switch a la pestaña Diseño del módulo y forzar el ancho completo en la configuración del tamaño.

Fuerza el ancho completo: si

Filtros entonces, cambie los colores del módulo utilizando la configuración del filtro.
Sombra: 303 grados

Saturación: 200%
Escala la escala de transformación en la configuración de transformación.
El fondo: 150%derecho: 150%

Efecto del movimiento vertical Entonces, pase a la pestaña avanzada y active un movimiento vertical.
Habilitar el movimiento vertical: sí
Compensación de inicio: 0


Brecha promedio:
Escritorio: 0 (al 50%)
Tableta: 0 (al 70%)
Teléfono: 0 (al 85%)
Compensación final: 2
Disparador del efecto de movimiento: la parte inferior del artículo
Efecto del movimiento horizontal también usamos movimientos horizontales.
Active el movimiento horizontal: sí
Comenzando el desplazamiento:

Escritorio: -10
Tableta y teléfono: 0
Brecha promedio: 0
Compensación final: 4
Disparador del efecto de movimiento: la parte inferior del artículo
Efectos hacia arriba y hacia abajo junto con un cambio de tamaño y hacia abajo.
Active la escala hacia arriba y hacia abajo: sí
Escala de inicio: 100%

Escala promedio: 150%
Escala de conclusión: 200%
Disparador del efecto de movimiento: la parte inferior del artículo
Clon el módulo de imagen dos veces y coloque los duplicados en las columnas restantes de la fila Una vez que se complete el primer módulo de imagen, puede clonar todo el módulo dos veces y puede colocar los duplicados en las columnas restantes de la fila.
Cambie el módulo de imagen en el espacio de la columna 2 Abra el módulo de imagen en la columna 2 y agregue un borde superior en la tableta y el teléfono.
Margen superior: 50% (solo tableta y teléfono)

Los filtros cambian la sombra y en la configuración del filtro.

Sombra: 55 grados
Cambie el módulo de imagen a los filtros de la columna 3 luego, abra el módulo de imagen en la tercera columna y modifique la configuración del filtro de acuerdo con:

Sombra: 309 grados
Brillo: 0%

Agregue la fila # 2 La estructura de la columna pasamos la siguiente fila. Use la siguiente estructura de columna:
Posición Abra la configuración de la fila y cambie la configuración de posición en la pestaña avanzada. Posición: Absoluto
Ubicación: Centro

Agregue el módulo de texto no. 1 En la columna, agregar contenido H1 es hora de agregar módulos, comenzando con un módulo de texto que contiene un contenido H1.

Configuración de texto H1 Cambie la configuración de texto H1 del módulo de la siguiente manera:
Fuente del título: Rubik
Encabezado de texto en color: #ffffff

Encabezado de texto de tamaño: 80 PX (escritorio), 50 px (tableta), 35 px (teléfono)

El texto del encabezado de sombra vertical: 0.08em
El texto del encabezado La fuerza de las sombras se desvanece: 0em
Color Shadow Text Header: # 1A005B
Agregue el módulo de texto no. 2 En la columna Agregar contenido luego, agregue otro módulo de texto con un contenido de descripción.

Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto en consecuencia:
Texto de fuentes: muchos
Color de texto: #dddddd

Tamaño de texto: 15 PX (escritorio), 14 PX (tableta y teléfono)

La altura de la línea de texto: 2.1em
Color Shadow Text: # 1a005b
Dimensión Modifique el ancho del módulo a continuación.
Ancho: 60% (escritorio), 100% (tableta y teléfono)
Espacio y complete la configuración del módulo agregando bordes superiores e inferiores en diferentes tamaños de pantalla.

Margen superior: 6% (escritorio), 10% (tableta), 14% (teléfono)

Margen inferior: 6% (escritorio), 10% (tableta), 14% (teléfono)
Agregue un módulo de botón a la columna Agregar una copia El último módulo que necesitamos en nuestra columna es un módulo de botón. Agregue una copia de su elección.

Establece el botón Luego, pase a la pestaña de diseño y estilice el botón de la siguiente manera:
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 17 PX

El color del texto del botón: #ffffff

El color del fondo de fondo: # EA01A6 en el nudo del botón: 0 PX
Botón Raza: 100 PX
Botón de fuente: Rubik
Botón de peso de fuente de fuente: en negrita
El estilo de la fuente del botón: mayúscula
Espaciado Agregue algunos valores de llenado personalizados en la configuración de espaciado.
Revestimiento superior: 20 px

Finamiento inferior: 20 PX
Junta izquierda: 60 PX
Revestimiento derecho: 60 PX

Sombra de cuadro y complete la configuración del módulo agregando un tono de caja.
Posición horizontal de la sombra de la caja: 5 px
Box Shadow Posición vertical: 5 PX
Color de la sombra: # 30005b
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio

Móvil
Pensamientos finales En esta publicación, te mostré cómo ser creativo con la animación incorporada y los efectos. Específicamente, le mostré cómo crear una sección colorida de héroes de animación para una página de destino que configure para una ocasión especial. Esta oportunidad podría ser, pero no se limita al aniversario de su empresa o una venta especial. ¡Podrías descargar el archivo 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.