Animación de entrada
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 agrega movimiento a cualquier elemento Elementor en el momento en que se desplaza hacia la vista, con 70+ efectos para elegir entre: desvanecimientos, diapositivas, rebotes, giros y zooms. Configuras la velocidad, el retraso y la flexibilización, para que un rumbo 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 más de 70 efectos de entrada
Con más de 70 ajustes preestablecidos, existe una forma adecuada de introducir casi cualquier sección. ¿Lo quieres tranquilo? Desvanecerse. ¿Quieres energía? Rebote o banda de goma. ¿Después de algo más deliberado? Voltear o deslizar. Esa extensión es útil porque 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 funciones.
- Se desvanece: Desvanecerse, desvanecerse hacia arriba, desvanecerse hacia abajo y el resto, para llegadas tranquilas.
- Diapositivas: los elementos se deslizan hacia adentro desde la izquierda, la derecha, la parte superior o la parte inferior.
- Rebota: Banda de rebote y goma para una sección que hay que notar.
- Rotaciones y volteretas: Gira y gira cuando quieras un poco de profundidad.
- Zooms y efectos especiales: Zoom In, Light Speed y otros destacados 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 la animación mientras la hojeas en la lista.
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.
¿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 tan predeterminada como la que le brinda Elementor. El completo Documentación de animación de entrada cubre cada entorno.
¿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: una banda de rebote o de goma en el punto donde alguien decide.
La extensión viene con la más ancha Widgets y extensiones de complementos maestros. El página de precios muestra en qué plano aterriza.
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. No puedes configurar la animación de forma independiente para escritorio, tableta y dispositivos móviles en Elementor. Cualquier efecto que elijas se aplica en cada punto de interrupción, así que elige uno que aún se vea bien en una pantalla pequeña.
¿cuál es la configuración de Facilitación y cuál debo usar?
La facilidad controla el ritmo del movimiento. Lineal mantiene una velocidad constante y puede parecer robótico. El Ease-Out comienza rápido y termina lento, como algo que se detiene suavemente, lo que se siente natural. El Ease-In hace lo contrario. Para la mayoría de las animaciones de entrada, opte por Ease-Out.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
Duplicador de publicaciones/páginas
