Elementor Filterable Gallery Widget - Faça Imagens Filtráveis
Uma galeria estática mostra imagens Uma galeria filtrável permite que as pessoas encontrem o que lhes interessa O widget Galeria de imagens filtráveis dá ao seu portfólio, catálogo de produtos ou coleção de fotos uma barra de categoria no topo Os visitantes clicam em uma guia, a grade é filtrada instantaneamente e cada item pode levar um título, legenda e dois botões de estilo para “View Details” ou “Live Demo”.
O widget é gratuito no plugin Master Addons e funciona sem o Elementor Pro.
Veja as guias do filtro em ação
Esta grade é o widget em si, não uma captura de tela Quatro categorias e uma guia Tudo ficam acima dela, e clicar em uma categoria esconde todos os itens que não carregam esse rótulo Cada cartão aqui também mostra um título e uma legenda extraída de seus próprios campos.
- Todas listagens
- Apartamentos
- Vilas
- Moradias
- Escritórios
Loft da Cove Street
2 camas · 1 banho · · 9 m² ft 2.450 dólares/mês
Marina Ponto 8B
1 cama · 1 banho · · 60 sq ft 1 $ 890/mo
Vila Ridgeway
4 camas · banho · piscina 1,24 milhões de dólares
Casa de vidro em Elm
3 camas 2 banheiros · 2.100 m² ft 980,00 dólares
Linha Bricklane 12
3 camas · banho · garagem 720,0 $
Tribunal de Amieiros 4
2 camas · 2 banheiros · jardim murado 645,00
Obras Portuárias, Piso 3
4,2,2 pés quadrados 38 mesas · 6.400 dólares/mês
O estúdio Quay
1,88 pés quadrados 16 mesas · 2.950 dólares/mêsO que você pode fazer com o widget de galeria filtrável
Filtragem de categoria com controle total
Habilite a barra de filtro e os visitantes veem os botões de categoria acima da galeria: “All”, “Branding”, “Photography”, “Web Design”, quaisquer que sejam os rótulos que você definir Renomeie a guia “All”, alinhe a barra esquerda, centro ou direita e estilize as guias ativas com cores, fundos e bordas separadas para que as pessoas sempre saibam o que selecionaram.
- Atribua cada imagem a uma categoria usando o campo Filtro Etiqueta. Separar vírgula para várias categorias.
- O estilo de estado ativo faz com que a guia selecionada se destaque das demais.
- Tipografia e espaçamento na barra de filtro são totalmente personalizáveis.
Layout da galeria e efeitos 3D
Escolha o número de colunas, habilite Masonry para uma grade escalonada no estilo Pinterest e controle o espaçamento com as configurações de calha Em seguida, coloque em camadas os efeitos interativos: Hover Scale faz os itens aumentarem com o mouseover, e o Tilt Effect adiciona uma perspectiva 3 D que segue o cursor com brilho opcional É o tipo de detalhe que faz uma galeria parecer considerada em vez de padrão.
- Layout de alvenaria para alturas de imagem dinâmicas e irregulares.
- Inclinação 3 D com perspectiva ajustável, velocidade e intensidade de brilho.
- Escala do pairar com velocidade de transição configurável.
- Colunas responsivas que empilham de forma limpa no celular.
Sobreposições de texto estilizadas e CTAs duplos
Cada item da galeria pode mostrar um título, subtítulo e rótulo de categoria, cada um com tipografia e cor independentes No hover, uma cor de sobreposição desaparece e dois botões aparecem: “Details” e “Demo” (ou qualquer texto que você escrever) Ambos os botões têm controles completos de estado Normal e Hover para fundo, cor do texto, borda, raio e sombra.
- Separar as seções de estilo de título, estilo de legenda e estilo de categoria.
- Dois botões por item, cada um estilizado de forma independente.
- Passe o mouse sobre o tamanho e a cor do ícone para combinar com sua marca.
- Cor de sobreposição de imagem com transição suave.
- Quer mais animações hover em imagens individuais? Experimente o Efeitos de Hover de Imagem Widget.
Construa um portfólio filtrável no Elementor
O próprio widget Portfolio do Elementor precisa do Pro. Esta grade é executada em Master Addons, então a barra de filtro funciona em uma instalação gratuita do Elementor Cada item carrega um título de projeto, uma legenda para a categoria ou ano e dois campos de botão, que é como um cartão de portfólio pode apontar para o site ao vivo e o estudo de caso ao mesmo tempo Os botões abaixo vão para a página de demonstração.
- Todos os projetos
- Residencial
- Hospitalidade
- Varejo
- Local de trabalho
Casa Ashgrove
Residência privada · Melbourne · 2025
Apartamento Lime Wash
Remodelação integral · Lisboa · 2025
Hotel Fenwick
Lobby e lounge · Edimburgo · 2024
Casa de hóspedes Kellner
32 quartos · Viena · 2024
Estúdio Nove Flagship
Fit-out de varejo · Copenhague · 2025
Marlow e dobra
Loja conceito · Toronto · 2023
Sede dos Laboratórios Beacon
1.400 m² de local de trabalho · Berlim · 2025
Parceiros Ardentes
Escritório e suíte de reuniões · Dublin · 2024Galeria filtrável em Elementor sem Pro
A Galeria de Imagens gratuita da Elementor é uma grade com uma lightbox Toda a lista de controle é imagens, colunas, gap, legenda, link e lightbox, portanto não há barra de filtro e nenhuma alvenaria nela O Elementor mantém seu widget Galeria mais rico na lista Pro, que é onde uma licença entra Este widget adiciona a barra de filtro em uma instalação gratuita do Elementor.
| Característica | Galeria de imagens do elementor (gratuito) | Galeria de imagens filtráveis Master Addons |
|---|---|---|
| Categoria guias de filtro | Não | Sim, de um rótulo de filtro por item |
| “Todos os” tab | Não | Sim, com a sua própria etiqueta |
| Maçonaria | Não | Sim |
| Colunas | Sim | Sim, 1 a 6 |
| Caixa de luz | Sim | Sim |
| Legendas | A legenda do anexo | Um título, subtítulo e categoria que você digita por item |
| Botões em um item | Não | Dois, cada um com seu próprio URL |
| Emblema fita | Não | Sim |
| Inclinação 3 D no hover | Não | Sim, com brilho |
| Precisa do Elementor Pro | Não | Não |
O que o widget faz e o que não faz
Tudo abaixo foi marcado no painel de widgets A segunda metade importa tanto quanto a primeira: se você precisa de paginação ou uma caixa de pesquisa, este é o widget errado e é melhor saber agora.
| Configuração | Apoiado |
|---|---|
| Categoria guias de filtro | Sim, um rótulo de filtro por item, separado por vírgula para mais de um |
| “Todos os” tab | Sim, e podes mudar o nome |
| Maçonaria | Sim |
| Bloqueio de proporção de aspecto de imagem | Sim |
| Colunas | 1 a 6, um valor para cada tamanho de tela |
| Pop-up Lightbox | Sim |
| Links em vez do pop-up | Sim |
| Botões por item | Dois, cada um com seu próprio URL |
| Emblema fita | Sim, 12 predefinições mais um campo de desconto |
| Título, subtítulo e etiqueta da categoria | Sim, cada um com sua tipografia |
| Dica de ferramenta em um item | Sim |
| Sobreposição | Ao pairar, sempre, nunca ou se esconder ao pairar |
| Inclinação 3 D com brilho | Sim |
| Animação entrada | Sim |
| Carregar mais botão | Não |
| Paginação | Não |
| Caixa pesquisa | Não |
| Itens vídeo | Não |
| Postagens ou produtos como fonte | Não, a galeria é um repetidor que você preenche |
Outros widgets de imagem no mesmo plugin: Efeitos de Hover de Imagem para legendas que aparecem no hover, Carrossel de Imagem para uma fila deslizante, Galeria Slider para uma visualização grande com uma faixa em miniatura, Hotspot de imagem para marcadores em uma única imagem, e Imagem Avançada para uma imagem com legenda e link.
Exemplos de galeria filtráveis e casos de uso
- Portfólios: deixe os visitantes filtrar por tipo de projeto, branding, web, fotografia, ilustração.
- Catálogos de produtos: guias de categoria para “All”, “New Arrivals”, “Sale”, “Best Sellers”.
- Menus de restaurantes: filtrar por “Starters”, “Mains”, “Desserts”, “Drinks”.
- Listagens imobiliárias: “Apartments”, “Houses”, “Commercial”, “Land”.
- Fotografia de casamento: “Ceremony”, “Reception”, “Portraits”, “Details”.
- Estudos de caso de agências: filtrar por setor cliente ou tipo de serviço.
Como criar uma galeria filtrável no Elementor
- Largue o widget. No Elementor, pesquise “Filterable Image Gallery” em Master Addons e arraste-o para sua seção.
- Adicionar itens da galeria. Clique em + Adicionar Item para cada imagem Carregue a imagem, escreva um título e legenda, defina o Rótulo do Filtro (nome da categoria) e adicione texto do botão e links, se necessário.
- Activar a barra de filtros. Ative o Mostrar Filtro Nav, defina a contagem de colunas, escolha Alvenaria ou grade regular e ajuste o espaçamento entre calhas Ative a Escala de Hover e o Efeito de Inclinação para interatividade.
- Estilo tudo. Na guia Estilo, projete a barra de filtro, cartões de item, sobreposições de texto, botões e estados de hover Publicar quando terminar.
Perguntas frequentes para galeria de imagens filtráveis
O que é o widget Galeria de Imagens Filtráveis?
Um widget Elementor autônomo que transforma qualquer grade de imagem em uma galeria filtrada por categoria Os visitantes clicam em guias de filtro para mostrar apenas itens relevantes Cada item pode exibir um título, legenda e dois botões de call-to-action estilizados.
O widget Galeria de Imagens Filtráveis é gratuito?
Sim. vem com o plugin gratuito Master Addons, para que você possa construir uma galeria filtrável sem Elementor Pro ou uma licença Master Addons Pro. Você pode adicionar quantos itens de galeria precisar.
Como atribuo itens às categorias de filtros?
Na secção Conteúdo da Galeria para cada item, encontre o campo Rótulo do Filtro e introduza o nome da categoria (“Technology”, “Branding”, “Photography”).Todos os itens com o mesmo grupo de rótulos sob um botão de filtro Separar por vírgula para atribuir um item a várias categorias.
Elementor tem uma galeria filtrável?
A Galeria de Imagens gratuita do Elementor é uma grade simples, portanto não possui barra de filtro O widget Galeria que o Elementor envia com o Pro é a rota paga Este widget adiciona as guias de categoria em uma instalação gratuita do Elementor.
Posso construir um portfólio com este widget?
Sim. Cada item leva um título de projeto, uma legenda para a categoria ou o ano, e dois botões com seus próprios URLs, para que um cartão possa apontar para o site ao vivo e para o estudo de caso.
Os visitantes podem abrir imagens em uma caixa de luz?
Sim. Cada botão pode vincular a um pop-up lightbox, um URL externo ou uma página em seu site Defina o destino do link por item na seção de conteúdo da galeria.
A galeria responde no celular?
Sim. colunas empilhar automaticamente, quatro colunas se tornam duas ou uma em telas menores Botões de filtro embrulhar para caber Usar o modo responsivo do Elementor para ajustar os tamanhos de calha e fonte para celular especificamente.
Como isso é diferente de um carrossel de imagens normal ou controle deslizante de galeria?
Um carrossel ou controle deslizante mostra uma imagem de cada vez e percorre-os Uma galeria filtrável mostra tudo de uma vez e permite que os visitantes estreitem a grade por categoria Use o Carrossel de Imagem para seções de heróis e linhas de logotipo, ou Galeria Slider (Pro) quando você quiser uma imagem grande com miniaturas. Use uma galeria filtrável para portfólios, catálogos e coleções onde a navegação é importante.
A galeria tem carga maior ou paginação?
Não. Cada item no repetidor carrega com a página, então um portfólio de 40 imagens envia todos os 40 de uma vez Dividir conjuntos muito grandes através de páginas, ou manter os arquivos de imagem luz.
Por que minhas guias de filtro não estão aparecendo?
Três coisas a verificar: Mostrar o Filtro Nav está ligado na guia Configurações, cada item tem um Rótulo de Filtro e o cache da página foi limpo depois que você editou Um item com um rótulo vazio nunca entra em uma categoria.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
![Extensão Master Addons Post/Page Duplicator para Elementor: MA Link de linha Duplicator na lista de páginas WordPress criando uma página de destino - rascunho [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de postagem/página
