Widget de galería filtrable de Elementor: haga que las imágenes sean filtrables

Convierta una cuadrícula de imágenes plana en algo con lo que los visitantes realmente interactúen. Elija categorías, haga clic en un filtro y la cuadrícula se reorganizará. Los efectos de desplazamiento, las animaciones de inclinación y dos botones de llamada a la acción en cada elemento vienen integrados.

Una galería estática muestra imágenes. Una galería filtrable permite a las personas encontrar lo que les importa. El widget Filtrable Image Gallery le brinda a su portafolio, catálogo de productos o colección de fotografías una barra de categorías en la parte superior. Los visitantes hacen clic en una pestaña, la cuadrícula se filtra instantáneamente y cada elemento puede llevar un título, subtítulo y dos botones diseñados para “Ver detalles” o “Demostración en vivo”.

El widget es gratuito en el complemento Master Addons y funciona sin Elementor Pro.

Qué puedes hacer con el widget de galería filtrable

Sistema de navegación filtrable inteligente

Filtrado de categorías con control total

Habilite la barra de filtro y los visitantes verán los botones de categoría encima de la galería: “Todos”, “Marca”, “Fotografía”, “Diseño web”, cualesquiera que sean las etiquetas que establezca. Cambie el nombre de la pestaña “Todos”, alinee la barra izquierda, central o derecha y diseñe pestañas activas con colores, fondos y bordes separados para que la gente siempre sepa lo que ha seleccionado.

  • Asigne cada imagen a una categoría utilizando el campo Etiqueta de filtro. Comas separadas para múltiples categorías.
  • El estilo de estado activo hace que la pestaña seleccionada se destaque del resto.
  • La tipografía y el espaciado en la barra de filtro son totalmente personalizables.

Diseño de galería y efectos 3D

Elija la cantidad de columnas, habilite Masonry para una cuadrícula escalonada estilo Pinterest y controle el espaciado con la configuración de canalones. Luego, coloque capas sobre efectos interactivos: Hover Scale hace que los elementos se agranden al pasar el mouse y Tilt Effect agrega una perspectiva 3D que sigue al cursor con un resplandor opcional. Es el tipo de detalle que hace que una galería se sienta considerada en lugar de predeterminada.

  • Diseño de mampostería para alturas de imagen dinámicas y desiguales.
  • Inclinación 3D con perspectiva, velocidad e intensidad de deslumbramiento ajustables.
  • Escala flotante con velocidad de transición configurable.
  • Columnas responsivas que se apilan limpiamente en dispositivos móviles.
Cuadrículas de galería dinámicas y efectos avanzados
Estilo adecuado para cada elemento

Superposiciones de texto con estilo y CTA duales

Cada elemento de la galería puede mostrar un título, subtítulo y etiqueta de categoría, cada uno con tipografía y color independientes. Al pasar el cursor, aparece un color superpuesto y aparecen dos botones: “Detalles” y “Demo” (o cualquier texto que escriba). Ambos botones tienen controles completos de estado Normal y Flover para fondo, color de texto, borde, radio y sombra.

  • Separe las secciones Estilo de título, Estilo de subtítulo y Estilo de categoría.
  • Dos botones por artículo, cada uno con estilo independiente.
  • Pase el tamaño y el color del ícono para que coincida con su marca.
  • Color de superposición de imagen con transición suave.
  • ¿quieres más animaciones flotantes en imágenes individuales? Prueba el Efectos de desplazamiento de imagen widget.

Ejemplos de galería filtrables y casos de uso

  • Portafolios: permite a los visitantes filtrar por tipo de proyecto, marca, web, fotografía, ilustración.
  • Catálogos de productos: pestañas de categorías para “Todos”, “Novedades”, “Venta”, “Más vendidos”.
  • Menús de restaurante: filtrar por “Entrantes”, “Mains”, “Desserts”, “Bebidas”.
  • Listados inmobiliarios: “Apartamentos”, “Casas”, “Comercial”, “Terrenos”.
  • Fotografía de bodas: “Ceremonia”, “Recepción”, “Retratos”, “Detalles”.
  • Estudios de caso de agencia: filtrar por industria cliente o tipo de servicio.
Visor de plantillas
Facebook
Gorjeo
WhatsApp
Copiar enlace
Compra ahora
Menú del restaurante en una cuadrícula oscura de cuatro columnas
Menú del restaurante en una cuadrícula oscura de cuatro columnas
Listados de bienes raíces con cintas y botones flotantes
Listados de bienes raíces con cintas y botones flotantes
Portafolio de fotografía de bodas con caja de luz
Portafolio de fotografía de bodas con caja de luz
Estudios de casos de diseño de interiores en dos columnas
Estudios de casos de diseño de interiores en dos columnas
Catálogo de productos con insignias de venta y descuento
Catálogo de productos con insignias de venta y descuento
Destinos de viaje en una cuadrícula de temática oscura
Destinos de viaje en una cuadrícula de temática oscura
Sistema de navegación filtrable inteligente
Sistema de navegación filtrable inteligente
Muestra de galería de imágenes
Muestra de galería de imágenes

Cómo crear una galería filtrable en Elementor

  • Suelta el widget. En Elementor, busque “Galería de imágenes filtrables” en Complementos maestros y arrástrelo a su sección.
  • Agregue elementos de la galería. Haga clic + Agregar elemento para cada imagen. Cargue la imagen, escriba un título y subtítulo, configure la etiqueta de filtro (nombre de la categoría) y agregue texto de botón y enlaces si es necesario.
  • Habilite la barra de filtro. Active Mostrar navegación del filtro, establezca el recuento de columnas, seleccione Masonería o cuadrícula normal y ajuste el espaciado entre canalones. Habilite la escala flotante y el efecto de inclinación para lograr interactividad.
  • Estilo todo. En la pestaña Estilo, diseñe la barra de filtro, las tarjetas de elementos, las superposiciones de texto, los botones y los estados de desplazamiento. Publicar cuando esté hecho.

Preguntas frecuentes sobre la galería de imágenes filtrables

Conozca las consultas más solicitadas que tienen los usuarios sobre Filtrable Image Gallery y encuentre respuestas en un solo lugar.
¿qué es el widget Filtrable Image Gallery?

Un widget Elementor independiente que convierte cualquier cuadrícula de imágenes en una galería filtrada por categorías. Los visitantes hacen clic en las pestañas de filtro para mostrar solo elementos relevantes. Cada elemento puede mostrar un título, un subtítulo y dos botones de llamada a la acción con estilo.

Sí. Viene con el complemento gratuito Master Addons, por lo que puedes crear una galería filtrable sin Elementor Pro o una licencia Master Addons Pro. Puedes agregar tantos elementos de galería como necesites.

En la sección Contenido de la galería para cada artículo, busque el campo Etiqueta de filtro e ingrese el nombre de la categoría (“Tecnología”, “Marca”, “Fotografía”). Todos los artículos con el mismo grupo de etiquetas bajo un botón de filtro. Coma separada para asignar un elemento a múltiples categorías.

¿pueden los visitantes abrir imágenes en una caja de luz?

Sí. Cada botón puede vincularse a una ventana emergente de Lightbox, una URL externa o una página de su sitio. Establezca el destino del enlace por elemento en la sección de contenido de la galería.

Sí. Las columnas se apilan automáticamente, cuatro columnas se convierten en dos o una en pantallas más pequeñas. Los botones de filtro se ajustan para encajar. Utilice el modo responsivo de Elementor para ajustar específicamente el canalón y el tamaño de fuente para dispositivos móviles.

Un carrusel o control deslizante muestra una imagen a la vez y la recorre. Una galería filtrable muestra todo a la vez y permite a los visitantes limitar la cuadrícula por categoría. Usa el Carrusel de imágenes para secciones de héroes y filas de logotipos, o Control deslizante de galería (Pro) cuando desee una imagen grande con miniaturas. Utilice una galería filtrable para portafolios, catálogos y colecciones donde la navegación sea importante.

Widgets y extensiones de Elementor de tendencia

Cree sitios web sofisticados en menos tiempo.

Master Addons Extensión Glassmorphism para Elementor: tarjetas de vidrio esmerilado con el control Blur Value configurado en 20px

Vidriomorfismo

Inicio Extensión de Glassmorphism Elementor gratuita: Efecto del vidrio esmerilado en un solo cambio El Glassmorphism es el esmerilado...
Ver detalles
Extensión Master Addons Container Extras para Elementor: contenedor con un límite de ancho máximo de 1400px, con controles de ancho máximo, alto máximo, ancho mínimo y alto mínimo

Extras de contenedores

Inicio Elementor Container Controles de ancho y alto máximo Container Extras es un maestro gratuito...
Ver detalles
Extensión de patrones de complementos maestros para Elementor: héroe con el estilo Purple Gradient Grid Left, tres estilos de patrones más y el panel Habilitar patrón

Patrones

Inicio 70+ Patrones de fondo de Elementor gratuitos Patrones es una extensión de complementos maestros gratuita que agrega...
Ver detalles
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]

Duplicador de publicaciones/páginas

Inicio Duplicar páginas y publicaciones de Elementor en un clic Publicación/Duplicador de páginas es un maestro gratuito...
Ver detalles
Extensión de la barra de progreso de lectura de complementos maestros para Elementor: barra azul llena al 42% en la parte superior de una página de política de privacidad, con configuraciones de habilitar, colocar, altura y llenar color

Barra de progreso de lectura

Inicio Agregue una barra de progreso de lectura en WordPress (Elementor) La barra de progreso de lectura es gratuita...
Ver detalles