Imagen avanzada
Una imagen en su sitio web debería hacer más que simplemente sentarse allí. El elemento Imagen avanzada potencia la imagen básica con funciones inteligentes e interactivas. Cree llamativos efectos flotantes de “antes y después”, agregue elegantes cintas “NUEVAS” o “VENTA”, aplique efectos de inclinación dinámica al mover el mouse e incluso agregue sombras coloridas. Con control total sobre las cajas de luz, los enlaces y todos los aspectos del estilo, puede transformar cualquier imagen en un contenido atractivo que guíe a los visitantes e impulse la interacción. Perfecto para exhibiciones de productos, portafolios o pancartas destacadas.
Imagen flotante y efectos inteligentes
Cree comparaciones instantáneas de “antes y después” o simples revelaciones flotantes. Cargue su imagen principal y luego habilite Hover Image para cargar una segunda imagen. Cuando los visitantes flotan, la imagen cambia sin problemas. Agregue una capa de sofisticación con el efecto de inclinación, que hace que la imagen se incline ligeramente a medida que el mouse se mueve sobre ella, agregando una sutil sensación 3D. Para obtener más profundidad, habilite Colorized Shadow para colocar una sombra suave y de color detrás de la imagen, haciéndola salir de la página.
- Comparaciones interactivas: Perfecto para mostrar un producto antes y después, o una vista día/noche de una propiedad.
- Efecto de inclinación atractivo: agrega una capa moderna e interactiva que responde al movimiento del cursor.
- Profundidad visual: utilice la sombra coloreada para crear separación y enfoque sin elementos de diseño adicionales.
Cintas y etiquetas personalizables
Haz que tus imágenes destaquen con cintas profesionales. Habilite la función Cinta para agregar una etiqueta como “NUEVO DISEÑO”, “MEJOR VENDEDOR” o “AGOTADO”. Elija entre diferentes estilos de cinta (como esquina, cruz o simple) y establezca la posición (arriba/abajo, izquierda/derecha). Personalice completamente los colores, la tipografía y el grosor de la cinta para garantizar que complemente perfectamente su imagen y marca.
- Resalte Información clave: comunique instantáneamente el estado, la promoción o la categoría directamente en la imagen.
- Posicionamiento flexible: Coloque la cinta en cualquier esquina para evitar cubrir partes importantes de la imagen.
- Control de estilo completo: haga coincidir el fondo, el color del texto y la fuente de la cinta con el lenguaje de diseño de su sitio.
Agregue enlace e integración de Lightbox
Cada imagen puede ser una puerta de enlace. Vincula tu imagen directamente a una URL, como la página de un producto o tu plan de precios. Alternativamente, habilite una caja de luz para permitir que los espectadores se concentren en la imagen en una hermosa ventana emergente en pantalla completa. Elija entre diferentes iconos de lightbox (como un botón más) y controle su alineación. Para obtener rendimiento, utilice la opción Precargar imagen para garantizar una carga rápida, especialmente para efectos de desplazamiento.
- Llamadas directas a la acción: vincule imágenes a páginas importantes, convirtiendo el interés visual en tráfico directo.
- Experiencia de galería mejorada: permita a los usuarios ver imágenes en detalle con una elegante caja de luz.
- Rendimiento optimizado: precargue imágenes flotantes para evitar un retraso o “destello” en la primera interacción.
Control detallado de estilo y tallas
Obtenga un control de diseño completo sobre la presentación de su imagen. Establezca el ancho máximo y la altura máximos exactos. Aplique Border Radius individualmente en cada esquina para obtener formas únicas. Estilee los estados Normal y Hover por separado con bordes, fondos y sombras de caja. Esto garantiza que su imagen luzca perfecta en cada contexto y durante cada interacción.
- Tamaño responsivo: controle las dimensiones de la imagen con precisión sin depender de un tamaño automático impredecible.
- Formas personalizadas: cree imágenes circulares, rectángulos redondeados o bordes asimétricos únicos.
- Estilo específico del estado: agregue un borde o sombra solo al pasar el cursor para indicar visualmente que la imagen es interactiva.
Preguntas frecuentes sobre imágenes avanzadas
¿el efecto Hover Image es compatible con pantallas táctiles móviles?
Sí, pero funciona un poco diferente. En los dispositivos táctiles, el primer toque a menudo activará el efecto de desplazamiento (intercambiando la imagen), si no has habilitado la caja de luz. Pero si ha habilitado la caja de luz, la caja de luz tendrá más prioridad y al tocar la primera imagen se abrirá en la caja de luz.
¿el uso del efecto de inclinación y la sombra coloreada ralentizará mi página?
Estos efectos utilizan CSS, que generalmente es liviano. Sin embargo, usarlos en una gran cantidad de imágenes en una sola página (como en una cuadrícula densa y más de 100 imágenes) podría contribuir a una carga más pesada en el dispositivo del usuario. Úselos selectivamente en imágenes clave para obtener el mejor rendimiento e impacto.
¿en qué se diferencia esto del widget de imagen básico de Elementor?
El widget básico de Elementor le permite agregar una imagen, un enlace, un título y un estilo simple. El elemento Imagen avanzada agrega un conjunto de características profesionales: intercambio de imágenes flotantes, cintas/etiquetas, efecto de inclinación, sombra coloreada, estilo de estado normal/hover separado y controles de caja de luz más granulares. Está diseñado para crear presentaciones de imágenes más atractivas e interactivas.
¿puedo usar la función de cinta sin una imagen flotante u otros efectos?
¡Absolutamente! Cada característica es independiente. Puedes tener solo una imagen con una cinta o simplemente una imagen con un efecto de inclinación. Puedes mezclar y combinar funciones como quieras. Habilite solo las que necesite para su objetivo de diseño específico.
¿cuál es el mejor uso para la configuración 'Cargar imagen'?
Habilite Precargar imagen (establecido en 'Activado') cuando esté utilizando la función Hover Image. Esto obliga al navegador a cargar la segunda imagen cuando la página se carga, aunque esté oculta. Esto evita un retraso notable o un parpadeo en blanco la primera vez que un usuario pasa el cursor sobre la imagen, lo que garantiza una experiencia de usuario fluida.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
Duplicador de publicaciones/páginas
