Una página donde todo se encuentra allí se lee como un PDF. Una página donde las secciones se facilitan a medida que las alcanzas se siente construida. El Animación de entrada extensión en Complementos maestros para Elementor agrega ese movimiento a cualquier elemento: elige un efecto de una biblioteca de 70 animaciones, establece el tiempo y el elemento anima el momento en que se desplaza hacia la vista. Es parte de Master Addons Pro y el Extensión de animación de entrada al elementor page muestra cómo se compara con la opción integrada de Elementor.
Aquí está el efecto en una página real. Cada sección se desvanece y aumenta al ingresar a la ventana gráfica:
Qué hace la extensión Animación de entrada #
Una vez habilitado, cada elemento Elementor obtiene un Animación de entrada sección bajo el Avanzado pestaña. Asigne una animación allí y el elemento comenzará oculto y luego reproducirá su efecto cuando el visitante se desplace hacia él. Secciones, contenedores, encabezados, imágenes, botones: cualquier cosa en el editor puede llevar su propia entrada.
La biblioteca de animación cubre toda la gama de estilos de entrada:
- Desvanecerse familia: simple, abajo, arriba, izquierda y derecha, cada una con variaciones numeradas que cambian la distancia recorrida.
- Deslizarse de Derecha, izquierda, arriba y abajo.
- Máscara de Arriba, abajo, izquierda y derecha, que limpian el elemento.
- Girar en con variantes Abajo y Arriba hacia cada esquina.
- Acercar y Ampliar/reducir familias para la profundidad.
- Voltear Arriba, Abajo, Izquierda y Derecha, más Pulso adentro, Pulso fuera, Agitar, Rebotar, y Jack en la caja.
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.
- Un activo Complementos maestros Pro licencia, ya que Entry Animation es una extensión Pro.
Cómo habilitar la extensión Animación de entrada #
Desde su panel de WordPress, vaya a Complementos maestros y abre el Extensiones pestaña. La animación de entrada conduce al Widgets de animación agrupa con una insignia Caliente, junto a Transforms y Reveal. Haga clic en su palanca para que se vuelva morada y luego presione Guardar cambios y espere el aviso verde “Configuración guardada correctamente”.
Elige una animación para un elemento #
Seleccione el elemento en el editor Elementor, abra el Avanzado pestaña y expanda el Animación de entrada sección con la insignia MA violeta. El Animación dropdown contiene toda la biblioteca. En la demostración, la sección héroe tiene un efecto Fade In mientras que el menú desplegable muestra los grupos Fade, Slide, Mask, Rotate, Zoom y Scale desplazándose.
Elija uno y el editor lo mostrará inmediatamente, para que pueda hojear las opciones hasta que el movimiento se ajuste al contenido. Fade In Up es el valor predeterminado seguro: elevación sutil, sin dramatismo, funciona en casi cualquier cosa.
Sintoniza el tiempo #
Debajo del menú desplegable Animación se encuentran cuatro controles de sincronización.
- Duración (ms): cuánto dura la animación. La demostración utiliza 5000 ms exagerados para que el movimiento sea fácil de ver; En las páginas de producción, normalmente se sienten bien entre 400 y 800 ms.
- Retraso (ms): una pausa antes de que comience el efecto, 400 ms en la demostración. El escalonamiento retrasa los elementos hermanos y entran uno tras otro en lugar de todos a la vez.
- Facilită: la curva de aceleración. El valor predeterminado funciona, pero una facilidad de salida aterriza de forma más natural para las entradas.
- Repetir recuento: cuántas veces se reproduce el efecto, de 1 a 5, o infinito.
El resultado en la página #
Publicar y desplazarse. Cada elemento se mantiene hasta que ingresa a la ventana gráfica, luego reproduce su entrada: la lista de funciones se coloca en su lugar, las tarjetas de servicio se desvanecen como una fila y la sección del equipo sigue cuando llega a ella. El GIF de animación en la parte superior de esta página muestra la secuencia exacta del sitio de demostración.
Una advertencia de la práctica: animar secciones, no todos los widgets que contienen. Una página donde llegan cincuenta elementos desde algún lugar se lee como ruido. Una entrada por sección mantiene el ritmo.
Donde las animaciones de entrada funcionan bien #
- Secciones de héroes. Un titular que se desvanece establece el tono en el momento en que se carga la página.
- Filas destacadas. Tarjetas que aumentan en secuencia, utilizando retrasos escalonados.
- Estadísticas y contadores. El movimiento atrae la atención justo cuando los números se desplazan hacia la vista.
- Testimonios. Citas que facilitan la lectura como momentos en lugar de una pared de texto.
- Largas páginas de destino. Cada sección que se anuncia mantiene el impulso de desplazamiento.
Vídeotutorial #
Mire las animaciones en movimiento, desde habilitar la extensión hasta la página terminada.
Preguntas frecuentes #
¿cómo agrego una animación de entrada en Elementor?
Habilite la extensión Animación de entrada en la pestaña Extensiones de complementos maestros, seleccione cualquier elemento en el editor y abra Animación de entrada en la pestaña Avanzado. Elija un efecto del menú desplegable Animación, establezca la duración y el retraso, y el elemento se animará cuando aparezca a la vista.
¿Qué animaciones están incluidas en la extensión?
70 efectos: Desvanecerse (arriba, abajo, izquierda y derecha, con variaciones), Deslizarse desde y enmascarar desde en las cuatro direcciones, Girar hacia cada esquina, Acercar, Ampliar y Bajar, Voltear, Pulsar y Pulse Out, Shake, Bounce In y Jack In the Box. Cada uno funciona en secciones, contenedores y widgets individuales.
¿Cuándo se reproduce la animación de entrada?
Cuando el elemento ingresa a la ventana gráfica. Los elementos encima del pliegue se animan en la carga de la página, y todo lo que está más abajo espera a que el visitante se desplace hasta él. La configuración Retraso agrega una pausa antes de que comience el efecto, que es como se tambalea una fila de cartas.
¿Puedo controlar la velocidad de animación?
Sí. La duración establece la duración del efecto en milisegundos, el retraso pospone su inicio, la flexibilización da forma a la curva de aceleración y el recuento repetido la repite. Una duración de 400 a 800 ms con un breve escalonamiento entre elementos cubre la mayoría de los diseños.
¿la extensión Animación de entrada es gratuita?
La animación de entrada n.o es parte de Master Addons Pro. El editor gratuito de Elementor tiene su propia animación de entrada básica en Avanzado, Efectos de movimiento, con una duración preestablecida y un retraso.
Envolviendo #
El Extensión de animación de entrada le da a cada elemento Elementor una entrada activada por desplazamiento: un menú desplegable para el efecto, cuatro campos para el tiempo. Mantenga las duraciones por debajo de un segundo, escalone los retrasos y anime a nivel de sección, y la página se sentirá deliberada en lugar de decorada. Para un movimiento que se repite por sí solo en lugar de reproducirse una vez en el desplazamiento, mire el Extensión de efectos flotantes (Pro), y la lista completa de Widgets y extensiones de complementos maestros tiene el resto.
