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 Extensión BG de gradiente animado en Complementos maestros Pro agrega ese efecto a cualquier contenedor, sección o columna: 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 habilitado, los contenedores, secciones y columnas 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 flexibilización son tuyos para establecer.
Un pequeño script agrega una capa degradada detrás del contenido y lo anima con CSS, por lo que no hay video que alojar ni imagen que comprimir, y el texto en la parte superior permanece seleccionable.
Antes de empezar #
- wordpress con elemento instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Sigue el guía de instalación primero.
- un Complementos maestros Pro licencia, porque Animated Gradient BG es una extensión 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): el tiempo que tarda el gradiente en desplazarse hacia adelante y hacia atrás. La demostración utiliza 6 segundos.
- Suavidad de transición (segundos): se muestra en el panel con un valor predeterminado de 3, pero en la versión actual no cambia la animación. Utilice la duración y el efecto de animación para ajustar la sensación.
- 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 un contenedor, sección o columna 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í. La duración total de la animación establece cuántos segundos tarda un ciclo completo, del 1 al 20, y el efecto de animación establece la flexibilización. El control deslizante Transition Smoothness no afecta la animación en la versión actual.
¿el gradiente animado ralentiza mi página?
El efecto es una animación CSS configurada mediante un pequeño script en lugar de un archivo de vídeo o imagen, por lo que hay muy poco extra para 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?
No. Animated Gradient BG es una extensión Pro en complementos maestros. Elementor tiene un tipo de fondo de gradiente libre, pero ese gradiente no se mueve.
Envolviendo #
El Extensión BG de gradiente animado convierte un fondo de sección en color de movimiento lento: una lista de colores, un ángulo, una duración y una relajació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, el gratis Titular de gradiente el widget cubre texto degradado y el conjunto completo de Widgets y extensiones de complementos maestros está a una página de distancia.
