Widget de galería filtrable de Elementor: haga que las imágenes sean filtrables
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
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.
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.
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
¿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.
¿el widget Filtrable Image Gallery es gratuito?
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.
¿Cómo asigno elementos para filtrar categorías?
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.
¿la galería responde en dispositivos móviles?
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.
¿en qué se diferencia esto de un carrusel de imágenes normal o de un control deslizante de galería?
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.
Vidriomorfismo
Extras de contenedores
Patrones
Duplicador de publicaciones/páginas
