Un control deslizante de galería combina una imagen de vista previa grande con un conjunto de miniaturas en las que se puede hacer clic, para que los visitantes puedan saltar directamente a la foto que deseen en lugar de hacer clic en una diapositiva a la vez. El Control deslizante de galería widget adentro Complementos maestros para Elementor construye este diseño en unos minutos. Elige las imágenes, elige una cuadrícula de miniaturas o un carrusel y diseña cada parte desde el panel Elementor.
Esta guía recorre cada entorno para que puedas construir un Control deslizante de galería Elementor sin adivinar qué hace cada control.
Qué hace el widget Gallery Slider #
El widget muestra una diapositiva de vista previa grande junto a una cuadrícula o carrusel de miniaturas. Al hacer clic en una miniatura o una flecha se cambia la vista previa. Los subtítulos, la reproducción automática, el bucle infinito, las transiciones de desvanecimiento o diapositivas y los estados de desplazamiento separados para la vista previa y las miniaturas están integrados. Se adapta a portafolios, fotografías de productos, listados de bienes raíces, álbumes de eventos o cualquier página donde los visitantes necesiten explorar un conjunto de imágenes rápidamente.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Necesita ayuda? Ver el guía de instalación.
- Un conjunto de imágenes cargadas en su biblioteca multimedia, idealmente con relaciones de aspecto similares.
Cómo agregar el widget Elementor Gallery Slider #
Abra el editor Elementor y busque Control deslizante de galería en el panel Elementos, o desplácese hacia abajo hasta la sección Complementos maestros. Cada widget de complementos maestros lleva una pequeña insignia MA, que le ayuda cuando tiene varios paquetes de complementos instalados. Arrastre el widget a su sección.
Agregue imágenes en la pestaña Contenido #
Galería #
El widget comienza vacío. En el Contenido pestaña, abre el Galería sección y haga clic en el botón más debajo Agregar imágenes.
La ventana de medios de WordPress se abre en Crear galería pantalla. Seleccione las imágenes que desee en el control deslizante y luego haga clic para insertar la galería. Tómese un minuto aquí para completar texto alternativo y subtítulos para cada imagen. El campo de título importa más de lo que parece: el widget puede imprimirlo debajo de la imagen de vista previa más tarde, y si falta un título en la interfaz, esta pantalla es el primer lugar para verificar.
Después de insertar la galería, el editor muestra el diseño completo de inmediato: la vista previa grande a la izquierda con flechas de navegación y la cuadrícula de miniaturas a la derecha. Las imágenes seleccionadas también aparecen dentro de la sección Galería, donde puedes reordenarlas o eliminarlas.
Miniaturas #
El Miniaturas la sección controla las pequeñas imágenes al lado de la vista previa.
- Miniaturi de pulgare: muestra u oculta el área de la miniatura por completo.
- Carrusel/Rejilla: cambie entre una cuadrícula estática y un carrusel de desplazamiento.
- Resolución de imagen: el tamaño de WordPress sirve para miniaturas. Miniatura (150 x 150) mantiene la página ligera.
- Columnas: elija de 1 a 12 columnas para la cuadrícula. Pasar de 2 a 3 columnas cambia la cuadrícula de alta y estrecha a un bloque más estrecho.
- Ordenar: mantenga el orden predeterminado o cambie la forma en que se clasifican las imágenes.
- Subtítulo: muestre un título en miniaturas o déjelo en Ninguno.
Cambiando a Carrusel mode reemplaza la cuadrícula con una tira de miniaturas y agrega su propio grupo de configuraciones: Orientación (horizontal sau vertical), Diapositivas por vista, un Flechas alternar con un Posición de flecha desplegable, más Reproducción automática, Bucle infinito, y Dirección controles sólo para la tira de miniaturas. Grid funciona mejor para una docena de imágenes o menos; más allá de eso, el carrusel ahorra mucho espacio vertical.
Vista previa #
El Vista previa la sección gestiona la diapositiva grande y cómo se comporta.
- Resolución de imagen: el tamaño servido para la imagen grande. El completo se ve mejor pero pesa más, así que comprime tus originales.
- Vinculat la: vincule la imagen de vista previa a una URL o archivo multimedia, o guárdela en Ninguno.
- Subtítulo: muestra el título de la imagen debajo de la vista previa.
- Direcția: deslícese de izquierda a derecha o de derecha a izquierda.
- Bucle infinito: vuelve a la primera diapositiva después de la última.
- Altura automática: deje que el control deslizante ajuste su altura a cada imagen. Práctico para proporciones mixtas, aunque la página cambiará un poco a medida que cambien las diapositivas.
- Reproducción automática: diapositivas avanzadas automáticamente. Haga clic en el icono de edición para ajustarlo.
- Efecto: elija la transición Deslizar o Desvanecer.
- Viteza (ms): cuánto dura la transición. El valor predeterminado es 1000.
- Flechas: muestra u oculta las flechas de navegación y elige las suyas Posición, como Arriba a la izquierda.
Diseñe el control deslizante en la pestaña Estilo #
Diseño #
El Diseño la sección decide dónde se encuentra la vista previa en relación con las miniaturas. Posición de vista previa ofrece arriba, derecha, abajo e izquierda. Con arriba o abajo, las miniaturas se alinean debajo o encima de la vista previa y a Alineación horizontal el control aparece con a Ancho del carrusel control deslizante. Con izquierda o derecha, obtienes un Ancho de vista previa (%) control deslizante en su lugar.
- Stack on: elija cuando el diseño se apile verticalmente, como Tablet & Mobile.
- Ancho de vista previa (%): cuánto espacio horizontal ocupa la vista previa. En algún lugar entre el 60 y el 70 por ciento se encuentra muy bien junto a una cuadrícula de tres columnas.
- Espaciado: el espacio entre la vista previa y las miniaturas.
Vista previa #
La pestaña Estilo Vista previa la sección estiliza el contenedor deslizante grande.
- Altura personalizada: anule la altura automática.
- Color de fondo: llena el área detrás de la imagen.
- Tipo de borde: Predeterminado, Ninguno, Sólido, Doble, Punteado, Discontinuo o Ranura, con controles de ancho y color cuando está activo.
- Radio de borde y sombra de caja: rodea las esquinas y levanta la diapositiva de la página.
- Flechas: un grupo dedicado con Tamaño, Acolchado, Radio fronterizo, Transición, y separados Predeterminado, Flotar, y Deshabilitado estados, cada uno con su propio color y color de fondo.
Subtítulos de vista previa #
Si habilitó subtítulos en la pestaña Contenido, esta sección los posiciona y estiliza. Alineación vertical coloca el título en la parte superior, media o inferior de la diapositiva y Alineación horizontal ofertas izquierda, centro, derecha y justificar. También obtienes Tipografía, Acolchado, Margen, Tipo de borde, y Radio fronterizo controles.
Vista previa de los efectos flotantes #
Vista previa de los efectos flotantes anima el título cuando los visitantes se ciernen sobre la diapositiva. Elija un Efecto, establece el Transición, luego peina el Predeterminado y Flotar estados con color, tipo de fondo, opacidad y sombra de texto.
Miniaturas #
La pestaña Estilo Miniaturas la sección maneja las imágenes pequeñas: Alineación vertical pentru bloc complet, Espaciado horizontal y Espaciado vertical entre miniaturas, más Tipo de borde y Radio fronterizo.
Efectos flotantes de miniaturas #
Esta sección diseña miniaturas en tres estados: Predeterminado, Flotar, y Activo (la miniatura que coincide con la diapositiva actual). El Imágenes el grupo cubre el color de fondo, Opacidad, Escala, Sombra de caja, y Filtros CSS. Fuera de la caja, las miniaturas inactivas tienen una opacidad de 0,65, por lo que la activa se destaca. El Superposición el grupo agrega una capa de color o degradado con Modo mezcla, Margen, Opacidady controles fronterizos.
También hay un Patrones sección en la parte inferior de la pestaña Estilo con ajustes preestablecidos de estilo ya preparados. La misma sección aparece en muchos widgets de complementos maestros.
Vea el resultado en vivo #
Haga clic en el icono del ojo para obtener una vista previa de la página. Los visitantes ven la cuadrícula de miniaturas al lado de la vista previa grande. Al hacer clic en una miniatura, se intercambia la vista previa de inmediato, las flechas pasan por las diapositivas en orden y el título sigue a cada imagen.
Casos de uso comunes #
- Vizualizaciones de cartera: una gran imagen de héroe con el resto del proyecto a un clic de distancia.
- Paginile produsului: el diseño clásico de la tienda con una vista previa ampliada y un selector de miniaturas.
- Listados inmobiliarios: deje que los compradores hojeen las habitaciones sin salir de la página.
- Álbumes de eventos o bodas: resalte una foto manteniendo visible el conjunto completo.
Consejos para un mejor control deslizante de galería #
- Haga coincidir las relaciones de aspecto de la imagen. La altura automática evita sorpresas en los recortes, pero las proporciones consistentes parecen más limpias y evitan que el diseño salte.
- Sirva las resoluciones correctas. Completo para la vista previa, miniatura (150 x 150) para la cuadrícula. Comprimir antes de cargar; consulte nuestra guía del los mejores complementos de optimización de imágenes de WordPress.
- Escriba subtítulos en la biblioteca multimedia antes de insertar la galería para que cada diapositiva esté lista.
- Mantenga razonable la velocidad de reproducción automática. Dé tiempo a los visitantes para ver cada imagen.
- Utilice el estado Activo. La opacidad predeterminada de 0,65 en miniaturas inactivas ya guía el ojo; un borde o una ligera escala en la miniatura activa lo hace aún más claro.
Vídeotutorial #
¿prefieres ver la configuración? Este video cubre todo el proceso, desde arrastrar el widget hasta el control deslizante terminado en la página en vivo:
Preguntas frecuentes #
¿cómo creo un control deslizante de galería en Elementor?
Instale complementos maestros para Elementor, arrastre el widget del control deslizante de galería a su página y haga clic en Agregar imágenes en la sección Galería. Seleccione sus imágenes en la ventana multimedia e inserte la galería. El control deslizante con vista previa y miniaturas aparece inmediatamente.
¿puedo mostrar miniaturas como un carrusel en lugar de una cuadrícula?
Sí. En la sección Miniaturas de la pestaña Contenido, cambie el control Carrusel/Rejilla a Carrusel. Luego obtienes orientación, diapositivas por vista, flechas, reproducción automática y configuraciones de bucle infinito para la tira de miniaturas.
¿Puedo cambiar dónde aparece la imagen de vista previa?
Sí. En la pestaña Estilo en Diseño, establezca la posición de vista previa en Arriba, Derecha, Abajo o Izquierda. Con los diseños izquierdo o derecho controlas el ancho de la vista previa; con la parte superior o inferior controlas el ancho y la alineación del carrusel.
¿el Gallery Slider admite la reproducción automática?
Sí. Active la reproducción automática en la sección Vista previa de la pestaña Contenido. Puede combinarlo con Infinite Loop, elegir un efecto de diapositiva o desvanecimiento y establecer la velocidad de transición en milisegundos.
¿cómo muestro los subtítulos de las imágenes en el control deslizante?
Agregue subtítulos a sus imágenes en la biblioteca multimedia de WordPress, luego configure Subtítulos en Subtítulos en la sección Vista previa. Estilee y coloque el texto de la sección Subtítulos de vista previa en la pestaña Estilo.
Envolviendo #
Los complementos maestros Control deslizante de galería el widget cubre todo el patrón de vista previa más miniaturas: miniaturas de cuadrícula o carrusel, vista previa en cualquier lado, subtítulos y estilo por estado, todo desde un panel y sin código personalizado.
Para conocer más formas de mostrar imágenes, consulte Carrusel de imágenes, Galería filtrable, y Imagen avanzada docs, o compare opciones en nuestro Guía del carrusel de imágenes de Elementor. Para ver todo lo demás en el complemento, explore el Widgets y extensiones de complementos maestros colección o el planes de precios.
