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.
O 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.
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.
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.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
Duplicador de postagem/página
