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.
Esta página es la referencia de configuración. Para demostraciones en vivo de los efectos y lo que es gratis o Pro, consulte el Widget de efectos de desplazamiento de imagen Elementor página.
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 ella y podrá revelar un título, una descripción y un botón o enlace, con el movimiento proveniente de un efecto preestablecido. Hay 30 efectos con nombre. Ocho son gratuitos (Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey y Oscar) y 22 más vienen con Master Addons Pro.
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 que toda la imagen sea un enlace o abra una ventana emergente (el contenido emergente necesita Pro).
Elija un efecto flotante #
El Efecto flotante el menú desplegable enumera 30 efectos CSS con nombre. Los primeros ocho son gratuitos y el resto están marcados como Pro. 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 (Pro): 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. Si su sitio utiliza Elementor AI, el enlace Escribir con IA de Elementor también aparece aquí.
- Etiqueta HTML: el nivel de rumbo, H1 a H6.
Agregue la descripción y el enlace #
Abre el Descripción sección para agregar el título que se muestra debajo del título al pasar el cursor. De nuevo en Efectos e imagen, si lo configuras ¿enlaces o ventana emergente? para aparecer, el Tipo de contenido y Contenido los campos deciden lo que muestra la ventana emergente. El contenido emergente necesita Pro.
- Tipo de contenido: lo que muestra la ventana emergente: una imagen, texto, una sección guardada, un widget guardado o una plantilla de página guardada (Pro).
- Contenido: el texto emergente, 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.
- Border, Border Radius (Pro), Box Shadow: 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?
Treinta. Ocho son gratis (Sadie, Lily, Roxy, Bubba, Romeo, Layla, Honey y Oscar) y los otros 22 vienen con Master Addons Pro. Cada uno anima la imagen y superpone el texto de una manera diferente.
¿Puedo agregar un enlace o botón a la imagen?
Sí. La opción Enlaces o Ventana emergente puede hacer que toda la imagen sea un enlace en la versión gratuita. Con Pro puede abrir una ventana emergente, mostrando una imagen, texto o una plantilla de Elementor guardada.
¿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 Descripción agrega un título 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?
El desplazamiento es una interacción de escritorio, por lo que los dispositivos táctiles no tienen un verdadero desplazamiento. 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 de efectos de desplazamiento de imagen 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.
