Cómo crear colores de fondo animados con Divi
Publicado: 2019-06-01Las opciones de animación de Divi pueden convertir rápidamente una página ya hermosa en una atractiva también. A estas alturas, todos nos hemos acostumbrado a las diferentes animaciones que están integradas en los diversos elementos de diseño que te proporciona Divi. ¿Pero sabías que también puedes usar estas animaciones para resaltar una opción de diseño específica?
En este tutorial, nos centraremos en crear colores de fondo animados. Para lograr el resultado deseado, usaremos un módulo divisor para su color de fondo y colocaremos un módulo de texto encima. Esperamos que este tutorial lo inspire a agregar colores de fondo animados a los próximos proyectos de diseño web.
¡Hagámoslo!
Avance
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue el diseño de color de fondo animado GRATIS
Para poner sus manos en el diseño de color de fondo animado gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
¡Empecemos a recrear!
Suscríbete a nuestro canal de Youtube
Agregar nueva sección
Espaciado
Lo primero que deberá hacer es agregar una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y agregue algunos valores de relleno personalizados.
- Acolchado superior: 5vw
- Acolchado inferior: 17vw
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
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 de la pantalla.
- Usar ancho de canalón personalizado: Sí
- Ancho de la canaleta: 1
- Ancho: 100%
- Ancho máximo: 100%
Agregue el módulo divisor n. ° 1 a la columna
Visibilidad
Es hora de comenzar a agregar los diversos módulos que necesitamos, comenzando con un módulo divisor. Este módulo divisor se utilizará por su color de fondo, tamaño y animación. Asegúrese de que la opción 'Mostrar divisor' esté desactivada.
- Mostrar divisor: No
Color de fondo
Vaya a la configuración de fondo y agregue el siguiente color de fondo:
- Color de fondo: # 212121
Espaciado
Continúe con la configuración de espaciado y dé a su módulo la forma deseada usando la unidad de altura de la ventana gráfica.
- Acolchado superior: 30vh
- Acolchado inferior: 30vh
Animación
Permitimos que se anime el color de fondo agregando una animación personalizada con un retraso de animación.
- Estilo de animación: diapositiva
- Repetición de animación: una vez
- Dirección de animación: Derecha
- Retraso de animación: 1000 ms
- Intensidad de animación: 88%
- Opacidad inicial de la animación: 100%
Agregar el módulo de texto n. ° 1 a la columna
Agregar contenido
El siguiente módulo que necesitamos es un módulo de texto. Agregue algo de contenido H2 y de párrafo de su elección.
Configuración de texto
Luego, vaya a la configuración de texto y modifique los valores en consecuencia:
- Fuente de texto: Didact Gothic
- Color del texto: #ffffff
- Tamaño del texto: 1.1vw (escritorio), 1.7vw (tableta), 2.5vw (teléfono)
- Altura de la línea de texto: 2.1em
- Orientación del texto: justificar
Configuración predeterminada del texto del encabezado 2
A continuación, realice algunos cambios en la configuración del texto H2.
- Fuente del encabezado 2: Abril Fatface
- Color del texto del encabezado 2: # 1c1c1c
- Encabezado 2 Tamaño del texto: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
- Altura de línea de rumbo 2: 1.8em
Colocar el cursor sobre la configuración del texto del encabezado 2
También estamos modificando el color del texto al pasar el mouse.
- Color del texto del encabezado 2: #ffffff
Clonar ambos módulos
Una vez que haya terminado de agregar y personalizar ambos módulos, puede clonarlos. En los próximos pasos de esta publicación, modificaremos los cuatro módulos para crear una animación de color de fondo procedente de ambos lados. También agregaremos una superposición a los módulos de texto para que parezca que los módulos divisores y los módulos de texto se crean en el mismo contenedor.
Modificar módulo divisor duplicado
Cambiar el color de fondo
Abra el módulo divisor duplicado y cambie el color de fondo.
- Color de fondo: # 0bbfa1
Cambiar animación
Para que la animación de fondo se muestre desde el otro lado, estamos cambiando la dirección de la animación. También agregaremos un retraso de animación ligeramente mayor para lograr el resultado deseado.
- Dirección de animación: izquierda
- Retraso de animación: 1500 ms
Modificar módulo de texto duplicado
Cambiar contenido
Continúe abriendo el módulo de texto duplicado y cambiando el contenido.
Cambiar la configuración del texto del encabezado 2
Vaya a la pestaña de diseño y cambie también la configuración del texto H2.
- Alineación del texto del encabezado 2: derecha
- Color del texto del encabezado 2: # 0cc9ad
Colocación del divisor
Módulo divisor n. ° 1
Para permitir que aparezca algo de espacio en blanco en el lado derecho del primer módulo divisor, vamos a agregar un margen derecho usando la unidad de ancho de la ventana gráfica.
- Margen derecho: 20vw
Módulo divisor n. ° 2
Abra también el segundo módulo divisor y permita que se ocupe el mismo espacio, pero en el lado izquierdo de la página.
- Margen superior: 2vw
- Margen izquierdo: 20vw
Agregar superposiciones
Módulo de texto # 1
Ahora que hemos personalizado todos los módulos en nuestra fila, podemos comenzar a crear superposiciones, comenzando con el primer módulo de texto. Agregue los siguientes valores de margen personalizados a la configuración de espaciado del módulo:
- Margen superior: -49vh
- Margen derecho: 20vw (escritorio), 15vw (tableta), 10vw (teléfono)
Módulo de texto # 2
Utilice también los siguientes valores de margen personalizados para el módulo de texto duplicado:
- Margen superior: -49vh
- Margen izquierdo: 20vw (escritorio), 15vw (tableta), 10vw (teléfono)
Salga de Visual Builder para ver el resultado
Una vez que haya creado las superposiciones, deberá salir de Visual Builder para ver el resultado.
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
Siempre estamos buscando formas de ayudarlo a superar los límites en el diseño web y crear sitios web atractivos y atractivos. En esta publicación, hemos combinado creativamente diferentes elementos de diseño y superposiciones para crear colores de fondo animados. Esta es una excelente manera de agregar una dimensión adicional a cualquier página en la que esté trabajando y hacer que su sitio web coincida perfectamente con las tendencias de diseño actuales. Si tiene alguna pregunta o sugerencia, asegúrese de 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por 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.