La animación de fondo degradado puede ser una gran técnica de diseño para dar vida a los colores de fondo en su Sitio web. Es una solución perfecta para aquellos que quieren 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 suaves.
En este tutorial, le mostraremos cómo crear animaciones de fondo degradado en Divi. Este método combina un fragmento de CSS personalizado que anima los colores degradados elegidos en la configuración de Divi integrada. La configuración es bastante simple para un resultado tan hermoso.
Vamos a empezar!
Resultado posible
Aquí hay una descripción general de las dos formas en que podemos crear una animación de fondo degradado en Divi.
Por supuesto, el requisito previo para este tutorial es que tenga una Tema divi instalado y actualizado.
Creación de una animación de fondo degradado con el extracto CSS y la opción de fondo de Divi
Para comenzar, agregue una fila de una columna a la sección predeterminada en Divi Builder.
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 línea para que se superponga a esta imagen.
Luego actualice el relleno de la siguiente manera:
- Relleno: 0px alto, 0px bajo
Configuraciones de fila y columna
Parámetros de la columna
Abra la configuración de la fila, luego actualice el relleno de la columna de la siguiente manera:
- Acolchado: por encima de 12vw
Luego agregue el siguiente CSS personalizado al elemento de la columna principal:
height: 40vw;
Configuraciones de línea
Fondo degradado
Ahora podemos agregar el fondo degradado a la línea. Asegúrese de que los colores degradados sean semitransparentes si desea ver la imagen de fondo de la sección.
Actualice los parámetros de línea de la siguiente manera:
- Color de fondo degradado izquierdo: rgba (12,113,195,0.8)
- Color de fondo degradado a la derecha: rgba (131,0,233,0.8)
- Tipo de gradiente: lineal
- Dirección gradiente: 45 grados
Tamaño español
Luego actualice el tamaño de línea de la siguiente manera:
- Ancho: 100%
- Ancho máximo: 100%
Clase CSS personalizada
Ahora que nuestro fondo degradado está en su lugar, debemos 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 esa fila específica.
Vaya a la pestaña avanzada y agregue la siguiente clase CSS:
- Clase CSS: gradiente animado
Agregar un módulo de código
Una vez que la clase CSS se ha agregado a la línea, agregue un módulo de código a la línea.
Pegue CSS en el módulo de código
Luego pegue el siguiente código CSS en el área del Módulo de configuración del código de código:
.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 envolver el código en el <style></style>porque lo agregamos al código HTML de la página.
Resultado
Aquí está el resultado hasta ahora. El fondo degradado se ha ampliado al 400% del tamaño original y se anima moviéndolo hacia la izquierda y hacia la derecha.
Agrega una llamada a la acción
Para finalizar el diseño, agreguemos un módulo de llamado a la acción para que sea parte del contenido.
Configuración de llamada a la acción
Contenido
Actualizar el contenido como sigue:
- Agrega un título
- Agregar texto de botón
- Añadir texto del cuerpo
- URL del enlace del botón: #
- Usar color de fondo: NO
diseño
Vaya a la pestaña 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,4 em
- Cuerpo de policía: Roboto
- Tamaño del texto del botón: 16px
- 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 píxeles
- Espacio entre letras de botones: 3 px
- Fuente del botón: Roboto condensado
- Peso de la fuente del botón: negrita
Resultado
Ahora verifique el resultado en la página en vivo con el contenido del llamado a la acción vigente. Este sería un gran encabezado para tu Sitio web !
Recuerde, puede cambiar fácilmente los colores de fondo de su línea a lo que desee. El código continuará ejecutándose en segundo plano para animarlo.
Si conoce un poco de CSS, puede ajustar la velocidad y la dirección de la animación cambiando los valores de las propiedades de la animación.
Espero que este tutorial te haya resultado útil. No dudes en compartir tus opiniones al respecto.
