La forma en que diseña la sección principal de su página establece las expectativas para el resto de su página. Si está diseñando una página de destino que celebra algo, ya sea un aniversario o una venta, definitivamente puede ayudar a traer el ambiente festivo a su diseño. Una forma de abordarlo es agregar una animación de salpicaduras de colores al fondo de la sección de tu héroe. El enfoque seguirá estando en la copia escrita y la llamada a la acción que proporciones. En este tutorial, le mostraremos cómo crear una hermosa sección de animación de salpicaduras de colores con Divi y su configuración integrada. ¡También podrá descargar el archivo JSON de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga el diseño de la sección de The Spatter Animation Hero GRATIS
Para poner sus manos en el diseño de la sección de héroe de animación de salpicaduras gratis, primero deberá descargarlo 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!
¡Empecemos a Recrear!
Agregar nueva sección
Fondo degradado
Comience 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 degradado de su elección.
- Color 1: #070a49
- Color 2: #6f00f7
- Tipo de gradiente: lineal
- Dirección del gradiente: 148 grados
Dimensionamiento
Pase a la pestaña de diseño de la sección y agregue una altura mínima a la configuración de tamaño. Esto convertirá nuestra sección en pantalla completa.
- Altura mínima: 100vh
Espaciado
A continuación, eliminaremos todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
Visibilidad
Y para asegurarnos de que no aparezca ninguna barra de desplazamiento horizontal en nuestro diseño, ocultaremos los desbordamientos de la sección.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Añadir Fila #1
Estructura de la columna
Una vez que la configuración de la sección esté en su lugar, agregue una primera fila usando la siguiente estructura de columna:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila toque los lados izquierdo y derecho del contenedor de la sección modificando la configuración de tamaño de la siguiente manera:
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Elimine todo el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Elemento principal CSS
Y para asegurarnos de que los módulos aparezcan uno al lado del otro en tamaños de pantalla más pequeños, agregaremos una línea de código CSS al elemento principal de la fila.
|
01
|
display: flex; |
Columna 1 Animación
Una vez que la configuración general de la fila esté en su lugar, abra la configuración de la columna 1 y agregue la animación.
- Estilo de animación: Zoom
- Dirección de animación: Centro
- Intensidad de animación: 100%
Columna 2 Animación
Agregue animación a la segunda columna a continuación.
- Estilo de animación: Zoom
- Dirección de animación: Centro
- Retardo de animación: 250ms
- Intensidad de animación: 100%
Columna 3 Animación
Y también estamos usando animación para la tercera columna.
- Estilo de animación: Zoom
- Dirección de animación: Centro
- Retardo de animación: 500ms
- Intensidad de animación: 100%
Agregar módulo de imagen a la columna 1
Subir imagen de salpicadura
Es hora de agregar módulos, comenzando con un módulo de imagen en la columna 1. Cargue la imagen de salpicadura que puede encontrar en la carpeta de descarga que pudo descargar al comienzo de este tutorial.
Dimensionamiento
Pase a la pestaña de diseño del módulo y fuerce el ancho completo en la configuración de tamaño.
- Forzar ancho completo: Sí
filtros
Luego, cambie los colores del módulo usando la configuración de filtros.
- Tono: 303 grados
- Saturación: 200%
Escala de transformación
También estamos escalando la imagen en la configuración de transformación.
- Fondo: 150%
- Derecha: 150%
Efecto de desplazamiento de movimiento vertical
A continuación, pase a la pestaña avanzada y habilite un poco de movimiento vertical.
- Habilitar movimiento vertical: Sí
- Compensación inicial: 0
- Desplazamiento medio:
- Escritorio: 0 (al 50%)
- Tableta: 0 (al 70%)
- Teléfono: 0 (al 85%)
- Compensación final: 2
- Disparador de efecto de movimiento: parte inferior del elemento
Efecto de desplazamiento de movimiento horizontal
También estamos usando algo de movimiento horizontal.
- Habilitar movimiento horizontal: Sí
- Compensación inicial:
- Escritorio: -10
- Tableta y teléfono: 0
- Desplazamiento medio: 0
- Compensación final: 4
- Disparador de efecto de movimiento: parte inferior del elemento
Efecto de desplazamiento de escala hacia arriba y hacia abajo
Junto con un efecto de escala hacia arriba y hacia abajo.
- Habilitar escalado hacia arriba y hacia abajo: Sí
- Escala inicial: 100%
- Escala media: 150%
- Escala final: 200%
- Disparador de efecto de movimiento: parte inferior del elemento
Clonar módulo de imagen dos veces y colocar duplicados en las columnas restantes de la fila
Una vez que se completa el primer módulo de imagen, puede clonar el módulo completo dos veces y colocar los duplicados en las columnas restantes de la fila.
Cambiar módulo de imagen en la columna 2
Espaciado
Abra el módulo de imagen en la columna 2 y agregue un margen superior en la tableta y el teléfono.
- Margen superior: 50% (solo tableta y teléfono)
filtros
Cambia también el tono en la configuración de los filtros.
- Tono: 55 grados
Cambiar módulo de imagen en la columna 3
filtros
Luego, abra el Módulo de imagen en la tercera columna y cambie la configuración de los filtros en consecuencia:
- Tono: 309 grados
- Brillo: 0%
Añadir Fila #2
Estructura de la columna
A la siguiente fila. Utilice la siguiente estructura de columnas:
Posición
Abra la configuración de la fila y cambie la configuración de la posición de la fila en la pestaña avanzada.
- Posición: Absoluta
- Ubicación: Centro
Agregue el módulo de texto n. ° 1 a la columna
Agregar contenido H1
Es hora de agregar módulos, comenzando con un módulo de texto que contenga algún contenido H1 de su elección.
Configuración de texto H1
Cambie la configuración de texto H1 del módulo de la siguiente manera:
- Fuente del encabezado: Rubik
- Color del texto del título: #ffffff
- Tamaño del texto del encabezado: 80 px (escritorio), 50 px (tableta), 35 px (teléfono)
- Longitud vertical de la sombra del texto del título: 0,08 em
- Intensidad de desenfoque de sombra de texto de título: 0em
- Color de la sombra del texto del título: #1a005b
Agregue el Módulo de Texto #2 a la Columna
Agregar contenido
Luego, agregue otro módulo de texto con algún contenido de descripción.
Configuración de texto
Pase a la pestaña de diseño y cambie la configuración del texto en consecuencia:
- Fuente del texto: Muli
- Color del texto: #dddddd
- Tamaño del texto: 15 px (escritorio), 14 px (tableta y teléfono)
- Altura de línea de texto: 2,1 em
- Color de sombra de texto: #1a005b
Dimensionamiento
Modifique el ancho del módulo a continuación.
- Ancho: 60 % (escritorio), 100 % (tableta y teléfono)
Espaciado
Y complete la configuración del módulo agregando un margen superior e inferior en diferentes tamaños de pantalla.
- Margen superior: 6 % (escritorio), 10 % (tableta), 14 % (teléfono)
- Margen inferior: 6 % (escritorio), 10 % (tableta), 14 % (teléfono)
Agregar copia
El último módulo que necesitamos en nuestra columna es un módulo de botones. Agregue alguna copia de su elección.
Configuración de botones
Luego, ve a la pestaña de diseño y diseña el botón de la siguiente manera:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 17px
- Color del texto del botón: #ffffff
- Color de fondo del botón: #ea01a6
- Ancho del borde del botón: 0px
- Radio del borde del botón: 100px
- Fuente del botón: Rubik
- Peso de la fuente del botón: Negrita
- Estilo de fuente del botón: Mayúsculas
Espaciado
Agregue también algunos valores de relleno personalizados en la configuración de espaciado.
- Relleno superior: 20px
- Relleno inferior: 20px
- Relleno izquierdo: 60px
- Relleno derecho: 60px
Sombra de la caja
Y complete la configuración del módulo agregando una sombra de cuadro.
- Posición horizontal de la sombra del cuadro: 5px
- Posición vertical de la sombra del cuadro: 5px
- Color de sombra: #30005b
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo ser creativo con la animación integrada de Divi y los efectos de desplazamiento . Más específicamente, le mostramos cómo crear una sección de héroe de animación de salpicaduras de colores para una página de destino que está configurando para una ocasión especial. Esa ocasión podría ser, pero no se limita a, el aniversario de su empresa o una venta especial. ¡También pudo descargar el archivo JSON 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.