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

Elementor. El efecto hover

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.

Esto es un elemento de encabezado

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.

01

Columna

02

Columna

03

Columna

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

Soy un cuadro de texto. Haz click en el botón editar para cambiar este texto. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

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 color al colocarte encima

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.

awesome dynamic tech solutions web design company customized graphic design

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.

Generar una animación

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.

Efecto sobre la imagen

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.

3 comentarios

  1. Hola, gracias por su explicación, el problema es que me ha dejado con la miel ne los labios.Ya que no explica como hacer esto con Elementor.
    ¿Lo conseguiré algún día? No lo sé, pero tengo un problema y es que quiero quitar precisamente el efecto hover y en su lugar dejar solo el link al producto. Es Woocommerce. Gracias, un saludo

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Contenedores Flexbox

Contenedores Flexbox, la nueva forma de diseñar con Elementor 3.6

integrar-jetthemecore

Como integrar JetThemeCore con tu tema favorito

Elementor_Free_VS_Pro

Elementor gratis vs. Pro: Comparación de características

Cookie policy
We use our own and third party cookies to allow us to understand how the site is used and to support our marketing campaigns.

Recibe las novedades en tu buzón