Una imagen que revela un título y un título sobre el vuelo estacionario convierte una galería plana en algo que la gente quiere tocar. El Efectos de desplazamiento de imagen widget adentro Complementos maestros para Elementor envuelve cualquier imagen en una animación flotante CSS, por lo que un encabezado, una descripción y un enlace se deslizan, se desvanecen o se hacen zoom cuando el cursor aterriza sobre ella.
Elige uno de los efectos con nombre, ingresa una imagen, agrega el texto superpuesto y luego diseña los colores y filtros. No se necesita CSS personalizado. Esta guía cubre todas las configuraciones del widget.
Qué hace el widget Image Hover Effects #
El widget toma una imagen y deja caer una superposición animada encima. Pase el cursor sobre él y podrá revelar un título, una descripción y un botón o enlace, con el movimiento proveniente de un efecto preestablecido. Los efectos nombrados (Sadie, Lily, Roxy y muchos más) animan cada uno la imagen y el texto a su manera.
Tres pestañas lo ejecutan. Contenido contiene el efecto, la imagen y el texto superpuesto. Estilo maneja la opacidad de la imagen, los filtros, los bordes y los colores del título y la descripción. Avanzado es el espaciado y la visibilidad habituales de Elementor.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
- Una imagen, además del título y el texto del título que deseas mostrar en hover.
Cómo agregar el widget Image Hover Effects #
En el editor Elementor, abra el Elementos panel y búsqueda Efectos de desplazamiento de imagen, o desplácese hasta la sección Complementos maestros (los widgets llevan una insignia MA violeta). Arrástrelo a la página y se cargará con una imagen de muestra y una superposición que pueda editar.
Elige el efecto y la imagen #
Abre el Contenido pestaña. El Efectos e imagen la sección es donde configuras la animación flotante y cargas la imagen.
- Efecto flotante: la animación con nombre utilizada en hover (más sobre esto a continuación).
- Subir imagen: elija la imagen de la biblioteca multimedia.
- Tamaño y resolución de imagen: la cosecha y la resolución sirvieron.
- ¿Enlaces o ventana emergente?: haga de la imagen completa un enlace o ábrala en una ventana emergente.
Elija un efecto flotante #
El Efecto flotante dropdown incluye una larga lista de efectos CSS con nombre. Cada uno anima la imagen y el texto superpuesto de manera diferente, desde un desvanecimiento suave hasta un título que se desliza hacia adentro.
- Sadie, Lily, Layla: desvanezca el título y el título sobre una imagen oscura.
- Roxy, Bubba, Romeo: deslice un borde o panel con el texto.
- Honey, Oscar, Marley: revela un subrayado o un título en movimiento.
- Variantes de zoom y desenfoque: escala o suaviza la imagen detrás del texto.
Seleccione la imagen #
Hacer clic Subir imagen para abrir la biblioteca multimedia, luego recoja o cargue su imagen. Cualquier efecto que elijas se ejecuta sobre esta imagen.
Agrega el título #
Abre el Encabezado sección para el título que se muestra al pasar el cursor. Escriba el texto y configure la etiqueta HTML para que se lea correctamente para SEO.
- Título: el texto del encabezado, con opción Escribir con IA.
- Etiqueta HTML: el nivel de rumbo, H1 a H6.
Agregue la descripción y el enlace #
De vuelta en el Efectos e imagen sección, la Tipo de contenido y Contenido campos establece el título que se muestra debajo del título. Aquí es donde va la línea de soporte y un botón si lo desea.
- Tipo de contenido: elija texto o un botón para el contenido superpuesto.
- Contenido: el texto del título, editado en un cuadro WYSIWYG completo.
- ¿Enlaces o ventana emergente?: apunte la imagen a una URL o ábrala en una ventana emergente.
Estilee la imagen y superponga #
Abre el Estilo pestaña. El Imagen la sección controla cómo se ve la imagen antes y durante el vuelo estacionario, y de ahí proviene en realidad gran parte del efecto.
- Opacidad de imagen y opacidad de flotación: qué visible es la imagen en reposo y sobre el vuelo estacionario.
- Filtro de imagen y filtro de imagen flotante: desenfoque, brillo y contraste para cada estado.
- Borde, radio de borde, sombra de caja: el marco alrededor de la imagen.
En la sección Imagen, separe Título y Descripción las secciones manejan el color y la tipografía del texto superpuesto.
Casos de uso comunes #
- Portafolios revelar el nombre de un proyecto y un enlace al pasar el cursor.
- Cuadrículas de equipos mostrando un nombre y un rol sobre cada foto.
- Azulejos de servicio con título y subtítulo corto por imagen.
- Miniaturas de blogs eso saca a la superficie el título de la publicación sobre el vuelo estacionario.
- Galerías de productos emparejar una imagen con un nombre y un botón.
Consejos para trabajar con el widget Image Hover Effects #
- Utilice imágenes claras. La superposición oscurece la imagen, por lo que una toma ocupada puede dificultar la lectura del texto. Una imagen más tranquila con espacio en el medio funciona mejor.
- Mantenga el título breve. Una línea debajo del título dice mejor que un párrafo metido en la superposición.
- Coincide el efecto con el contenido. Los desvanecimientos sutiles se adaptan a una cartera; Las diapositivas en negrita se adaptan a una promoción.
- Establezca la etiqueta de encabezado correcta. Utilice H2 o H3 para títulos de galería, no H1, a menos que sea el encabezado principal de la página.
- Prueba en móvil. No hay desplazamiento al tocar, por lo que verificar la superposición aún tiene sentido cuando alguien toca.
Mira el vídeo tutorial #
¿prefieres seguirlo en la pantalla? El video tutorial a continuación recorre el elemento Image Hover Effects de principio a fin, mostrando cómo funcionan los efectos, el texto superpuesto y el estilo en el editor Elementor.
Preguntas frecuentes #
¿qué es el widget Image Hover Effects en Master Addons?
Es un widget Elementor que agrega una animación flotante CSS a una imagen. Al pasar el cursor, revela un título, un título y un enlace opcional, y el movimiento proviene de un efecto preestablecido con nombre. Todo se configura desde el panel Elementor sin código.
¿cuántos efectos flotantes incluye el widget?
El menú desplegable Hover Effect contiene una larga lista de efectos CSS con nombre, como Sadie, Lily, Roxy, Bubba, Romeo, Layla, Honey y Oscar. Cada uno anima la imagen y superpone el texto de una manera diferente, por lo que eliges el que se adapta a tu diseño.
¿Puedo agregar un enlace o botón a la imagen?
Sí. La opción Enlaces o Ventana emergente convierte la imagen completa en un enlace o la abre en una ventana emergente, y el campo Tipo de contenido puede agregar un botón dentro de la superposición. Eso hace que cada imagen sea una ruta en la que se puede hacer clic hacia un proyecto, producto o página.
¿puedo mostrar un título y un título al flotar?
Sí. La sección Encabezado establece el título y su etiqueta HTML, y el campo Contenido agrega una descripción debajo. Ambos aparecen como parte de la animación flotante, por lo que la imagen permanece limpia hasta que alguien se cierne sobre ella.
¿funcionan los efectos de desplazamiento de imágenes en dispositivos móviles?
Hover es una interacción de escritorio, por lo que los dispositivos táctiles no tienen un verdadero hover. Muchos efectos aún muestran la superposición al tocar, pero debes probarlos en un teléfono y mantener el texto clave visible o accesible, especialmente si la imagen también es un enlace.
Envolviendo #
El widget Image Hover Effects convierte una imagen estática en interactiva: elija un efecto, cargue la imagen, agregue un título y un título, luego diseñe la opacidad, los filtros y el texto. Para widgets relacionados, consulte el Widget de cuadro de información y el Widget Flipbox, navega por completo Widgets y extensiones de complementos maestros, y comprueba el página de precios por lo que incluye cada plan.
