Fondo de gradiente animado Elementor (Pro): secciones de gradiente en movimiento
Animated Gradient BG es una extensión Master Addons Pro que coloca un gradiente lineal que se mueve lentamente detrás de un contenedor, sección o columna. Elige dos o más colores, el ángulo, la duración y la flexibilización, y el gradiente va y viene en un bucle sin ninguna imagen o archivo de video. A menudo se utiliza para secciones de héroes, bandas de llamada a acción y páginas próximas. Para texto de colores degradados en lugar de un fondo, pruebe gratis Titular de gradiente widget.
Dos o más colores, un gradiente móvil
Agregue colores en el Color lista, una fila por color. La extensión necesita al menos dos. Los espacia uniformemente a lo largo de un gradiente lineal y repite el primer color al final, por lo que el bucle no tiene un borde duro. No hay configuraciones para posiciones de parada de color o un gradiente radial. La vista previa del editor se actualiza a medida que elige colores.
- Lista de colores: agregar, duplicar o eliminar filas. De dos a cuatro colores suelen leerse mejor.
- Colores transparentes: el degradado se asienta sobre su propia capa sobre el fondo normal de la sección, por lo que los colores con transparencia permiten que se muestre una imagen de fondo.
- Unde funcționează: contenedores, secciones y columnas, en la pestaña Estilo. Los widgets no obtienen el panel.
Ángulo, Duración y Facilitación
Ángulo establece la dirección del gradiente de -45 a 180 grados, siendo -45 el valor predeterminado. Duración total de la animación (segundos) va del 1 al 20 y por defecto al 6. Es el tiempo que tarda el gradiente en desplazarse hacia adelante y hacia atrás. Efecto animación establece la flexibilización: Lineal, Facilidad, Facilidad de entrada, Facilidad de salida, Facilidad de entrada o una de tres curvas suaves, con Diseño de materiales (Suave) como predeterminado.
- Lent și sutil: De 12 a 20 segundos funciona muy por detrás del texto del héroe.
- Siempre encendido: el bucle comienza cuando la página se carga y no tiene ningún disparador de desplazamiento o desplazamiento.
- Suavidad de transición: este control deslizante se muestra en el panel, pero no cambia la animación en la versión actual.
Fondo de gradiente de elementor frente a gradiente animado BG
La configuración de Fondo gratuita de Elementor tiene un tipo de Gradiente (verificado en Elementor 4.2.4), pero el gradiente no se mueve. Puede animarlo escribiendo fotogramas clave CSS usted mismo o usar la extensión.
| Característica | Gradiente elemental | CSS a mano | Gradiente animado BG |
|---|---|---|---|
| Precio | Gratis | Gratis | Complementos maestros Pro |
| Movimiento | Estático | Sí, escribes los fotogramas clave | Sí, incorporado |
| Colores | 2, con ubicaciones de parada | Cualquiera | 2 o más, espaciados uniformemente |
| Tipo de gradiente | Lineal o radial | Cualquiera | Sólo lineal |
| Ángulo | 0 a 360, por dispositivo | Cualquiera | -45 până la 180 |
| Velocidad y flexibilización | No | Sí | Duración 1 a 20 s, 8 opciones de flexibilización |
| Configurar en | Panel de estilo | Css personalizado | Panel de estilo |
Para un gradiente fijo, la configuración del propio Elementor es suficiente y brinda más control sobre las paradas y el tipo de gradiente. La extensión le permite escribir fotogramas clave cuando desea que se mueva el gradiente.
Relacionado: Titular de gradiente (gratis) para texto degradado, más Partículas (gratis) y Control deslizante de fondo (gratis) para otros fondos en movimiento.
Cómo agregar un fondo de gradiente animado en Elementor
Una vez activada la extensión, el panel aparece en la pestaña Estilo de cada contenedor, sección y columna. Aquí hay detalles documentación sobre fondo de gradiente animado.
- Con Master Addons Pro activo, vaya a Complementos maestros > Extensiones y encender Gradiente animado BG.
- Edite su página con Elementor y seleccione un contenedor, sección o columna.
- Abre el Estilo tabular y expandir Fondo de gradiente animado.
- Conjunto Habilitar gradiente animado a Sí. Aparecen tres colores de muestra.
- Cambia los colores en el Color lista, luego establezca Ángulo, Duración total de la animación (segundos) y Efecto animación.
- Actualice la página y verifique que su texto siga siendo legible en todos los colores.
Preguntas frecuentes sobre el gradiente animado BG
¿animated Gradient BG es gratuito?
No. Es parte de Master Addons Pro. El fondo de gradiente gratuito de Elementor es estático, por lo que un gradiente en movimiento necesita esta extensión o su propio CSS.
¿Puedo usarlo sobre una imagen de fondo?
Sí. El degradado se dibuja en su propia capa sobre el fondo normal de la sección. Elija colores con cierta transparencia en el selector de color y la imagen de fondo se mostrará.
¿Cuántos colores puedo usar en una animación?
Al menos dos, y tantos como agregues después. Los colores están espaciados uniformemente, por lo que de dos a cuatro suelen dar el resultado más limpio.
¿La animación se reproduce todo el tiempo o puedo hacer que se reproduzca en el hover?
Se reproduce todo el tiempo. El bucle comienza cuando la página se carga y no tiene disparador de desplazamiento o desplazamiento. Para un efecto de solo desplazamiento necesitarás tu propio CSS, por ejemplo con Css personalizado extensión.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
