La animación de fondo degradado puede ser una técnica de diseño hermosa para hacer que los colores de fondo cobren vida en su sitio web. Es una solución perfecta para aquellos que desean algo más realista que un color de fondo estático sin tener que recurrir a un fondo de video de carga lenta. La idea básica detrás de la animación de fondo degradado es usar CSS para crear agrandar y animar un fondo degradado para crear transiciones de color en movimiento sin interrupciones.

En este tutorial, le mostraremos dos formas de crear animaciones de fondo degradado en Divi. El primero combina un fragmento CSS personalizado que anima los colores degradados elegidos en la configuración integrada de Divi. La segunda forma anima múltiples módulos con un fondo degradado radial sobre un fondo de fila o sección. La configuración es realmente bastante simple para un resultado tan hermoso.

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Vistazo

Aquí hay un vistazo de ambas maneras en que podemos crear animación de fondo degradado en Divi.

# 1 Animación de fondo degradado con fragmento de CSS y opción de fondo de Divi

Divi Gradient Animación de fondo

# 2 Animación de fondo degradado utilizando módulos Divi con fondos degradados radiales

Divi Gradient Animación de fondo

Lo que necesitas para empezar

pestañas de esquina expandibles

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo ha hecho, instale y active el Divi Theme .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (visual builder).
  3. Elija la opción «Construir desde cero».

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Parte 1: Crear una animación de fondo degradado con CSS Snippet y la opción de fondo de Divi

Para comenzar, agregue una fila de una columna a la sección predeterminada en Divi Builder.

Divi Gradient Animación de fondo

Configuraciones de sección

Luego actualice la configuración de la sección con una imagen de fondo. Nuestro fondo degradado se agregará a nuestra fila para que quede encima de esta imagen.

Luego actualice el relleno de la siguiente manera:

  • Relleno: 0px arriba, 0px abajo

Divi Gradient Animación de fondo

Configuración de fila y columna

Configuraciones de columna

Abra la configuración de la fila y luego actualice el relleno de la columna de la siguiente manera:

  • Acolchado: 12vw top

Luego agregue el siguiente CSS personalizado al elemento principal de la columna:

01
height: 40vw;

Divi Gradient Animación de fondo

Configuración de fila

Fondo degradado

Ahora podemos agregar el fondo degradado a la fila. Asegúrese de hacer que los colores del degradado sean semitransparentes si desea ver la imagen de fondo de la sección.

Actualice la configuración de la fila de la siguiente manera:

  • Color de fondo izquierdo del degradado: rgba (12,113,195,0.8)
  • Gradiente Color de fondo derecho: rgba (131,0,233,0.8)
  • Tipo de degradado: lineal
  • Dirección de degradado: 45 grados

Divi Gradient Animación de fondo

Talla

A continuación, actualice el tamaño de la fila de la siguiente manera:

  • Ancho: 100%
  • Ancho Máx .: 100%

Divi Gradient Animación de fondo

Clase CSS personalizada

Ahora que nuestro fondo degradado está en su lugar, necesitamos agregar la animación a través de CSS personalizado. Antes de agregar el código CSS, debemos agregar una clase CSS personalizada para apuntar a esta fila específica.

Vaya a la pestaña avanzada y agregue la siguiente clase CSS:

  • Clase CSS: gradiente animado

Divi Gradient Animación de fondo

Agregar módulo de código

Una vez que la clase CSS se ha agregado a la fila, agregue un módulo de código a la fila.

Divi Gradient Animación de fondo

Pegar CSS en el Módulo de Código

Luego, pegue el siguiente código CSS dentro del cuadro Código de configuración del módulo de código:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
.animate-gradient {
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
}
 
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

Asegúrese de incluir el código en las <style></style>etiquetas, ya que lo estamos agregando al HTML de la página.

Divi Gradient Animación de fondo

Resultado

Aquí está el resultado hasta ahora. El fondo degradado se ha ampliado en un 400% del tamaño original y se está animando moviéndolo hacia la izquierda y hacia la derecha.

Divi Gradient Animación de fondo

Agregar llamada a la acción

Para completar el diseño, agreguemos un módulo de llamado a la acción para que aparezca como contenido.

Divi Gradient Animación de fondo

Llamado a la acción Configuración

Contenido

Actualice el contenido de la siguiente manera:

  • Añadir título
  • Agregar texto de botón
  • Añadir texto del cuerpo
  • URL del enlace del botón: #
  • Usar color de fondo: NO

Divi Gradient Animación de fondo

Diseño

Vaya a la pestaña de diseño y actualice lo siguiente:

  • Fuente del título: Kaushan Script
  • Tamaño del texto del título: 4vw (escritorio), 30px (teléfono)
  • Altura de la línea de título: 1.4em
  • Fuente del cuerpo: Roboto
  • Tamaño del texto del botón: 16 px
  • Color del texto del botón: # 555555
  • Fondo del botón: #ffffff
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 30 px
  • Espaciado entre letras de botones: 3px
  • Fuente del botón: Roboto Condensed
  • Peso de fuente del botón: negrita

Divi Gradient Animación de fondo

Resultado

Ahora vea el resultado en la página en vivo con el contenido de la llamada a la acción en su lugar. ¡Este sería un gran encabezado para su sitio web!

Divi Gradient Animación de fondo

No olvides que puedes cambiar fácilmente los colores del fondo de tu fila a lo que quieras. El código continuará trabajando detrás de escena para animar el fondo por usted.

Divi Gradient Animación de fondo

Si está familiarizado con CSS, puede ajustar la velocidad y la dirección de la animación cambiando los valores de las propiedades de la animación.

Divi Gradient Animación de fondo

Parte 2: Crear animación de fondo degradado usando módulos Divi con fondos degradados radiales

La segunda forma de crear animación de fondo degradado en Divi implica animar uno (o más) módulos, cada uno con un fondo degradado radial. Esta técnica de diseño le brinda control total sobre la animación de cada módulo sin tener que depender de CSS personalizado externo. Además, abre la puerta a posibilidades ilimitadas de animación.

Aquí te explicamos cómo hacerlo.

Sección duplicada

Para comenzar, dupliquemos la sección que acabamos de crear para darnos un salto en el próximo diseño. Para hacerlo más fácil, cambie el modo de vista de estructura alámbrica. Luego haga clic en el icono duplicado en la sección. En la nueva sección duplicada, asegúrese de eliminar el módulo de código duplicado ya que no necesitaremos CSS personalizado para este.

Divi Gradient Animación de fondo

Actualizar configuración de fila

Una vez que la sección se ha duplicado y se ha eliminado el módulo de código adicional, abra la configuración de fila y cambie el tipo de gradiente de fondo:

  • Tipo de degradado: radial

Divi Gradient Animación de fondo

Luego salte a la pestaña avanzada y elimine la clase CSS. No lo necesitamos

Divi Gradient Animación de fondo

Luego actualice las opciones de visibilidad de la siguiente manera:

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

Divi Gradient Animación de fondo

Esto es necesario porque colocaremos y animaremos módulos divisores fuera de la fila y no queremos que sean visibles allí.

Añadir primer módulo divisor

Estamos listos para agregar nuestro primero de tres módulos divisores que contendrán un fondo degradado. Una vez que el módulo haya sido dimensionado y tenga un fondo degradado, colocaremos y animaremos todo el módulo.

Continúe y agregue un Módulo divisor a la fila.

Divi Gradient Animación de fondo

Configuración del primer módulo divisor

Fondo degradado divisor

Actualice el contenido del Módulo divisor de la siguiente manera:

  • Mostrar divisor: NO
  • Color de fondo izquierdo del degradado: rgba (222,77,255,0.8)
  • Tipo de degradado: radial
  • Posición final: 70%

Divi Gradient Animación de fondo

Tamaño del divisor
  • Ancho: 50vw
  • Altura: 50vw

Divi Gradient Animación de fondo

Asegúrese de dar el mismo valor a la altura y al ancho para mantener intacto el círculo perfecto del gradiente radial.

Posición

Luego, dale al divisor una posición absoluta. Esto permitirá que el módulo se coloque dentro de la columna / fila sin alterar el espaciado o el diseño del contenido que desea mostrar. Además, querrá actualizar el Índice Z para asegurarse de que el módulo permanezca en segundo plano y no se superponga (u oculte) el contenido real (en este caso, una llamada a la acción).

Actualice lo siguiente:

  • Posición: absoluta
  • Índice Z: -1

Divi Gradient Animación de fondo

Transformar Escalar y Traducir

Antes de agregar la animación al módulo, primero debemos aumentar el tamaño de nuestro módulo utilizando la opción de escala de transformación de la siguiente manera:

  • Escala de transformación (X e Y): 600%

Divi Gradient Animación de fondo

Luego, debemos colocar nuestro módulo donde queremos que esté el módulo cuando finalice la animación. Dado que queremos que la animación sea fluida (sin fallas bruscas cuando la animación se repita), debemos asegurarnos de que el módulo esté ubicado fuera de la columna / fila / sección.

Actualice lo siguiente:

  • Transformar Traducir (Y): 0px
  • Transformar Traducir (X): 100%

Divi Gradient Animación de fondo

Animación

Finalmente, agreguemos nuestra animación. Vamos a agregar una animación de diapositiva que comienza fuera de la ventana a la izquierda y luego se desliza a través de la sección hasta el lado derecho de la ventana. Luego repetirá esto en un bucle infinito. Para hacer esto, actualice lo siguiente:

  • Estilo de animación: diapositiva
  • Dirección de animación: 5000 ms
  • Intensidad de animación: 85%
  • Opacidad de inicio de animación: 100%
  • Curva de velocidad de animación: lineal
  • Repetición de animación: bucle

Divi Gradient Animación de fondo

Resultado

Veamos el resultado hasta ahora.

Divi Gradient Animación de fondo

Agregar segundo módulo divisor

Para agregar el segundo módulo divisor, implemente el modo de vista de estructura alámbrica y duplique el módulo divisor para crear uno nuevo.

Configuración del segundo módulo divisor

Degradado de color

Luego actualice el color del degradado de la siguiente manera:

  • Color de fondo izquierdo del degradado: rgba (124,218,36,0.8)

Divi Gradient Animación de fondo

Transformar Traducir

Después de eso, actualice la posición de aterrizaje del módulo con el siguiente valor de traducción de transformación:

Transformar Traducir (X): -60%

Divi Gradient Animación de fondo

Animación

Para este módulo, vamos a agregar una diapositiva animada a la izquierda en lugar de a la derecha como antes. Actualice la siguiente configuración de animación:

  • Estilo de animación: diapositiva
  • Dirección de animación: izquierda
  • Intensidad de animación: 100%

Divi Gradient Animación de fondo

Agregar tercer módulo divisor

Para crear el tercer módulo divisor, duplique el segundo módulo divisor y actualice lo siguiente:

  • Color de fondo izquierdo del degradado: rgba (224,43,32,0.8)

Divi Gradient Animación de fondo

  • Transformar Traducir (Y): -100%
  • Transformar Traducir (X): 0%

Divi Gradient Animación de fondo

  • Dirección de animación: arriba
  • Intensidad de animación: 82%

Divi Gradient Animación de fondo

Resultado

¡Mira el resultado!

Divi Gradient Animación de fondo

Y no tienes que parar allí. Puede usar diferentes estilos de animación, combinaciones de colores degradados para crear algo completamente único. ¡Incluso puedes agregar más módulos!

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!