Un color de fondo plano hace su trabajo y desaparece. Un gradiente que lentamente oscila entre colores hace que la misma sección se sienta viva sin agregar una sola imagen. El Gradiente animado BG extensión en Complementos maestros para Elementor agrega ese efecto a cualquier sección o contenedor: elige tus colores, establece el ángulo y la velocidad, y el fondo los recorre por sí solo.
Aquí está el efecto que se ejecuta en una página en vivo. La sección cambia a través de su conjunto de colores mientras el contenido permanece colocado:
Qué hace la extensión Animated Gradient BG #
Una vez habilitados, los contenedores y secciones obtienen un Fondo de gradiente animado panel en su Estilo pestaña, justo debajo de la sección de Fondo normal. Lo cargas con dos o más colores y la extensión representa un gradiente que se anima entre ellos en un bucle. El ángulo, el tiempo total del ciclo y la suavidad de cada transición son todos tuyos para establecer.
Todo se ejecuta en CSS en el elemento mismo, por lo que no hay vídeo que alojar ni imagen que comprimir, y el texto en la parte superior permanece seleccionable y legible.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Sigue el guía de instalación primero.
- Animated Gradient BG es una extensión gratuita, por lo que no se requiere licencia Pro.
Cómo habilitar la extensión Animated Gradient BG #
Desde su panel de WordPress, vaya a Complementos maestros y abre el Extensiones pestaña. El gradiente animado BG se encuentra en el Widgets de animación grupo, junto al control deslizante Partículas y Fondo. Haga clic en su palanca para que se vuelva violeta y luego presione Guardar cambios y espere el aviso verde “Configuración guardada correctamente”.
Configure la pendiente en una sección #
Seleccione el contenedor o sección en el editor Elementor y abra Estilo pestaña. El Fondo de gradiente animado la sección con la insignia MA violeta se encuentra justo debajo de Fondo. Voltear Habilitar gradiente animado a Sí, y los controles aparecen mientras el lienzo muestra una vista previa del efecto en vivo.
- Efecto de animación: la flexibilización del movimiento del color, Ease In en la demostración.
- Angular: la dirección del gradiente, -45 en la demostración para un barrido diagonal.
- Duración total de la animación (segundos): un viaje completo a través de todos tus colores. La demostración utiliza 6 segundos.
- Suavidad de transición (segundos): qué suavemente un color pasa al siguiente, 3 segundos en la demostración. La sugerencia del panel lo dice directamente: los valores más altos crean transiciones más suaves entre colores.
- Color: un repetidor que mantiene el gradiente se detiene. Haga clic Agregar artículo para otro color, o la X para soltar uno.
Elige los colores #
Cada fila en la lista de colores abre un selector estándar. La demostración comienza con un conjunto cian, morado y naranja, luego cambia las paradas hacia adentro y hacia afuera: elimina una y el bucle se cierra, agrega un azul intenso (#3D6CD6) y el ciclo lo retoma inmediatamente. La vista previa en vivo hace que esta sea la parte divertida; Ves cómo cambia el estado de ánimo de la sección con cada parada que tocas.
Dos o tres colores en el mismo rango de temperatura se leen como elegantes. Cinco colores en toda la rueda leídos como protector de pantalla. Empieza poco a poco.
El resultado en la página #
Publique y observe cómo la sección respira a través de sus colores, como en el GIF en la parte superior de esta página. El ciclo completo toma lo que establezca como duración y luego se repite. Los botones, encabezados e imágenes se ubican en la parte superior sin verse afectados.
Una nota práctica: el texto oscuro sigue siendo legible en paradas de gradiente de luz, pero puede desaparecer en las saturadas. Revisa tu titular con todos los colores del conjunto, no solo con el primer fotograma.
Donde los gradientes animados funcionan bien #
- Secciones de héroes. Movimiento por encima del pliegue sin un video de fondo pesado.
- Bandas de llamada a la acción. Un fondo cambiante atrae la atención hacia el botón que lo coloca.
- Próximamente y páginas de destino. Un degradado de pantalla completa incluye una página escasa por sí solo.
- Sitios de cartera y agencias. Colores de marca recorriendo el encabezado, sin pagar por un vídeo de archivo.
- Secciones de precios. Un sutil gradiente detrás del plano resaltado lo separa del resto.
Vídeotutorial #
Observe la pendiente construida desde cero, desde permitir la extensión hasta el fondo móvil terminado.
Preguntas frecuentes #
¿cómo agrego un fondo degradado animado en Elementor?
Habilite la extensión Animated Gradient BG en la pestaña Extensiones de complementos maestros, seleccione una sección o contenedor y abra la pestaña Estilo. Active Habilitar degradado animado en el panel Fondo de degradado animado, agregue dos o más colores y el fondo comenzará a circular inmediatamente.
¿cuántos colores puede utilizar el degradado?
Tantos como agregues al repetidor de color. Cada clic de Agregar elemento crea otra parada de gradiente y la animación recorre todos ellos dentro de la duración total que establezca. De dos a cuatro colores cubre la mayoría de los diseños.
¿Puedo controlar la velocidad de la animación del gradiente?
Sí, con dos configuraciones. La duración total de la animación establece cuántos segundos tarda un ciclo a todo color, y la suavidad de la transición controla la forma en que cada color se mezcla gradualmente con el siguiente. Los valores de suavidad más altos generan más fotogramas clave para una transferencia más suave.
¿el gradiente animado ralentiza mi página?
El efecto se genera con animación CSS en el elemento en lugar de un archivo de vídeo o imagen, por lo que no hay nada extra que descargar. Es una de las formas más ligeras de poner movimiento en una sección de héroe.
¿la extensión Animated Gradient BG es gratuita?
Sí. Animated Gradient BG se envía con la versión gratuita de Master Addons para Elementor, en el grupo Animation Widgets de la pestaña Extensiones. La página de precios cubre lo que agregan los planes Pro.
Envolviendo #
La extensión Animated Gradient BG convierte un fondo de sección en color de movimiento lento: una lista de colores, un ángulo y dos controles deslizantes de sincronización. Mantenga la paleta ajustada, verifique el contraste del texto con cada parada y la sección generará movimiento sin peso de activo. Combina bien con el Extensión de animación de entrada para contenido que llega sobre el fondo móvil y el conjunto completo de Widgets y extensiones de complementos maestros está a una página de distancia.
