Cómo agregar efectos de desplazamiento de imagen en Elementor con WordPress

¿Está buscando una manera fácil de agregar efectos de desplazamiento de imagen en WordPress? Si es así, el complemento Image Hover Effects para Elementor es exactamente lo que está buscando. Es fácil de usar y ofrece una variedad de efectos de desplazamiento de Elementor para elegir.

Estos pueden ayudarlo a agregar información importante a las imágenes, como ubicación, precio, disponibilidad y más. Realmente abre un nuevo nivel de personalización con respecto a sus imágenes.

Hoy demostraré cómo agregar efectos de imagen con Elementor en WordPress.

¿Qué son los efectos de desplazamiento de imagen en WordPress?

Un efecto de desplazamiento de imagen es un elemento interactivo que le permite mostrar información adicional sobre una imagen de manera elegante. Hay una amplia variedad de efectos de desplazamiento para elegir, y no ralentizan su sitio web ni abarrotan su diseño.

Normalmente, una animación causará algún tipo de ralentización, pero ese no es el caso con estos efectos CSS.

Por lo tanto, son perfectos para las necesidades de cada sitio web.

Hay una variedad de usos para ellos. Por ejemplo, si su sitio web se centra en la fotografía, puede agregar un efecto de desplazamiento de imagen para mostrar dónde se tomó la foto, la fecha u otra cosa.

Otro gran uso es para la información del producto. Puede agregar una imagen de un producto y usar el efecto de desplazamiento para mostrar cuándo está disponible para ordenar, su precio u otra cosa.

El único límite es tu creatividad.

Cómo agregar efectos de desplazamiento de Elementor

Paso 1: Instalación de efectos de desplazamiento de imagen

El complemento Image Hover Effects – Elementor Addon es increíble. Como su nombre lo indica, es un complemento para Elementor Website Builder, que es uno de los mejores, si no el mejor, creador de sitios web para WordPress . Por lo tanto, debe tener ambos instalados.

El complemento ofrece 40 efectos de desplazamiento diferentes, incluidos desvanecimiento, zoom, desenfoque y más. Puede agregar un título, una descripción, establecer una etiqueta de título, agregar íconos, vincular a otras páginas (ideal para productos o afiliados), entre otras cosas.

También viene con un nuevo widget que puede aprovechar si desea ver los efectos en el pie de página o en las áreas de la barra lateral.

Comencemos haciendo clic en Complementos y seleccionando la opción Agregar nuevo en el panel de administración de la izquierda.

Busque Efectos de desplazamiento de imagen en el cuadro de búsqueda disponible. Esto abrirá complementos adicionales que pueden resultarle útiles.

Desplácese hacia abajo hasta que encuentre el complemento Image Hover Effects - Elementor Addon y haga clic en el botón "Instalar ahora" y active el complemento para su uso.

Si no tiene instalado el complemento Elementor Website Builder, verá una notificación en la parte superior de cada página que le indicará que lo instale. es requerido

Paso 2: agregue el widget de efectos de desplazamiento de imagen

Afortunadamente, agregar efectos de desplazamiento es muy fácil. Para ser claros, no puede simplemente agregar un efecto de desplazamiento a una imagen existente. En su lugar, deberá volver a insertar la imagen con el widget apropiado dentro del editor de Elementor.

Como resultado, es posible que tenga que investigar un poco en la biblioteca de medios para encontrar imágenes más antiguas, pero no debería ser tan malo. Esto significa que si desea agregar esta función en todo su sitio web, llevará bastante tiempo.

Vaya a cualquier publicación o página existente en su sitio web. También puede crear uno nuevo para probar. Una vez en él, haz clic en el botón “Editar con Elementor”.

Esto abrirá el editor de Elementor . En el lado izquierdo, busque Efectos de desplazamiento de imagen y arrastre el widget a la página o publicación.

Ahora está listo para comenzar a personalizar el widget y todas las configuraciones se pueden encontrar en el lado izquierdo.

Paso 3: Configure los efectos de desplazamiento de la imagen

Pasar por la configuración solo debería tomar uno o dos minutos, y son lo suficientemente fáciles de entender para cualquiera.

La primera opción son los efectos. Como dije antes, hay 40 para elegir y aparecen en un cuadro desplegable. Selecciona el que quieras usar.

Nota: Puede ver qué hace el efecto seleccionándolo y pasando el mouse sobre el widget que agregó a su publicación o página. Recomiendo probarlos todos si tienes tiempo.

La siguiente opción es agregar la imagen real. Simplemente haga clic en él y seleccione una imagen de su biblioteca de medios. Debajo, puede seleccionar el tamaño de la imagen.

A continuación, puede agregar un título y una etiqueta de título. El título es lo que aparecerá en el texto del encabezado, mientras que la etiqueta del título es el tipo de encabezado que aparecerá como (H2, H3, H4, etc.).

Después, puede encontrar una descripción. Aquí es donde puede agregar mucha información adicional, pero personalmente recomiendo que sea breve y directo. Ingrese la información de la descripción.

Lo siguiente es la configuración del icono. Aquí puede agregar un icono a su título. Solo aparecerá antes (a la izquierda del título) o después (a la derecha del título).

Nota: Si no ve aparecer el ícono cuando pasa el mouse sobre la imagen, eso se debe a una actualización reciente de Elementor. Para solucionar esto, haga clic en Elementor > Configuración > Avanzado y habilite la compatibilidad con Load Font Awesome 4.

Y por último está el enlace a la opción. Así es como puedes convertir tu imagen en un enlace a otra página o sitio web. Es genial para una página de ventas o un enlace de afiliado.

Siéntase libre de dejar esto en blanco si no desea agregar un enlace.

Eso cubre todas las configuraciones, haga clic en el botón Guardar o Actualizar y podrá verlo en su sitio web.

Felicitaciones por agregar efectos de desplazamiento de imagen con Elementor en WordPress.

Cada imagen no necesita un efecto de desplazamiento

Como la mayoría de los efectos, puedes tener demasiado de algo bueno. Los efectos de desplazamiento pueden ayudar en muchas áreas de su sitio web, pero vale la pena señalar que también pueden resultar molestos para algunos visitantes.

Por ejemplo, es bastante común que un usuario deje el mouse en medio de una página cuando se desplaza hacia abajo. Podrían desencadenar involuntariamente efectos de desplazamiento a medida que avanzan en la página. Si bien es bastante simple mover el mouse, puede volverse molesto.

Lo mismo ocurre con la conversión de imágenes en enlaces. Un visitante puede pensar que hacer clic en una imagen puede agrandarla o acercarla. Ser dirigido a otra página puede ser muy molesto.

Simplemente necesita encontrar el equilibrio adecuado para su sitio web y recordar escuchar los comentarios de los usuarios y estudiar cómo se interactúa con sus páginas.

Sea consistente con el uso de efectos

Una vez que encuentre la fórmula perfecta para el éxito, debe ser constante.

Puede ser muy confuso para los visitantes que no saben qué imágenes tendrán información adicional o no. De hecho, es posible que algunos ni siquiera sepan que tiene efectos de desplazamiento en su sitio web.

Para solucionar esto, puede intentar agregar algún tipo de indicación antes o debajo de sus imágenes para alertar a los visitantes. Realmente puede ayudarlo a aprovechar al máximo la función.

¿Qué tan fácil le resultó usar el complemento Elementor de efectos de desplazamiento de imagen? ¿Para qué utiliza los efectos de desplazamiento en su sitio web?