Haz que las páginas de Elementor se muevan! Explicación de las animaciones de Essential Addons!

hacer uso de Elementor Al crear un sitio web, si cree que la páginaDemasiado estáticoyFalta de sentido de la interaccióneste artículo es perfecto para usted. Por medio de Plugin de complementos esencialesPuede añadir fácilmenteAnimación interactiva(matem.) géneroMayor atractivo visualEl sitio web puede "vivir", ¡y sin escribir código!

Este artículo le mostrará paso a paso cómo utilizar Plugin de complementos esencialesAñada efectos de animación dinámica a los sitios web de Elementor, incluyendo formas de aplicar múltiples elementos como texto, imágenes y contenedores.

¿Qué es el complemento Essential Addons?

Complementos esenciales plug-in (componente de software)dejar (a algn.) WPDeveloper Desarrollado por la empresa, el plugin es un Constructor de páginas ElementorUn plugin de extensión mejorado desarrollado para ayudar a los usuarios a crear sitios web de WordPress más ricos y profesionales proporcionando una serie de elementos personalizados y funciones avanzadas.

Principales características:

1. Amplia biblioteca de widgets
   Incluye presentación de contenidos, marketing, datos dinámicos, integración con redes sociales, mejoras de formularios y mucho más, como botones avanzados, rotadores, infoboxes, listas de precios, barras de progreso, rejillas de filtros dinámicos y mucho más.
2. Potente presentación de contenidos
   Admite la visualización de entradas de blog, productos de WooCommerce, miembros del equipo, testimonios de clientes, etc. Con efectos de animación y filtro, la página es más vívida.
3. Integración con terceros
   integración perfecta MailchimpyWPFormsLos plug-ins más populares como Contact Form 7, Ninja Forms, etc. facilitan la creación rápida de formularios y herramientas de marketing.

Complemento Essential Addonsprocedimiento

Preparación necesaria para el enchufe

Antes de empezar, asegúrese de que los siguientes plugins están instalados y habilitados en su sitio:

• Elementor
• Complementos esenciales para Elementor

Una vez instalado y activado, vaya al backend de WordPress y vaya a la sección Complementos esenciales > ExtensionesEncuentre Animaciones interactivasactiva la función y guarda los ajustes.

Añadir animación a los elementos de la página

Abra la página que desea editar y haga clic en Uso del editor de Elementorse añaden los siguientes elementosAnimación interactivaLa metodología específica del

1. Elemento de imagen: añadir un efecto flotante

• Seleccione el elemento de imagen y haga clic en el panel izquierdo de la pantalla alto nivel Etiquetas.
• Desplácese hacia abajo para activar Animaciones interactivas Función.

• opción Efectos de transformaciónHabilite Traducir Y(movimiento del eje Y), modificado a "-20".

• En los ajustes de animación, seleccione flexibilización lineal curvas animadas y activar Efecto Yo-Yo (ida y vuelta).

• Ajustar la animaciónspan(duración(a) conprocrastinar(retraso), cuando termine pulse en la esquina inferior izquierda de la página actualización Botón.

• Previsualiza el efecto de animación, el elemento de imagen flotará arriba y abajo según los ajustes.

2. Animación de rotación de imágenes

• Seleccione otro elemento de imagen y repita los pasos anteriores para activar la función de animación.

• existe Efectos de transformación elegir entre Gire(Rotación) se modifica a 360.

• Ajuste la animación a Lineal y Activaryoyó De ida y vuelta.

• adaptespanpara"5"yReducir el número de buclespara"-1".

• Haga clic en Actualizar y previsualizar para ver la animación de rotación de la imagen.

3. Elemento de texto: efectos de deslizamiento a izquierda y derecha

• Seleccione el elemento de texto y vaya de nuevo a alto nivel > Animaciones interactivas.
• empezar a utilizar Efectos de transformaciónAjustes Traducir X(movimiento del eje X) es "35".

• establecerParámetros de animaciónIncluye tipo de mitigaciónpara "Lineal", Activarefecto yoyó.

• habilitar Desplazamiento o disparo Opciones de disparoSi desea que la animación se active, configure la animación para que se active cuando se desplace a un elemento de inicio.

• Visualización efectiva

4. Configuración de la animación del contenedor

Essential Addons también admite el uso de Bloques contenedores de Elementor Añade efectos de animación:

• Seleccione el elemento contenedor que desea activar Animaciones interactivas.
• existe Efectos de transformación establecer Gire El valor de la animación de rotación es "-5'.

• configure Transformar Origen(girando el origen) para conseguir el cambio deseado en el centro de gravedad visual colocando el "Transformar Origen X "El valor de la opción "Derecha", voluntad"Transformación Origen Y" se ha cambiado por "Fondo".

• Active Desplazamiento o Disparo para fijar las posiciones de inicio y fin del desplazamiento. Establezca los valores "Inicie Elemento "El valor de la opción se ha cambiado a "TOP", sustituir "Controlador de arranque"El valor de la opción se ha cambiado a "Centro"

• La vista previa muestra el contenedor animándose gradualmente a medida que se desplaza, e incluso muestra marcadores de los puntos inicial y final para facilitar el ajuste.

resúmenes

Las funciones de animación interactiva de Essential Addons hacen que los sitios web de Elementor sean más dinámicos e interactivos, y lo mejor de todo es que no es necesario escribir ningún código. Ya se trate de una imagen, texto o un módulo contenedor, se puede configurar con un simpleAplicación de efectos de animaciónLa experiencia visual de la página web es mucho mejor. Si desea conocer más tutoriales e información relacionados con WordPess, preste atención a la páginaRed de fluctuación de fotones¡Contiene los tutoriales más completos de WordPress con el mejor ambiente!Comunidad de intercambio de WordPress.