La extensión Floating Effect Elementor de Master Addons Pro agrega animaciones fluidas y en bucle a cualquier widget de su sitio web. Con personalizaciones simples como traducción, rotación y escalado, puede crear sutiles movimientos flotantes o efectos dinámicos 3D.
En este tutorial, exploraremos cómo utilizar estas opciones de personalización para dar vida a sus elementos y mostraremos cómo la extensión de posicionamiento puede ayudar a ajustar la ubicación para lograr una apariencia perfecta. Al final, estará listo para crear animaciones flotantes llamativas para su sitio.
Cómo utilizar la extensión Elementor de efecto flotante
Antes de acceder a las opciones de los efectos flotantes, debe asegurarse de que la extensión esté habilitada.
Simplemente vaya a Master Addons en su panel. Entra en la pestaña de extensiones y alterna la extensión Efectos flotantes. ¡Simple!
Una vez que lo haya habilitado, puede navegar hasta la pestaña Avanzado de cualquier widget de su sitio y desplazarse hacia abajo para encontrar la extensión “efectos flotantes”. Alternarlo y verá las siguientes opciones de personalización.
1. Traducir
Esto le permite mover un elemento a lo largo de los ejes X e Y. Al ajustar la traslación en el eje X, el elemento se moverá hacia la izquierda y hacia la derecha. De manera similar, ajustar el eje Y mueve el elemento hacia arriba y hacia abajo. La combinación de ambos ejes mueve el elemento a lo largo de una línea diagonal.
2. Girar
Con esta opción, puedes rotar elementos a lo largo de los ejes X, Y y Z. Esto les da a sus elementos un efecto giratorio más dinámico.
También puede ajustar la duración y el retraso de la rotación, lo que permite transiciones más fluidas o dramáticas. Si Translate también está activado, el widget utiliza el tiempo Translate.
3. Escala
El efecto de escala te permite estirar o encoger un elemento a lo largo de los ejes X e Y. Esto crea una animación de crecimiento/reducción, haciendo que tus elementos parezcan expandirse o contraerse. Al igual que con los otros efectos, puedes ajustar la duración y el retraso para controlar el tiempo de la animación.
Al combinar estas tres opciones de personalización, puedes crear infinitas variaciones de efectos flotantes, desde movimientos sutiles hasta animaciones más complejas y llamativas.
Te recomendamos comprobarlo fuera de Elementor Pro también. Puedes combinar Elementor pro y Complementos maestros para crear cualquier tipo de sitio web que desees.
Combinando los efectos
Una de las características más poderosas del Efectos flotantes la extensión es la capacidad de combinar traducción, rotación y escalado para animaciones únicas y dinámicas. Al superponer estos efectos, puedes crear cualquier cosa, desde sutiles movimientos flotantes hasta elementos interactivos 3D completos.
Combina Traducir y Girar: Combinar la traslación con la rotación crea un efecto fluido y giratorio con movimiento a través de la pantalla. Por ejemplo, puede hacer que un elemento flote en diagonal mientras gira en su lugar para una ilusión 3D más dinámica.
Combinar traducción y escala: El uso tanto de traducción como de escalado permite que un elemento se mueva y cambie de tamaño al mismo tiempo. Esto puede crear un efecto flotante de expansión o reducción a medida que el elemento se desplaza por la pantalla.
Combina los tres: Para obtener el máximo efecto flotante, combine traducir, rotar y escalar. Esto permite animaciones complejas en las que el elemento se mueve, gira y crece/se contrae al mismo tiempo, dándole una apariencia atractiva y multidimensional.
Las posibilidades son infinitas cuando experimentas con estas combinaciones. Juega con diferentes valores de duración y retraso para ajustar la velocidad y el tiempo, creando una animación flotante verdaderamente personalizada para cualquier elemento.
Creando un efecto flotante en una imagen
Esperamos que ya sepas cómo modificar las diferentes configuraciones para la extensión Efectos flotantes.
Como beneficio adicional, te mostraremos cómo crear una sección increíble con algunas imágenes, la Efectos flotantes y Extensiones de posicionamiento:
Puedes seguir el vídeo a continuación donde te mostramos el proceso completo.
En primer lugar, elija, elijamos algunas imágenes que usaremos para crear nuestra sección.
Luego, agregamos un Flexbox o cuadrícula de ancho completo para 3 columnas y 2 filas y organizamos todas las imágenes como la siguiente captura de pantalla dentro de los cuadros apropiados.
Ahora centrémonos en la posición y el efecto flotante. Recomendamos comenzar con el posicionamiento. Revise cuidadosamente su diseño y coloque todas las imágenes y partículas con precisión antes de implementar el efecto flotante.
Hemos utilizado la extensión de posicionamiento Master Addons para posicionar con precisión las imágenes. Para comenzar, seleccione 'Relativo' dentro de la extensión de posición. Luego, proceda a alinear sus imágenes o cualquier otro elemento según sea necesario.
Hemos completado el posicionamiento de todas las imágenes y la captura de pantalla adjunta ilustra la disposición actual.
Finalmente, apliquemos el efecto flotante a las imágenes deseadas. Hemos aplicado los efectos X e Y de traducción a las imágenes de la primera y tercera columnas. El efecto Rotar Z se ha aplicado exclusivamente a la imagen de perfil. Consulte el siguiente archivo GIF para ver el resultado visual actual.
El Efectos flotantes extensión (Pro) ofrece infinitas posibilidades para animar elementos en su sitio web. Con opciones de personalización simples pero poderosas para traducción, rotación y escalado, puede crear efectos flotantes dinámicos y llamativos que atraigan a los visitantes. Cuando se combina con el Extensión de posicionamiento, tienes control total tanto sobre el movimiento como sobre la ubicación de los elementos para un diseño verdaderamente personalizado.
No tengas miedo de experimentar con diferentes configuraciones y combinaciones para encontrar el efecto flotante perfecto para tu sitio. Con un poco de creatividad, puedes mejorar tu diseño web y crear una experiencia de usuario más interactiva.
Si tiene algún problema con esta extensión, no dude en comentar aquí o contactarnos a través de nuestro Formulario de contacto del sitio web.
