Carrusel de imágenes

Una fila de imágenes estáticas se come espacio y pide a los visitantes que pasen por delante de cada uno. Un carrusel muestra el mismo conjunto en un control deslizante compacto y deslizable que la gente realmente toca. El Carrusel de imágenes widget adentro Complementos maestros para Elementor crea ese control deslizante a partir de una galería normal de WordPress, luego agrega reproducción automática, una caja de luz, varios estilos de navegación y un modo de flujo de cobertura, todo desde el panel Elementor.

Elige las imágenes, elige cuántos se muestran a la vez y decide cómo se mueven los visitantes entre ellas. Sin códigos cortos, sin complemento deslizante separado. Esta guía recorre cada configuración del widget, desde cargar la galería hasta diseñar las flechas. Para demostraciones y una comparación con el carrusel del propio Elementor, consulte el Widget de carrusel de imágenes de Elementor página.

¿prefieres mirar primero? Este breve tutorial cubre el carrusel de imágenes desde la galería hasta el estilo:

Qué hace el widget Image Carousel #

El widget convierte una selección de imágenes en un carrusel deslizante. Muestra una o varias imágenes por vista, avanza solo o al hacer clic y abre cada imagen en una caja de luz para una apariencia de tamaño completo. Los subtítulos, los bordes, las superposiciones y el estilo de las flechas están integrados.

Funciona con el motor Swiper, por lo que el control deslizante es táctil y responde desde el principio. En un teléfono, el mismo carrusel vuelve a fluir a menos columnas y puedes ocultar las flechas en el móvil si se interponen en tu camino.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
• Un puñado de imágenes cargadas en su biblioteca multimedia o listas para cargar.

Cómo agregar el widget Image Carousel #

En el editor Elementor, abra el Elementos panel y búsqueda Carrusel de imágenes, o desplácese hasta la sección Agregar complementos maestros. Arrastre el widget a su página. Se carga vacío hasta que agregues imágenes, por lo que la galería es siempre el primer paso.

Agrega y ordena tus imágenes #

En el Contenido pestaña, abre el Imágenes sección y haga clic en el campo de galería para iniciar el selector de medios de WordPress. Seleccione las imágenes que desee y luego utilícelas Editar galería para arrastrarlos al orden, agregar subtítulos o soltar cualquiera con el ícono X.

De vuelta en el panel, la sección Imágenes te ofrece tres controles más:

• Resolución de imagen: elija el tamaño que sirve WordPress, desde miniatura hasta completo, o establezca un tamaño personalizado. Mediano o Grande mantiene la página ligera y al mismo tiempo luce nítida en el control deslizante.
• Habilite la galería Lightbox: active esto para que los visitantes puedan hacer clic en una imagen para abrirla en tamaño completo en una ventana emergente. Con él desactivado, las imágenes se muestran únicamente.
• Biblioteca Lightbox: elija el motor emergente, ya sea Fancybox o la propia caja de luz de Elementor. Ambos agrupan las imágenes del carrusel para que los visitantes puedan atravesarlas dentro de la ventana emergente.

Configurar la navegación #

El Navegación la sección controla cómo se mueven las personas a través de las diapositivas. Comience con el Navegación dropdown, que establece el estilo de control: Flechas y puntos, Flechas y fracción, Flechas, Puntos, Progreso o Ninguno.

• Mostrar barra de desplazamiento: agrega una barra de progreso arrastrable debajo del control deslizante.
• Poziția Fleșii: coloque las flechas arriba, centro o abajo, e izquierda, centro o derecha dentro de ellas.
• Colocación: coloque las flechas dentro del control deslizante o fuera de él.
• Ocultar flecha en el móvil: suelta las flechas en pantallas pequeñas donde deslizar el dedo es el gesto natural.
• Icono siguiente e icono anterior: intercambie las flechas predeterminadas para cualquier ícono de la biblioteca de íconos de Elementor.

Sintoniza el comportamiento del carrusel #

El Configuración del carrusel la sección es donde el control deslizante obtiene su movimiento. Esta es la parte que decide cuántas imágenes se muestran, qué tan rápido se mueven y si el control deslizante se desplaza.

• Diapositivas por columna: el número de filas cuando ejecuta el control deslizante en dirección vertical.
• Diseño: elija Carrusel para un control deslizante plano estándar o Coverflow para un efecto 3D.
• Altura automática: deje que la altura del control deslizante se adapte a la imagen actual.
• Autoplay y velocidad de reproducción automática: active el deslizamiento automático y establezca el retraso entre deslizamientos en milisegundos (5000 son cinco segundos).
• Pausa en Hover: detenga la reproducción automática mientras el cursor esté sobre el control deslizante.
• Diapositivas para desplazarse: cuántas imágenes avanzan por paso.
• Diapositiva central, Cursor de agarre, Modo libre de arrastre: opciones para centrar la diapositiva activa, mostrar un cursor de agarre y desplazamiento de arrastre fluido.
• Bucle: ejecute el carrusel como un bucle sin fin en lugar de detenerse en la última imagen.

Utilice el diseño Coverflow para obtener un efecto 3D #

Cambiar Diseño a Flujo de cobertura y las diapositivas se inclinan hacia una pila 3D, con la imagen activa plana en el centro y los vecinos en ángulo hacia atrás. A Efecto Coverflow el control aparece para que puedas ajustar la profundidad y la rotación. Se adapta a secciones de fotografía y portafolio donde el control deslizante en sí es parte del diseño.

Estila el carrusel #

El Estilo tab se divide en cuatro secciones: Artículos de carrusel, Caja de luz, Navegación, y Patrones. Juntos cubren el aspecto de las diapositivas, la ventana emergente y las flechas.

Artículos de carrusel #

Esta sección diseña las diapositivas de la imagen. Tiene estados Normal, Flotar y Activo, por lo que puedes hacer que la diapositiva centrada se destaque del resto.

• Fondo, tipo de borde, radio de borde, sombra de caja: encuadre estándar para cada diapositiva. Border Radius rodea las esquinas de la imagen.
• Relleno y brecha de artículos: espacio dentro de cada diapositiva y el espacio entre diapositivas.
• Modo Sombra y Opacidad: profundidad y transparencia adicionales para las diapositivas inactivas.

Caja de luz, superposición y subtítulos #

El Caja de luz la sección diseña el ícono de vista previa que se encuentra en cada imagen y la superposición detrás de ella, además del texto del título.

• Icono de vista previa personalizado: reemplace el ícono de zoom predeterminado y establezca su color, color flotante, tamaño y posición con Icon Gap en Izquierda y Arriba.
• Superposición: agregue un tinte de fondo sobre la imagen, lo que ayuda cuando desee que el ícono y el título sigan siendo legibles.
• Titlu de subtítulos: tipografía, fondo, color y color flotante para los subtítulos que agregó en la galería.

Flechas de navegación #

El Navegación la sección de estilo controla el aspecto de las flechas, con estados Normal y Flover.

• Color și fundal: color del icono de flecha y el botón detrás.
• Tipo de borde, radio de borde, relleno, tamaño: forma y tamaño de los botones de flecha, incluidos los botones redondos con un radio completo.
• Sombra de caja y desplazamiento: agregue profundidad y empuje las flechas hacia adentro o hacia afuera con el desplazamiento horizontal.

El resultado en la página #

Publique o obtenga una vista previa y el carrusel se transmitirá en vivo: reproduce automáticamente las imágenes, se repite si lo activó y abre cada una en la caja de luz al hacer clic. Su estilo se transmite, desde diapositivas con bordes redondeados hasta botones de flecha personalizados.

Casos de uso comunes #

• Fotografía y portafolio galerías donde la caja de luz permite a los visitantes ver tomas en tamaño completo.
• Deslizadores de imágenes de productos en una página de destino, con la reproducción automática atrayendo la atención.
• Tiras de logotipos o socios usando varias diapositivas por vista y un bucle.
• Fotos de testimonios o eventos en un bloque compacto y deslizable.
• Deslizadores de flujo de cobertura de héroes para una sección de diseño-avance.

Consejos para trabajar con el Carrusel de Imágenes #

• Haga coincidir la resolución de la imagen con el tamaño de la diapositiva. Servir archivos de tamaño completo en diapositivas pequeñas ralentiza la página; Mediano o Grande suele ser abundante.
• Mantenga cómoda la velocidad de reproducción automática. Alrededor de 4000 a 6000 ms le dan tiempo a las personas para mirar sin sentirse apresuradas.
• Active Pausa en Hover con reproducción automática. Evita que el control deslizante se deslice debajo de alguien que está leyendo un título.
• Ocultar flechas en el móvil. Deslizar es el gesto natural en las pantallas táctiles, por lo que las flechas a menudo están simplemente abarrotadas.
• Utilice el estado Activo para resaltar la diapositiva central. Un borde sutil o una opacidad total en el portaobjetos activo guía el ojo.

Preguntas frecuentes #

Envolviendo #

El Widget de carrusel de imágenes crea un control deslizante de imagen Elementor con todas las funciones sin un complemento separado: cargue una galería, configure la reproducción automática y el bucle, encienda la caja de luz y diseñe las diapositivas y flechas para que coincidan con su diseño. Para conocer otras formas de mostrar imágenes, mire el Control deslizante de galería y Galería filtrable widgets. Explora el completo Widgets y extensiones de complementos maestros para ver qué más está incluido.