Divi y sus opciones de animación 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ía que también puede 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, vamos a usar 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!
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 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 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!
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 del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
Agregue el módulo divisor #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á para su color de fondo, tamaño y animación. Asegúrese de que la opción ‘Mostrar divisor’ esté deshabilitada.
- 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
Pase a la configuración de espaciado y dé a su módulo la forma deseada utilizando la unidad de altura de la ventana gráfica.
- Acolchado superior: 30vh
- Acolchado inferior: 30vh
Animación
Estamos permitiendo que el color de fondo se anime 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
- Retardo de animación: 1000ms
- Intensidad de animación: 88%
- Opacidad inicial de animación: 100%
Agregue 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 H2 y contenido 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 del texto: didáctica gótica
- Color del texto: #ffffff
- Tamaño del texto: 1.1vw (escritorio), 1.7vw (tableta), 2.5vw (teléfono)
- Altura de línea de texto: 2,1 em
- Orientación del texto: Justificar
Configuración de texto de encabezado predeterminado 2
Realice algunos cambios en la configuración de texto H2 a continuación.
- Rúbrica 2 Fuente: Abril Fatface
- Título 2 Color del texto: #1c1c1c
- Título 2 Tamaño del texto: 3vw (Escritorio), 5vw (Tableta), 7vw (Teléfono)
- Encabezado 2 Altura de línea: 1,8 em
Configuración de texto de encabezado flotante 2
También estamos modificando el color del texto al pasar el mouse.
- Título 2 Color del texto: #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 proveniente 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 color de fondo
Abra el módulo divisor duplicado y cambie el color de fondo.
- Color de fondo: #0bbfa1
Cambiar animación
Para hacer 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
- Retardo de animación: 1500ms
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
Pase a la pestaña de diseño y cambie también la configuración de texto H2.
- Encabezado 2 Alineación de texto: Derecha
- Título 2 Color del texto: #0cc9ad
Posicionamiento del divisor
Módulo divisor #1
Para permitir que aparezca un espacio en blanco en el lado derecho del primer módulo divisor, agregaremos un margen derecho usando la unidad de ancho de la ventana gráfica.
- Margen Derecho: 20vw
Módulo divisor #2
Abra también el segundo módulo divisor y deje 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 las 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 hermosos 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 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.