Widget de carrusel de imágenes Elementor: control deslizante gratuito con Lightbox y Coverflow
El widget Image Carousel en Master Addons convierte una galería de WordPress en un control deslizante deslizable y es gratuito. Usted elige las imágenes, elige cuántos se muestran en el escritorio, la tableta y el teléfono, y agrega reproducción automática, una caja de luz y un diseño de flujo de portada 3D si lo desea. Cada diapositiva se puede diseñar en su estado normal, flotante y activo, y las flechas, puntos y subtítulos siguen su marca. Funciona para portafolios, tomas de productos, recorridos por hoteles y propiedades, y logotipos de clientes.
Diseño avanzado y control de comportamiento
Tome control total sobre cómo se ve y se comporta su carrusel. Elija un diseño de carrusel o flujo de cobertura. Configure diapositivas por columna para pantallas en forma de cuadrícula y defina cuántas diapositivas desplazarse. Habilite funciones como reproducción automática, bucle, modo central e incluso un cursor de agarre para arrastrar interactivamente. La opción Observador garantiza que funcione perfectamente dentro de pestañas o acordeones.
- Diseños flexibles: cree cuadrículas de varias filas o controles deslizantes horizontales clásicos con control total sobre las columnas y el desplazamiento.
- Interacciones fluidas: establezca la velocidad de reproducción automática, la velocidad de animación y habilite la pausa al flotar para un comportamiento fácil de usar.
- Funciones adaptativas inteligentes: utilice la altura automática para evitar espacios vacíos incómodos y Observer para que funcione en contenedores ocultos.
Estilo en cada parte, en cada estado
Haz de tu carrusel una parte perfecta de tu diseño. No se limite a diseñar las imágenes, sino que también diseñe el contenedor para cada artículo. Establezca fondos, bordes, sombras y acolchados únicos para los estados Normal, Flotante y Activo. Ajuste la brecha del artículo y la opacidad general. Este nivel de detalle le permite crear tarjetas interactivas, resaltar la diapositiva activa y proporcionar información visual clara a medida que los usuarios interactúan.
- Comentarios interactivos: diseñe distintos efectos de desplazamiento (como un levantamiento de sombras o un cambio de color) para atraer a los visitantes.
- Resaltado de diapositiva activa: haga que la diapositiva central actual se destaque con un borde o fondo diferente.
- Control visual completo: personalice el radio del borde, la sombra de la caja y el relleno para un encuadre perfecto de los elementos.
Navegación y caja de luz integrada
Guíe a sus visitantes adecuadamente en el carrusel de imágenes. Diseñe una elegante navegación con flechas con íconos, colores, fondos y posicionamiento personalizados (dentro, exterior). Ocultarlos en el móvil para una apariencia más limpia. Luego, habilite su galería con una caja de luz incorporada. Personaliza el icono de vista previa, la superposición y la tipografía de subtítulos. Elija entre Fancybox y Elementor para abrir imágenes en una hermosa experiencia de visualización en pantalla completa.
- Flechas de navegación personalizadas: las flechas de estilo desde cero cambian su color, tamaño, fondo y desplazamiento horizontal.
- Optimizado para dispositivos móviles: elija ocultar flecha en dispositivos móviles y confíe en los gestos de deslizamiento para obtener una sensación nativa.
- Premium Lightbox: ofrece una vista ampliada con íconos y superposiciones personalizables, convirtiendo el carrusel en una galería completa.
Carrusel de imágenes Elementor frente al carrusel de imágenes de complementos maestros
Ambos widgets son gratuitos. La versión de Elementor es suficiente para un control deslizante básico con subtítulos y enlaces. Elija uno de complementos maestros cuando necesite un diseño de flujo de cobertura, filas de imágenes o más control sobre la navegación y el estilo de diapositivas.
| Carrusel de imágenes Elementor | Carrusel de imágenes de complementos maestros | |
|---|---|---|
| Precio | Gratis | Gratis |
| Diapositivas por vista por dispositivo | Sí | Sí |
| Diseños | Deslizarse o desvanecerse | Carrusel o flujo de cobertura 3D |
| Varias filas | No | Sí, con diapositivas por columna |
| Navegación | Flechas y puntos | Flechas, puntos, balas dinámicas, fracción, barra de progreso y barra de desplazamiento |
| Caja de luz | Caja de luz elemental | Fancybox o Elementor, con un icono de vista previa personalizado y superposición |
| Estilo de diapositivas | Básico | Estados normales, flotantes y activos |
| Vincula cada imagen a una URL | Sí | No, las imágenes se abren en la caja de luz |
Cómo agregar un carrusel de imágenes en Elementor
Para obtener un tutorial más largo con capturas de pantalla, lea cómo crear un carrusel de imágenes en Elementor.
- Instale el complemento Master Addons gratuito y edite su página con Elementor.
- Busque en el panel de widgets Image Carousel y arrástrelo a un contenedor.
- Haga clic en el campo de la galería, elija sus imágenes y establezca la resolución de imagen.
- Establezca cuántas diapositivas se muestran por dispositivo, luego active Autoplay, Loop y lightbox si las desea.
- Elija Carrusel o Coverflow, diseñe las diapositivas y flechas y publique.
Carruseles relacionados: Control deslizante de logotipo, Control deslizante del equipo, Control deslizante de galería (Pro) y el Blog modo carrusel del widget.
Preguntas frecuentes sobre carrusel de imágenes
¿cuál es la principal ventaja sobre el carrusel de imágenes básico de Elementor?
El carrusel de imágenes gratuito de Elementor maneja bien un control deslizante simple: subtítulos, una caja de luz, reproducción automática y diapositivas por dispositivo. Master Addons agrega un diseño de flujo de cobertura 3D, cuadrículas de varias filas con diapositivas por columna, fracción, barra de progreso y navegación en barra de desplazamiento, una opción de Fancybox o Elementor lightbox con un ícono de vista previa personalizado, estilo para diapositivas normales, flotantes y activas, y una opción de observador para carruseles dentro de pestañas o acordeones.
Si habilito 'Altura automática', ¿mis imágenes se estirarán o recortarán?
No. La altura automática ajusta la altura general del contenedor del carrusel para que coincida con la diapositiva más alta visible actualmente. Sus imágenes mantendrán su relación de aspecto según sus otras configuraciones (como “Tamaño de imagen”). Evita que las alturas fijas creen grandes espacios en blanco si tiene imágenes de diferentes orientaciones de retrato/paisaje.
¿puedo usar esto para un control deslizante de logotipo con escala de grises para colorear en el hover?
¡absolutamente! Este es un caso de uso perfecto. Sube las imágenes de tu logotipo. En la pestaña Artículos del carrusel, configure el estado normal Opacidad o use un filtro CSS para hacerlos en escala de grises. Luego, en el estado Hover, configure la opacidad nuevamente en 1 y retire el filtro. El estilo flotante incorporado facilita este efecto sin código personalizado. O utilice el Control deslizante de logotipo widget, que está diseñado para logotipos de clientes.
¿cómo funciona la configuración "Observador" y cuándo debo usarla?
El Observer observa los cambios en el contenedor del carrusel. Habilite (establezca Sí) cuando coloque el carrusel dentro de una pestaña, acordeón o widget de alternancia, o en cualquier lugar donde esté inicialmente oculto. Esto garantiza que el carrusel se represente y funcione correctamente en el momento en que un usuario hace clic para revelar su contenedor principal. Si está roto dentro de una pestaña, esto generalmente lo arregla.
¿tener varios carruseles con reproducción automática en una página causará problemas de rendimiento?
Puede, si tienes muchos (como 15+). Cada carrusel de reproducción automática es un elemento móvil que el navegador debe animar. Para obtener el mejor rendimiento, limite la reproducción automática a su carrusel de héroes más importante. Para otros, considere permitir que los usuarios se desplacen manualmente. Además, utilizar tamaños de imagen optimizados (a través de la configuración de Resolución de imagen) es crucial para la velocidad.
¿puedo vincular elementos del carrusel a diferentes URL en lugar de solo a la caja de luz?
No con este widget. Abre imágenes en una caja de luz. Si cada diapositiva necesita su propio enlace, utilice el Control deslizante de logotipo, o la opción de enlace en el carrusel de imágenes del propio Elementor.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
Duplicador de publicaciones/páginas
