La animación de fondo degradado puede ser una hermosa técnica de diseño para hacer que los colores de fondo cobren vida 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 ampliar y animar un fondo degradado para crear transiciones de color en movimiento sin interrupciones.
En este tutorial, le mostraremos dos formas en que puede crear animaciones de fondo degradado en Divi . El primero combina un fragmento de CSS personalizado que anima los colores degradados elegidos en la configuración integrada de Divi. La segunda forma anima varios módulos con un fondo degradado radial sobre un fondo de fila o sección. La configuración es bastante simple para un resultado tan hermoso.
¡Empecemos!
Aquí hay un adelanto de las dos formas en que podemos crear una animación de fondo degradado en Divi.
#1 Animación de fondo degradado con fragmento de CSS y opción de fondo de Divi
#2 Animación de fondo degradado usando módulos Divi con fondos degradados radiales
Descarga el diseño GRATIS
Para poner sus manos en los diseños de este tutorial, 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!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo JSON a Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Parte 1: crear una animación de fondo degradado con un fragmento de 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.
Ajustes 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
Configuración de filas y columnas
Configuración de columna
Abra la configuración de la fila y luego actualice el relleno de la columna de la siguiente manera:
- Acolchado: parte superior 12vw
Luego agregue el siguiente CSS personalizado al elemento principal de la columna:
|
01
|
height: 40vw; |
Configuración de fila
Fondo degradado
Ahora podemos agregar el fondo degradado a la fila. Asegúrese de 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:
- Fondo degradado Color izquierdo: rgba(12,113,195,0.8)
- Fondo degradado Color derecho: rgba(131,0,233,0.8)
- Tipo de gradiente: lineal
- Dirección del gradiente: 45 grados
Tamaño
A continuación, actualice el tamaño de la fila 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 esta fila específica.
Vaya a la pestaña avanzada y agregue la siguiente clase CSS:
- Clase CSS: degradado animado
Agregar módulo de código
Una vez que se haya agregado la clase CSS a la fila, agregue un módulo de código a la fila.
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 envolver el código en las <style></style>etiquetas ya que lo estamos agregando al HTML de la página.
Resultado
Aquí está el resultado hasta ahora. El fondo degradado se amplió en un 400 % del tamaño original y se anima al moverse hacia la izquierda y hacia la derecha.
Añadir llamada a la acción
Para completar el diseño, agreguemos un módulo de llamado a la acción para que se muestre como parte del contenido.
Configuración de llamadas a la acción
Contenido
Actualice el contenido de la siguiente manera:
- Añadir título
- Añadir texto de botón
- Agregar cuerpo de texto
- URL del enlace del botón: #
- Usar color de fondo: NO
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 del título: 1,4 em
- Fuente del cuerpo: 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: 30px
- Espaciado entre letras de botones: 3px
- Fuente del botón: Roboto condensada
- Peso de la fuente del botón: Negrita
Resultado
Ahora mira 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!
No olvides que puedes cambiar fácilmente los colores del fondo de tu fila a lo que quieras. El código seguirá funcionando entre bastidores para animar el fondo por ti.
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.
Parte 2: crear una animación de fondo degradado utilizando módulos Divi con fondos degradados radiales
La segunda forma de crear una animación de fondo degradado en Divi consiste en 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í está 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 de duplicados, asegúrese de eliminar el módulo de código duplicado ya que no necesitaremos CSS personalizado para este.
Actualizar configuración de fila
Una vez que se duplicó la sección y se eliminó el módulo de código adicional, abra la configuración de la fila y cambie el tipo de degradado de fondo:
- Tipo de gradiente: Radial
Luego salte a la pestaña avanzada y elimine la Clase CSS. No lo necesitamos.
Luego actualice las opciones de visibilidad de la siguiente manera:
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Esto es necesario porque posicionaremos y animaremos los módulos divisores fuera de la fila y no queremos que estén visibles allí.
Agregar primer módulo divisor
Estamos listos para agregar nuestro primero de tres módulos divisores que contendrán un fondo degradado. Una vez que se haya dimensionado el módulo y se le haya dado un fondo degradado, posicionaremos y animaremos todo el módulo.
Continúe y agregue un módulo divisor a la fila.
Configuración del primer módulo divisor
Fondo degradado divisor
Actualice el contenido del módulo divisor de la siguiente manera:
- Mostrar divisor: NO
- Fondo degradado Color izquierdo: rgba(222,77,255,0.8)
- Tipo de gradiente: Radial
- Posición final: 70%
Tamaño del divisor
- Ancho: 50vw
- Altura: 50vw
Asegúrese de dar el mismo valor a la altura y al ancho para mantener intacto el círculo perfecto del degradado radial.
Posición
Luego, dale al divisor una posición absoluta. Esto permitirá colocar el módulo 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
Transformar escalar y traducir
Antes de agregar la animación al módulo, primero debemos aumentar el tamaño de nuestro módulo usando la opción de escala de transformación de la siguiente manera:
- Escala de transformación (X e Y): 600%
Luego, debemos colocar nuestro módulo donde queremos que esté cuando finalice la animación. Dado que queremos que la animación sea fluida (sin fallas abruptas cuando la animación se repite), 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%
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 por la sección hasta más allá del lado derecho de la ventana. Luego repetirá esto en un bucle infinito. Para ello actualiza lo siguiente:
- Estilo de animación: Diapositiva
- Dirección de animación: 5000ms
- Intensidad de animación: 85%
- Opacidad inicial de animación: 100%
- Curva de velocidad de animación: lineal
- Repetición de animación: Bucle
Resultado
Veamos el resultado hasta ahora.
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:
- Fondo degradado Color izquierdo: rgba(124,218,36,0.8)
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%
Animación
Para este módulo, agregaremos 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%
Agregar tercer módulo divisor
Para crear el tercer módulo divisor, duplique el segundo módulo divisor y actualice lo siguiente:
- Fondo degradado Color izquierdo: rgba (224,43,32,0.8)
- Transformar Traducir (Y): -100%
- Transformar traducir (X): 0%
- Dirección de animación: Arriba
- Intensidad de animación: 82%
Resultado
¡Mira el resultado!
Y no tienes que parar ahí. Puede usar diferentes estilos de animación, combinaciones de colores degradados para crear algo completamente único. ¡Incluso puedes agregar más módulos!
Pensamientos finales
En este artículo, le mostramos dos formas de agregar animación de fondo degradado en Divi. La primera forma utiliza un fragmento de CSS personalizado que funciona con el estilo de degradado de fondo Divi incorporado y crea un efecto de animación agradable y limpio. La segunda forma aprovecha las opciones integradas de Divi para animar módulos completos en segundo plano. Con suerte, esto le brindará las herramientas que necesita para ser creativo y agregar hermosos fondos degradados a su próximo proyecto.
¿De qué manera te gusta más?
Espero escuchar de usted en los comentarios.
¡Salud!