Cada vez es más difícil que el usuario de páginas web se concentre y preste atención a algo, ya que reciben una gran cantidad de estímulos simultáneos de forma constante. Por ello, deberíamos utilizar herramientas o diseños para dirigir a estos usuarios a lo que realmente nos interesa, es aquí cuando encontramos los Efectos de Movimiento. Gracias a Elementor, podemos crear increíbles efectos en nuestra web que la conviertan en algo mucho más dinámico y ayuden al usuario a encontrar lo que necesita.

¿Pero qué son?

Los efectos de movimiento o “animaciones” son efectos visuales que se aplican a una página web para dar movimiento a los elementos que la componen, logrando así un diseño único que atraiga a los usuarios. Una de las páginas que destaca en este tema es SHEIN, ya que en cuanto entras al sitio web prácticamente se ve todo en movimiento.

¿Cómo surgieron?

En los inicios de Internet, los antiguos creadores de páginas web tenían un estilo más estático, ya que el movimiento de imagen era una herramienta novedosa que solo se veía en la televisión, además de que los objetivos principales era que la página tuviera un buen diseño e incluir la información necesaria. Básicamente, las páginas web eran una imitación virtual de la prensa, que era uno de los medios más usados del momento.

Pero los programadores se dieron cuenta de que para mejorar la navegación web a nivel usuario debían incluir un sistema más sencillo, visual e intuitivo. Por lo que incluyeron acciones de la vida real como, por ejemplo, la acción de pasar las hojas en un álbum de fotos pero de forma virtual en una página web.

¿Qué tipos hay?

Existe un gran abanico de posibilidades para hacer que tu sitio web sea único e innovador, atrayendo así a usuarios y futuros clientes. A continuación, enumeramos los mejores efectos visuales para tu web.

• Slider o carrusel de imágenes: Este efecto es muy básico para cualquier web, ya que le da un toque más visual y es super intuitivo de utilizar. Se trata de una colección de fotos que se van deslizando al hacer click en unos círculos de la parte inferior, o bien con flechas a ambos lados.

• Fondo fijo: Como su nombre indica, se trata de que por más que te deslices por la web, el fondo siga ahí al mismo tiempo. Es una función muy útil en dispositivos móviles o tablets para tener en todo momento la imagen de marca o producto junto con la información más relevante.

• Elementos ocultos: Se trata de elementos que no aparecen pero que, al pasar el ratón se hacen visibles. Es una gran función para las listas de menú de la página principal, ya que si el usuario necesita información pasará el ratón para encontrar lo que necesite.

• Transparencia: A medida que vas avanzando por la página, pueden ir apareciendo o desapareciendo elementos. Es algo muy útil, ya que los elementos que sean necesarios aparecerán en el momento concreto que el usuario los necesite y desaparecerán cuando ya no sean útiles para la vista.

• Desplazamiento a la derecha o a la izquierda: Son una serie de movimientos que atraen al usuario medio, ya que llaman la atención al ver un fondo simple y, casi de forma automática, aparecer texto o imágenes a medida que vas avanzando por la página.

Términos previos que debes conocer

Para la creación de efectos de movimiento con la herramienta de Elementor debes conocer y entender los siguientes términos:

• Widget: El término en español no es exacto, por lo que algo similar sería “cosa”, “aparato” o “dispositivo de control”. Pero dentro de Elementor, los widgets funcionan como áreas dinámicas de un sitio web, las cuales se pueden completar con contenidos individuales, funciones, archivos audiovisuales o extractos de textos. En ellos se muestra información en invitan a los usuarios a actuar de distintas maneras, como pueden ser botones, menús desplegables o formularios entre otros.

• CSS: Cuando nos encontramos en la situación de que queremos añadir un widget y no es exactamente lo que queremos, entra el término CSS. Las siglas traducidas significan Hojas de Estilo en Cascada, las cuales ayudan a personalizar tu página web. Para explicarlo de alguna forma, CSS es como un lenguaje que describe cómo aparecen los elementos en las páginas web, siendo uno de los más utilizados en todo internet.

Existen una gran variedad de efectos que podemos añadir como, por ejemplo, efectos 3D o degradados.

Guía definitiva para la creación de efectos de movimiento con Elementor

1. Editar página: Para realizar este tipo de efectos de movimiento, primero debemos tener creada nuestra página web. Entramos en nuestra web y le damos click al botón de “editar con Elementor”.

1. Escoger: A continuación, debemos elegir la sección, columna y widget al que queremos añadir efectos de movimiento. Después de elegir a qué añadir efectos, debemos ir ala pestaña “Avanzado” y hacer clic en “Efectos de movimiento”.

• Deslizamiento izquierdo: En este caso de ejemplo, vamos a hacer que la columna entre a la página web desde el lado izquierdo. Debemos hacer clic en una de las entradas llamada “Fade in left”. Y así de sencillo tienes tu columna desde el lado izquierdo.

Personalizado: Para hacer algo único en tu sitio web, en este ejemplo hemos decidido añadir una función personalizada. Dentro de la misma pestaña “Avanzado”, debemos hacer clic en una sección llamada “CSS personalizado”. Dentro de esta, encontrarás un apartado que permite añadir códigos de programación para esa sección en especial.

En este ejemplo, se ha añadido un CSS para que, al acercar el cursor a la imagen principal se vea un efecto zoom.