Animación de entrada de Elementor: 70 efectos de desplazamiento para cualquier elemento
Las primeras impresiones se mantienen. En lugar de dejar que su contenido simplemente aparezca, haz que llegue. El Animación de entrada la extensión, parte de Master Addons Pro, agrega movimiento a cualquier elemento Elementor en el momento en que aparece a la vista 70 efectos para elegir entre: desvanecimientos, diapositivas, máscaras, rotaciones, zooms, volteretas, pulsos y rebotes. Estableces la duración, el retraso, la flexibilización y la repetición del recuento, para que un encabezado pueda desplazarse suavemente mientras aparece una fila de íconos de funciones uno tras otro. Sin CSS, sin fotogramas clave, solo algunas configuraciones en la pestaña Avanzado.
Úselo bien y una animación de entrada desvía la vista hacia abajo en la página y hace que el sitio se sienta vivo en el primer desplazamiento. Úselo en todo y se convertirá en ruido. El siguiente vídeo cubre los conceptos básicos y, más abajo, entro en la lista completa de efectos, cómo aplicar una animación en una sección completa y cómo conseguir el tiempo correcto.
¿qué es una animación de entrada?
Una animación de entrada es el movimiento que hace un elemento cuando entra en la pantalla. El visitante se desplaza, un encabezado, una imagen o un botón golpea la ventana gráfica y se desvanece, se desliza o rebota en su lugar en lugar de haber estado sentado allí todo el tiempo. Los verás llamados efectos de entrada, animaciones de desplazamiento o animación de entrada a un sitio web. Misma idea cada vez: una página estática que comienza a reaccionar a medida que avanzas hacia abajo.
Puedes escribir todo esto tú mismo con animaciones CSS. Entonces los fotogramas clave son tuyos de mantener, al igual que el comportamiento responsivo en cada tamaño de pantalla. Los complementos maestros kit de herramientas de animación lo mueve a la configuración del elemento, por lo que elige un efecto de un menú desplegable y omite el código.
Una biblioteca de 70 efectos de entrada
Con 70 ajustes preestablecidos, existe una forma adecuada de introducir casi cualquier sección. ¿Lo quieres silencioso? Desvanecerse. ¿Quieres energía? Rebota o Jack In the Box. ¿Después de algo más deliberado? Flip In o Mask From. Esa extensión te permite darle a las secciones su propio carácter: tranquila y suave para una declaración de misión, un poco divertida para la fila de características.
- Se desvanece: Desvanece hacia adentro, además de arriba, abajo, izquierda y derecha con variaciones numeradas, para llegadas tranquilas.
- Diapositivas y máscaras: Deslízate desde y enmascara desde en las cuatro direcciones.
- Rotaciones y volteretas: Gírelo hacia cada esquina y gírelo hacia arriba, abajo, izquierda y derecha.
- Zooms și scări: Acérquese, amplíe y baje, cada uno con variaciones.
- Efecte de atenție: Pulse In, Pulse Out, Shake, Bounce In y Jack In the Box para un héroe o un CTA.
- Coincidir el efecto con el trabajo: los más fuertes en un llamado a la acción, un suave desvanecimiento en el cuerpo del texto.
- Vista previa antes de comprometerse: el editor reproduce el efecto tan pronto como lo eliges.
Duración, retraso y facilitación del control
El tiempo es donde se ganan o pierden la mayoría de las animaciones, y esto es más que un interruptor de encendido/apagado. Establecer el Duración en milisegundos para hacer un movimiento rápido, ágil o lento y prolongado. Agregar un Retraso entonces, una fila de elementos viene uno tras otro en lugar de todos a la vez. Elige un Facilitación curva para que el movimiento se acelere y desacelere como lo haría un objeto real, en lugar de deslizarse a un ritmo robótico y plano.
- Establece la velocidad: 500 ms se sienten enérgicos, 1500 ms se sienten relajados. Ese número cambia todo el estado de ánimo.
- Aumentar una secuencia: sube el retardo un nivel en cada ícono consecutivo y aparecen uno por uno.
- Elige el flexibilizante: La facilidad (arranque rápido, parada suave) se lee como natural en la mayoría de las entradas. Es a quien llego primero.
- Repetă-l: Repetir recuento reproduce el efecto de 1 a 5 veces o en bucle.
Animación de entrada incorporada de Elementor frente a complementos maestros
Elementor ya te permite elegir una animación de entrada gratis en Avanzado, Efectos de movimiento. Eso está bien para un desvanecimiento simple. La extensión Master Addons es para páginas donde desea un control más preciso sobre cómo llega cada elemento.
| Efectos del movimiento elemental | Animación de entrada de complementos maestros | |
|---|---|---|
| Plan | Gratis | Complementos maestros Pro |
| Duración | Lento, Normal o Rápido | Cualquier valor en milisegundos |
| Retraso | Milisegundos | Milisegundos |
| Facilitación | No disponible | 30 curvas, desde Lineal hasta Back In Out |
| Repetir recuento | No disponible | 1 a 5 veces, o infinito |
| Diferente efecto por dispositivo | Sí | No, una configuración para todos los puntos de interrupción |
| Efectos | Ajustes preestablecidos de Elementor | 70 efectos, incluyendo máscaras, volteretas y pulsos |
¿cómo establecer una animación de entrada predeterminada para todos los elementos?
La gente pregunta mucho sobre esto: ¿puedes aplicar una animación de entrada a todo a la vez en Elementor? Respuesta directa, el núcleo de Elementor no tiene un único interruptor global que anime todos los elementos del sitio. Lo que funciona en la práctica es animar a nivel de contenedor o sección y luego reutilizar esas configuraciones.
- Seleccione el sección o contenedor en lugar de cada widget dentro de él. Abrir Avanzado → Animación de entrada de complementos maestros y elige tu efecto. Luego, todo el bloque llega junto a medida que se desplaza.
- Para reutilizar el mismo movimiento, haga clic derecho en el elemento y presione Copiar, atunci Estilo de pasta a la siguiente sección. La configuración de animación va junto con el estilo, por lo que la configuras una vez y la pegas en la página.
- Para una cascada en lugar de que todo se dispare juntos, mantenga el efecto igual y aumente el Retraso un poco en cada sección a medida que desciendes.
Eso le brinda una animación de entrada consistente en todos sus elementos sin tocar el código, que es lo más predeterminada que le brinda Elementor.
¿dónde ayudan más las animaciones de entrada?
- Secțiuni de hero: un desvanecimiento en el titular, luego un breve retraso en el botón debajo.
- Filas de características: escalona los íconos para que aterricen uno por uno.
- State și contări: a Haga zoom a medida que los números se desplazan hacia la vista.
- Testimonios y logotipos: un suave desvanecimiento para que no se rompan abruptamente.
- Llamados a la acción: un rebote o un gato en la caja en el punto donde alguien decide.
La animación de entrada es parte de Complementos maestros Pro. Para movimiento más allá del primer pergamino, mire Efectos flotantes, Revelar y Transforma, o navega por completo Funciones de animación de complementos maestros.
Preguntas frecuentes sobre animación de entrada
¿muchas animaciones de entrada ralentizarán mi sitio web?
En una página con docenas de elementos animados puede agregar algo de peso, pero los efectos son livianos para empezar. La verdadera solución es la moderación: animar las secciones clave y los titulares, no todos los párrafos. Algunos bien ubicados apenas se registran. Si tienes en mente el tiempo de carga, estos consejos para acelerar los sitios Elementor ayuda.
¿por qué mi animación de entrada Elementor no funciona?
Suele ser una de tres cosas. La animación solo se activa la primera vez que el elemento ingresa a la ventana gráfica, así que desplácese hacia abajo para probarlo en lugar de volver a desplazarse hacia arriba. Asegúrese de que el efecto esté en el elemento real y no en un contenedor vacío alrededor de él. Y borre su complemento de almacenamiento en caché después de publicarlo, ya que una página almacenada en caché servirá la versión anterior sin la animación.
¿Puedo usar diferentes animaciones en escritorio y móvil?
No con esta extensión. Su configuración se aplica en cada punto de interrupción, así que elija un efecto que aún se vea bien en una pantalla pequeña. La animación de entrada de Motion Effects de Elementor se puede configurar por dispositivo, lo que ayuda si el diseño de un teléfono necesita algo más tranquilo.
¿en qué se diferencia esto de las animaciones de entrada del propio Elementor?
El editor gratuito de Elementor tiene un control básico de animación de entrada en Avanzado, Efectos de movimiento, con una duración preestablecida y un retraso. Esta extensión es parte de Master Addons Pro y le brinda 70 efectos, duración y retraso en milisegundos, 30 curvas de flexibilización y un recuento de repeticiones. Para el ritmo, Ease Out se adapta a la mayoría de las entradas.
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
