Widget de imagen Elementor gratuito con Hover Swap, Ribbon y Tilt
Imagen avanzada es un widget de complementos maestros gratuito que agrega extras a una sola imagen. Cambie a una segunda imagen al pasar el cursor, coloque una cinta simple, de esquina o cruzada en cualquier esquina, abra la imagen en una caja de luz con un botón más opcional y agregue un efecto de inclinación que siga al cursor o una sombra coloreada. Mientras se carga la imagen, puede mostrar un marcador de posición borroso o un spinner. Estilo de estados normales y flotantes con borde, fondo y sombra de cuadro.
Cómo agregar un intercambio de imágenes flotante en Elementor
Necesita Elementor y el complemento gratuito Master Addons de WordPress.org.
- Compruebe que la imagen avanzada esté activada en Complementos maestros, widgets.
- En el editor Elementor, busque Imagen avanzada y arrástrelo a la página.
- Elija la imagen principal y un enlace de imagen si es necesario.
- Encender Mostrar imagen flotante y elige la segunda imagen, idealmente del mismo tamaño.
- Agregue una cinta, una caja de luz, una inclinación o una sombra coloreada de las secciones Contenido y Configuración. Colorized Shadow no funciona junto con la imagen flotante.
- Estilee los estados Normal y Flover en la pestaña Estilo.
Cada entorno está cubierto en el Configuración avanzada del widget de imagen.
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
Agregue un Enlace de imagen para enviar visitantes a un producto o página, o encender Abrir en caja de luz entonces un clic muestra la imagen en tamaño completo. El Botón icónico la opción agrega un ícono más sobre la imagen. Encender Precargar imagen para mostrar un marcador de posición mientras se carga la imagen: una vista previa borrosa, un cuadro de progreso o una ruleta azul, clara u oscura.
- Enlace a la página de un producto o abra una caja de luz de tamaño completo.
- Alineación izquierda, central o derecha en su columna.
- Un marcador de posición de carga para imágenes grandes.
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 widget de Imagen Avanzada es gratuito?
Sí. La imagen avanzada es parte del complemento gratuito Master Addons con imagen flotante, cintas, caja de luz, inclinación, sombra coloreada y todas las opciones de estilo.
¿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.
¿qué hace la configuración de precarga de imagen?
La imagen de precarga muestra un marcador de posición mientras se carga la imagen, por lo que los visitantes no ven un espacio vacío. Elija en blanco, una imagen de marcador de posición borrosa, una animación de cuadro en progreso o un spinner de carga azul, claro u oscuro. Es más útil para imágenes grandes.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
