Conclusiones clave
- El widget Master Addons Image Hover Effects para Elementor tiene 30 efectos de imagen flotante, cada uno elegido por su nombre en un menú desplegable Hover Effect en la pestaña Contenido.
- Ocho efectos de imagen flotante funcionan sin Master Addons Pro: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey y Oscar. Los otros 22 efectos necesitan Pro.
- La mayoría de los 30 efectos de desplazamiento de imágenes muestran un título y una descripción, seis también muestran íconos sociales, Honey usa un subtítulo y Julia muestra tres líneas de texto separadas.
- Cada efecto de desplazamiento de imagen en el widget se construye con CSS y cada widget contiene una imagen, por lo que se crea una cuadrícula de tarjetas de desplazamiento a partir de varios widgets.
- En las pantallas táctiles, los efectos de desplazamiento de imágenes suelen aparecer en el primer toque y un segundo toque sigue el enlace.
Los efectos de desplazamiento de imagen son animaciones que se reproducen cuando el puntero se mueve sobre una imagen, con mayor frecuencia para revelar un título y una descripción. A continuación se muestran 30 de ellos, todos del Widget de efectos de desplazamiento de imagen para Elementor, cada uno capturado en su estado flotante en una página real. Utilice la lista para elegir un efecto según lo que muestra y dónde encaja.
Los efectos van por nombre en el widget, por lo que los nombres a continuación son los que verá en el menú desplegable. Los primeros ocho funcionan en cada plan y el resto necesita Master Addons Pro.
Tabla de contenidos
Cómo leer estos ejemplos
Cada ejemplo muestra la tarjeta mientras el puntero está encima. Antes de pasar el cursor, la imagen es simple o muestra solo el título, según el efecto. La línea debajo de cada imagen dice lo que hay en la pantalla y sugiere un uso.
El texto, los colores y las fuentes son tuyos para cambiar. Lo que soluciona un efecto es el diseño de la superposición y cómo llega.
Los 8 efectos que funcionan sin Pro
Los primeros ocho efectos del menú desplegable están disponibles en todos los planes. Los ocho tienen un título y una descripción, excepto Honey, que muestra el título con un subtítulo.
1. Lirio
El título y la descripción se encuentran en la esquina inferior izquierda sobre una imagen ligeramente atenuada. Se adapta a las miniaturas del portafolio donde la foto debe permanecer enfocada.
2. Sadie
El título está centrado y la descripción aparece más abajo cuando un tinte cubre la imagen. Se adapta a fichas de destino y tarjetas de categoría con un breve eslogan.
3. Roxy
Dentro de la imagen se dibuja un marco delgado con el título y la descripción centrados en él. Se adapta a mosaicos de productos o servicios que necesitan un aspecto ordenado y en caja.
4. Bubba
Se dibuja un marco alrededor del centro y el título y la descripción se encuentran dentro de él. Se adapta a listados donde cada carta lleva un nombre y una línea de detalle.
5. Romeo
Dos finas líneas cruzan la imagen, con el título encima del centro y la descripción a continuación. Se adapta a tarjetas de propiedad y proyecto con una foto fuerte.
6. Layla
Las líneas horizontales y verticales forman un marco abierto alrededor del título y la descripción. Se adapta a rejillas de interiores, arquitectura y galería.
7. Miel
El título y el subtítulo comparten una línea en la parte inferior, encima de una barra de colores. Se adapta a categorías de menú y etiquetas cortas. La miel es el único efecto que utiliza el campo Subtítulo.
8. Óscar
La imagen se oscurece y aparece un marco con el título y la descripción centrados. Se adapta a categorías de tiendas y a cualquier tarjeta con dos líneas cortas de texto.
Páselos usted mismo. El Página de widget de efectos de desplazamiento de imagen tiene estos ocho efectos como cartas vivas.
Los 22 efectos Pro
Los 22 efectos restantes necesitan Master Addons Pro. Seis de ellos agregan íconos sociales y uno, Julia, muestra tres líneas de texto.
9. Marley
El título se encuentra en la parte superior derecha, una línea pasa debajo y la descripción aparece en la parte inferior derecha. Se adapta a diseños editoriales y tarjetas estilo revista.
10. Rubí
El título permanece encima de un cuadro bordeado que contiene la descripción. Se adapta a mosaicos de características donde la descripción es un llamado a la acción.
11. Milo
La descripción se encuentra en la parte superior derecha, al lado de una línea vertical, y el título está en la parte inferior derecha. Se adapta a tarjetas de imágenes con un título y un crédito.
12. Dexter
El título está en la parte superior y un marco grueso en la parte inferior contiene la descripción. Se adapta a los mosaicos promocionales en negrita.
13. Sara
El título está en la parte superior izquierda con una línea debajo y la descripción sigue a continuación. Se adapta a tarjetas estilo blog y avances de estudios de casos.
14. Zoe
Una barra de color se eleva desde abajo con el título y los íconos sociales, y la descripción se encuentra encima. Se adapta a los miembros del equipo y a las tarjetas de autor.
15. Chico
La imagen se oscurece dentro de un marco, con el título y la descripción centrados. Se adapta a galerías cinematográficas oscuras.
16. Julia
El título está en la parte superior izquierda y debajo aparecen hasta tres líneas cortas, cada una en su propia etiqueta. Se adapta a tarjetas que necesitan algunos datos parecidos a balas. Julia tiene su propio repetidor para estas líneas.
17. Goliat
Un panel oscuro cubre la parte inferior de la imagen y contiene el título y la descripción. Se adapta a tarjetas con descripciones más largas que necesitan un fondo sólido.
18. Hera
En el centro aparece un contorno de diamantes con el título y cuatro iconos sociales. Se adapta a fotografías de perfil y tarjetas de enlace social.
19. Winston
El título está en la parte superior y aparece una fila de íconos sociales en la parte inferior. Se adapta a las cuadrículas de equipos donde cada persona tiene perfiles sociales.
20. Selena
La imagen se encoge dentro de un marco mientras que el título y la descripción se encuentran cerca de la parte superior. Se adapta a lookbooks y fotografías de productos.
21. Terry
La imagen se mueve hacia una ventana más pequeña sobre un fondo oscuro, con el título en la parte inferior izquierda e íconos sociales. Se adapta a tarjetas de altavoz y personal.
22. Phoebe
El título está centrado con una fila de íconos sociales directamente debajo. Se adapta a tarjetas de perfil simples.
23. Apolo
El título se encuentra en la parte superior derecha y la descripción en la parte inferior derecha junto a una línea vertical corta. Se adapta a mosaicos de cartera mínimos.
24. Kira
El título está en la parte superior con íconos sociales en un panel de luz debajo, seguido de la descripción. Se adapta a los miembros del equipo con un rol de una línea.
25. Steve
El título y la descripción aparecen cada uno en su propia barra blanca a lo largo de la imagen. Se adapta a etiquetas de alto contraste en fotografías concurridas.
26. Moise
El título se encuentra en un cuadro en la parte superior izquierda y la descripción en un segundo cuadro en la parte inferior derecha. Se adapta a etiquetas de dos partes, como un nombre y un precio.
27. Jazz
El título y la descripción están centrados y líneas diagonales cortan las esquinas. Se adapta a obras de arte musicales y de eventos.
28. Ming
Un marco rodea el centro con el título encima de la descripción. Se adapta a tarjetas formales como premios o certificados.
29. Lexi
El título está en la parte superior izquierda y la descripción se encuentra en la parte inferior derecha dentro de una línea curva. Se adapta a fichas divertidas de productos y estilos de vida.
30. Duque
El título está en la parte superior y la descripción se encuentra en un cuadro en la parte inferior izquierda. Se adapta a tarjetas con una etiqueta corta que debería leerse como una etiqueta.
Los 30 efectos de desplazamiento de imágenes en una tabla
Esta tabla enumera todos los efectos con las capas de texto que muestra y si necesita Pro.
| Efecto | Espectáculos sobre flotar | necesita profesional |
|---|---|---|
| de lirio | Título y descripción | prohibido |
| sata | Título y descripción | prohibido |
| roxido | Título y descripción | prohibido |
| bubba | Título y descripción | prohibido |
| Romeo | Título y descripción | prohibido |
| laina | Título y descripción | prohibido |
| recoger miel | Título y subtítulo | prohibido |
| óscar | Título y descripción | prohibido |
| margaso | Título y descripción | Sí |
| de color rubí | Título y descripción | Sí |
| mil lotos | Título y descripción | Sí |
| diestro | Título y descripción | Sí |
| saraoh | Título y descripción | Sí |
| zoé | Título, descripción e iconos sociales | Sí |
| chico | Título y descripción | Sí |
| Julia | Título y tres líneas | Sí |
| Goliat | Título y descripción | Sí |
| herrar | Título e íconos sociales | Sí |
| Winston | Título e íconos sociales | Sí |
| selena | Título y descripción | Sí |
| de riego | Título e íconos sociales | Sí |
| FEBE | Título e íconos sociales | Sí |
| Apolo | Título y descripción | Sí |
| misterio | Título, descripción e iconos sociales | Sí |
| Steve | Título y descripción | Sí |
| Moisés | Título y descripción | Sí |
| disparates | Título y descripción | Sí |
| aglutinante | Título y descripción | Sí |
| lesxible | Título y descripción | Sí |
| duque | Título y descripción | Sí |
Cómo agregar uno de estos efectos en Elementor
Agregar un efecto requiere un widget y un menú desplegable.
- Edita tu página con Elementor y arrastra el Efectos de desplazamiento de imagen widget en él.
- Sube la imagen a continuación Efectos e imagen.
- Elija el efecto por nombre Efecto flotante.
- Rellena el Título y Descripción. Los efectos con íconos también muestran una sección de Enlaces sociales.
- Conjunto ¿enlaces o ventana emergente? si un clic condujera a alguna parte.
Para una cuadrícula, coloque un widget por columna y use el mismo efecto en la fila. Nuestra guía paso a paso para agregar efectos de desplazamiento de imagen en Elementor cubre también las opciones integradas. Para subtítulos que permanecen en la imagen, consulte Texto elemental sobre imagen.
Preguntas frecuentes
¿qué son los efectos de desplazamiento de imágenes?
Los efectos de desplazamiento de imagen son animaciones que se ejecutan cuando un visitante mueve el puntero sobre una imagen. La imagen puede hacer zoom, oscurecerse o cambiar de color, y un título o descripción a menudo se desliza o se desvanece sobre ella. También se denominan efectos de rollover de imagen o superposiciones de imagen.
¿qué efectos de desplazamiento de imagen funcionan sin Master Addons Pro?
Ocho de los 30: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey y Oscar. Son las primeras ocho entradas del menú desplegable Hover Effect. Los 22 restantes, desde Marley hasta Duke, necesitan Master Addons Pro.
¿puedo usar un efecto flotante diferente en cada imagen?
Sí. Cada widget Image Hover Effects contiene una imagen y un efecto, por lo que cada tarjeta en una cuadrícula puede tener la suya propia. Para una página ordenada, mantenga un efecto por fila o por sección.
¿estos efectos de desplazamiento de imágenes necesitan CSS personalizado?
No. Elige el efecto de un menú desplegable y el widget proporciona el CSS. Los colores, la opacidad y la tipografía se establecen en la pestaña Estilo. Si prefiere escribir el CSS usted mismo, algunas líneas en el widget Image de Elementor pueden producir efectos simples como zoom o escala de grises.
¿qué efecto flotante es mejor para una sección de equipo?
Los efectos con íconos sociales se ajustan a las cartas de equipo: Zoe, Hera, Winston, Terry, Phoebe y Kira. Zoe y Kira también muestran una descripción, que funciona como el rol de la persona. Los seis necesitan Master Addons Pro.
Pensamientos finales
Estos 30 efectos de desplazamiento de imágenes cubren la mayoría de los diseños que necesitará: subtítulos de esquina, marcos centrados, barras, paneles y filas de íconos. Elija por el texto que tenga. Un título corto se adapta a Lily o Oscar, una descripción más larga se adapta a Goliat y los enlaces sociales requieren a Zoe o Winston.
El Página de widget de efectos de desplazamiento de imagen tiene cartas en vivo para probar y el página de precios enumera los planes que incluyen los 30.
Lectura relacionada
