Elementor. El efecto hover, una manera de estimular la interacción con tu diseño

En el último lanzamiento, Elementor introduce el efecto hover para casi cualquier elemento, una característica que te permite añadir efectos interesantes para cada elemento cuando te sitúas sobre ellos.

El diseño web ha evolucionado de forma espectacular desde los primeros sitios web HTML estáticos. Hoy en día los diseñadores web están obligados a prestar atención a la interacción de los usuarios con los sitios web que crean. Uno de las efectos de diseño más utilizados incluye la creación de un estilo diferente cuando el usuario coloca el cursor sobre un objeto.

Como veíamos en el anterior post, en la liberación de la última versión se ha añadido el efecto hover para la mayoría de los elementos de forma que ahora es mucho más fácil incorporar una gran variedad de efectos al pasar el ratón sobre éstos. En este post explicaré los diferentes tipos de efectos que se han incluído, de forma que te puedas hacer una mejor idea de las nuevas posibilidades que tienes disponibles para tus próximos proyectos.

Diferentes tipos de efectos

Las variaciones del efecto hover que se han añadido incluyen:

• Cambiar el color de fondo al colocarte sobre el elemento
• Efecto de degradado
• Efecto hover sobre imagenes o vídeos
• Superposición de colores
• Efecto de sombra
• Efectos sobre el borde

Estas seis variaciones están disponibles a través de las secciones, columnas y la mayoría de los widgets.

Puedes preguntarte qué impacto pueden tener loa anteriores efectos sobre el porcentaje de abandonos o la tasa la conversión. En la página de Envato consideran estos como uno de las 4 mejores tendencias de diseño para aumentar la tasa de conversión.

Los efectos en acción

Vamos a repasar algunos de los efectos que se pueden añadir utilizando el efecto hover.

Cambio de color fondo de una sección

Los visitantes no sólo navegan con la vista, con el ratón también. Al añadir un efecto de transición de color al posicionarse sobre la sección, les estás dando una experiencia mucho más gratificante e interactiva. Le estás dando a la sección un énfasis adicional, además de enfocar la atención sobre ésta. En el ejemplo superior le hemos dado 1.5 segundos de transición.

Cambio de color fondo de una columna

En el siguiente ejemplo, se ve como el efecto se puede aplicar sobre una columna, incluso personalizando el efecto en cada una de ellas dentro de la misma sección.

Efecto sobre el borde una sección o columna

Aplicar el efecto sobre el borde también es una manera de conseguir enfoque y despertar interés. Este efecto tiene un tacto decorativo y elegante a la vez, adecuado para la  creación de páginas de destino (landing pages). Es también sutil, por lo que además se ajusta a sitios web de estilo minimalista.

Superposición de colores

El efecto de superposición es interesante utilizarlo con una imagen, vídeo y fondos degradados. A pesar de que no es un efecto muy usual no es por ello menos eficaz.

Efecto de sombra

Combinando este efecto con una animación de tipo zoom conseguimos de forma muy efectista el efecto como si el elemneto pasara a un plano superior destacando sobre el resto.

Efecto de movimiento de una imagen

Aplicando este efecto, conseguimos dar una sensación de movimiento, que sin duda atraerá la atención del usuario. Este se consigue variando la posición de la imagen dentro del contenedor.

Cambio de imagen al colocar el cursor encima

De la misma forma que podemos cambiar el color o superponerlo, en el caso de que el fondo sea una imagen podemos reemplazarla al colocar el cursor sobre ella. Un ejemplo podria ser una misma imagen con dos efectos visuales distintos, como por ejemplo, una de ellas en blanco y negro y la otra en color.

Cómo funciona el efecto hover

Este efecto, en realidad, no es nuevo en Elementor. Ya habían ciertos widgets que proporcionaban este efecto de la misma forma que funciona con los botones. Con las nuevas funcionalidades inlcuidas, ahora se puede añadir efectos de activación o énfasis a cualquier elemento dentro de la página, incluyendo, secciones, columnas y widgets.

En las columnas y secciones se configura el efecto desde  la pestaña «estilo del panel». Para los widgets, la configuración aparece en la pestaña «avanzado».

La transición del efecto

¿Qué es lo que produce el cambio con una transición suave y animada? La transición de los colores no se limita a volver al estado inicial otra vez, incluso se  puede configurar la velocidad de la transición de color.

El mismo control del tiempo sobre la transición es aplicable al resto de opciones que hemos visto en este post.

Conclusiones

Espero que este post te arroje algo de luz sobre cómo mejorar tu diseño animandoa tus usuarios a una mayor interacción aplicando esta nueva caractéristica. Al igual que cualquier función, esto usado en exceso puee perder su efectividad y producir el efecto contrario, por lo que se recomienda empezar a experimentar y ver cómo usarlo mientras no se sobrecargue la página con demasiados efectos.

Esto es solo una pequeña aproximación ya que estos efectos se pueden combinar tanto como te permita la imaginación.