Cómo crear colores de fondo animados con Divi


Las 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

colores de fondo animados

Móvil

colores de fondo animados

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 de diseño Divi 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.

¡Comencemos a recrearnos!

(incrustar) https://www.youtube.com/watch?v=90j3f3jFQ8E (/ incrustar)

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

colores de fondo animados

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

colores de fondo animados

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áx .: 100%

colores de fondo animados

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

colores de fondo animados

Color de fondo

Vaya a la configuración de fondo y agregue el siguiente color de fondo:

  • Color de fondo: # 212121

colores de fondo animados

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

colores de fondo animados

Animación

Estamos permitiendo que el color de fondo sea animado 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%

colores de fondo animados

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.

colores de fondo animados

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

colores de fondo animados

Configuración predeterminada del texto del título 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

colores de fondo animados

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 título 2: #ffffff

colores de fondo animados

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.

colores de fondo animados

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

colores de fondo animados

Cambiar animación

Para que la animación de fondo se muestre desde el otro lado, cambiaremos 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

colores de fondo animados

Modificar módulo de texto duplicado

Cambiar contenido

Continúe abriendo el módulo de texto duplicado y cambiando el contenido.

colores de fondo animados

Cambiar la configuración del texto del título 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

colores de fondo animados

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 ventana.

  • Margen derecho: 20vw

colores de fondo animados

Módulo divisor # 2

Abra también el segundo módulo divisor y deje que ocupe el mismo espacio, pero en el lado izquierdo de la página.

  • Margen superior: 2vw
  • Margen izquierdo: 20vw

colores de fondo animados

Agregar superposiciones

Módulo de texto # 1

Ahora que hemos personalizado todos los módulos de 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)

colores de fondo animados

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)

colores de fondo animados

Salga de Visual Builder para ver el resultado

Una vez que haya creado las superposiciones, deberá salir de Visual Builder para ver el resultado.

colores de fondo animados

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

colores de fondo animados

Móvil

colores de fondo animados

Pensamientos finales

Siempre estamos buscando formas de ayudarlo a superar los límites del diseño web y crear sitios web atractivos y atractivos. En esta publicación, hemos combinado de manera creativa 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 Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube por lo que siempre será una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.