Efectos de desplazamiento de imagen
Una imagen estática simplemente se encuentra allí. Agregue efectos de desplazamiento de imagen y la misma imagen comienza a funcionar: un título se desliza, una descripción se desvanece y un clic envía a las personas a un enlace o abre una ventana emergente completa. El widget Image Hover Effects para Elementor se envía con más de 30 animaciones flotantes (desvanecimiento, zoom, diapositiva, empuje y el resto) y las configura sin escribir una línea de CSS. Se adapta a los lugares donde una imagen tiene que llevar un título, un título y una acción: carteras, cuadrículas de equipos, tarjetas de servicio y exhibiciones de productos.
Elija un efecto, elija qué hace el clic y diseñe cada capa para que coincida con su diseño. Lo que terminas es una tarjeta de imagen en la que la gente se detiene en lugar de pasar. El siguiente vídeo recorre todo, muestra cada animación y la configuración dura un par de minutos.
¿qué son los efectos de desplazamiento de imágenes?
Un efecto de desplazamiento de imagen es una animación que se activa cuando alguien mueve el mouse sobre una imagen. En lugar de permanecer plano, la imagen reacciona. Puede hacer zoom, desenfocar, cambiar de color o deslizar un panel de texto a la vista. También los verás llamados efectos de rollo de imagen o efectos de desplazamiento de fotos, y todos hacen lo mismo: tomar una imagen simple y hacerla leer como “hay más aquí, haz clic en mí”
Puedes construir todo esto a mano con CSS personalizado. Eso significa escribir las transiciones, lograr que se comporten en el móvil y volver al código cada vez que cambia el diseño. El widget Master Addons lo maneja visualmente dentro de Elementor, así que lo obtienes efectos de desplazamiento de imagen simples sin abrir un editor de código. Si desea ver el resto del kit de herramientas, explore Widgets y extensiones de complementos maestros o el Funciones de animación de Elementor.
Más de 30 animaciones flotantes prediseñadas
Las primeras impresiones ocurren al pasar el cursor. Obtienes una biblioteca de animaciones CSS que aportan tu título y descripción sin problemas, por lo que el texto llega en lugar de simplemente aparecer en la pantalla. Aplique cualquier efecto con un clic y luego recorra el editor hasta que se adapte a la imagen. Normalmente pruebo tres o cuatro antes de instalarme, ya que un efecto que se ve muy bien en una toma de paisaje amplio puede sentirse mal en un retrato ajustado.
- Desvanecerse y hacer zoom: la imagen se desvanece o aumenta mientras el texto se desvanece.
- Deslizar (arriba, abajo, izquierda, derecha): un panel de subtítulos se desliza desde cualquier borde.
- Empujar y revelar: la imagen se desplaza para dejar espacio para el título y la descripción.
- Flotar y brillar: un pequeño ascensor y un ligero barrido a lo largo de la imagen.
- Mucho para elegir: desvanecimientos silenciosos en un extremo, deslizamientos direccionales audaces en el otro.
- Se ejecuta en CSS: el movimiento se mantiene suave porque no se apoya en scripts pesados.
- Rápido de probar: intercambie efectos en el editor y vea el cambio de inmediato.
Enlaces inteligentes y contenido emergente al hacer clic
Tú decides qué sucede cuando alguien hace clic en la tarjeta. Apúntelo a cualquier URL con un enlace estándar o cambie la acción a Ventana emergente y mantenga a las personas en la página. La ventana emergente tampoco se limita al texto: establezca el tipo de contenido en Sección guardada y extrae cualquier plantilla de Elementor que ya hayas creado. Eso convierte una tarjeta de imagen en una puerta de entrada a una biografía completa, una hoja de especificaciones del producto o un formulario de contacto, y el visitante nunca sale de la página.
- Acțiuni de două clics: envíe tráfico con un enlace o mantenga a las personas en el sitio con una ventana emergente.
- Plantillas reales en la ventana emergente: utilice texto sin formato o introduzca un diseño completo de su biblioteca.
- Burlați, atunci spune: la imagen es el gancho y la ventana emergente lleva el detalle.
Control completo de contenido y estilo
Controlas cómo mira la tarjeta hasta el detalle. Cargue su imagen y establezca su opacidad y filtre por separado para los estados normal y flotante. Agregue un encabezado (elija la etiqueta HTML correcta para que ayude a la estructura de su página) y una descripción, luego diseñe cada pieza por sí sola con sus propios colores, tipos, sombras y espacios.
- Título y descripción separados: peina cada uno para que la jerarquía se lea claramente.
- Filtros de imagen: el truco de escala de grises a color en el vuelo estacionario todavía se ve bien y aquí es un cambio de una sola configuración.
- Marco de tarjeta: fondo, bordes, esquinas redondeadas, acolchado y sombras de cajas, por lo que se ubica perfectamente en su diseño.
¿cómo agregar efectos de desplazamiento de imagen en Elementor?
Puedes tener una tarjeta flotante que funcione en menos de dos minutos. Sin CSS, sin códigos cortos.
- Instale y active complementos maestros, luego edite cualquier página con Elementor.
- Busque en el panel de widgets Efectos de desplazamiento de imagen y arrástrelo a su diseño.
- Sube tu imagen y agrega un título y descripción.
- Abra el menú desplegable Hover Effect y elija una de las más de 30 animaciones.
- Configure la acción de clic en Enlace o Ventana emergente y elija una plantilla guardada para el contenido emergente.
- Diseñe el título, la descripción y el contenedor y luego publíquelos.
Una cosa que vale la pena hacer antes de publicar: obtener una vista previa de la tarjeta en un teléfono. El desplazamiento no existe al tocar, así que verifique que el comportamiento de toque tenga sentido (más sobre eso en las preguntas frecuentes). Para cada configuración establecida en orden, siga el Documentación de efectos de desplazamiento de imagen.
¿dónde utilizar los efectos flotantes en las imágenes?
- Cuadrículas del equipo: nombre y función al pasar el cursor, luego una biografía completa en una ventana emergente al hacer clic. Aquí está cómo crear una sección de miembros del equipo.
- Portafolios y galerías: un título de proyecto y un enlace “Ver estudio de caso” sobre cada foto.
- Tarjetas de servicio: una breve descripción y un enlace a la página de servicio.
- Vizualizaciones de productos: muestre la imagen del producto y luego abra las especificaciones en una ventana emergente.
- Azulejos de blog y categoría: un título flotante sobre navegación basada en imágenes.
Para conocer más formas de juntar texto e imágenes, lea 25 técnicas de texto sobre imagen de Elementor, o mire widgets de imágenes relacionados como widget de punto de acceso de imagen y el Carrusel de imágenes elementales.
Preguntas frecuentes sobre los efectos del desplazamiento de imágenes
¿funcionarán estos efectos flotantes en dispositivos móviles?
Están diseñados para computadoras de escritorio, donde hay un mouse para pasar el rato. En una pantalla táctil, el efecto generalmente se activa en el primer toque para mostrar el contenido, y el segundo toque sigue el enlace o abre la ventana emergente. Así que planifique dos toques en el móvil y asegúrese de que el texto siga siendo legible una vez que se muestre.
¿cómo creo efectos de desplazamiento de imágenes simples sin escribir CSS?
Deje caer el widget Image Hover Effects en su página, cargue una imagen, agregue un título y una descripción y elija una animación del menú desplegable. Eso es todo, no hay CSS. El widget escribe el CSS para usted detrás de escena, por lo que incluso una tarjeta flotante bastante complicada sigue siendo fácil de armar.
¿Puedo abrir la biografía de un equipo o los detalles del producto en una ventana emergente al hacer clic?
Sí. Coloque el nombre en el Título y el rol en la Descripción, configure la acción de clic en Ventana emergente y elija Tipo de contenido: Sección guardada. Cree la biografía como plantilla en Elementor y selecciónela aquí. Haga clic en la foto y ese diseño completo se abrirá en la ventana emergente.
¿Cómo elijo entre un enlace y una ventana emergente?
Utilice un enlace cuando desee mover al visitante a otra página, como una página de producto o una publicación de blog. Utilice una ventana emergente cuando desee mostrar más sin salir de la página actual: especificaciones, una breve biografía, un formulario de contacto o una vista más amplia de la imagen.
¿muchas tarjetas de imágenes animadas ralentizarán mi sitio?
Los efectos se ejecutan en CSS, por lo que un puñado en una página no es un problema. Lo que realmente ralentiza las cosas es el peso de la imagen, así que comprime tus imágenes primero. Una vez que hayas pasado aproximadamente 20 tarjetas en una página, activa la carga diferida y la primera pintura se mantiene rápida.
¿puedo usar diferentes efectos flotantes en diferentes imágenes?
La configuración cubre una tarjeta a la vez. Para mezclar efectos, agregue un widget separado de efectos de desplazamiento de imagen para cada imagen y configúrelo de forma independiente. Así es como obtienes una galería donde no todas las tarjetas se animan de la misma manera.
¿cuál es el beneficio de una "Sección guardada" en la ventana emergente sobre texto sin formato?
Una sección guardada le brinda el editor Elementor completo dentro de la ventana emergente. En lugar de texto sin formato, puede agregar imágenes, botones, columnas, videos o formularios, para que la ventana emergente se parezca al resto de su sitio en lugar de a un cuadro de texto simple.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
Duplicador de publicaciones/páginas
