Uma grade de imagens simples não oferece aos visitantes nenhuma maneira de navegar por tópico. O Galeria de imagens filtráveis widget em Complementos Mestres para Elementor corrige isso Ele adiciona filtros de categoria, sobreposições de hover, fitas e links lightbox a uma galeria padrão, para que você possa construir um portfólio filtrável ou uma vitrine de produto sem escrever nenhum código.
Veja como cada guia e configuração funciona, para que você possa configurar um Galeria filtrável Elementor sem adivinhar o que as alternâncias fazem.
O que o widget Galeria de imagens filtráveis faz #
O widget exibe uma grade de imagens e permite que os visitantes as filtrem por categoria Cada item da galeria suporta um título, legenda, fita, ícone de hover e dois botões de ação Layout, espaçamento, animação de sobreposição e tipografia são todos controlados a partir do painel Elementor, de modo que o mesmo widget funciona para portfólios, lookbooks de comércio eletrônico, galerias de viagens e paredes de fotos de equipe.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Complementos Mestres para Elementor instalado e ativo Precisa de ajuda? veja o guia instalação.
- Imagens agrupadas em categorias pelas quais você deseja que os visitantes filtrem.
Como adicionar o widget Galeria Filtrável Elementor #
Abra o editor Elementor e procure Galeria Filtrável no painel Elementos, ou role para baixo até a seção Complementos mestres Arraste o widget para sua página Ele carrega com itens de galeria de espaço reservado, para que você tenha algo na tela para trabalhar imediatamente.
Construa sua galeria na guia Conteúdo #
O Conteúdo a guia é onde você adiciona imagens, atribui categorias de filtro e configura fitas e links.
Conteúdo da Galeria #
O Conteúdo da Galeria seção é um repetidor Cada item representa um cartão de imagem Clique Adicionar Item para criar mais cartões, ou use os ícones duplicados e de apagamento para os gerir.
Cada item tem os mesmos campos:
- Etiqueta do filtro: a categoria que os visitantes usam para filtrar Exemplos: Tecnologia, Natureza, Arquitetura.
- Imagens: clique para abrir o media picker e selecione as imagens para este cartão Você pode selecionar vários de uma só vez.
- Título: o título principal mostrado abaixo ou sobre a imagem.
- Legenda: uma linha menor abaixo do título.
- Mostrar fita?: alterne para adicionar um canto ou crachá em linha.
- Fita: o texto do crachá, como Popular ou Novo.
- Pop-up ou links?: escolha se o cartão abre um pop-up lightbox ou se vincula a um URL.
- Botão Um Texto/URL: rótulo e destino para o botão da primeira ação.
- Botão Dois Texto/URL: rótulo e destino para o segundo botão de ação.
Resolução de Imagens e Colunas #
Abaixo do repetidor, defina o Resolução de imagem WordPress deve servir e o número de Colunas. Seis colunas dão-lhe pequenas miniaturas; cair para três quando você quer cartões maiores com títulos legíveis Escolha uma resolução próxima ao tamanho real da exibição, caso contrário, você está carregando imagens em tamanho real em cartões pequenos e a página paga por isso.
Configurações #
O Configurações a seção controla o comportamento geral da galeria.
- Mostrar filtro Nav?: exibe os botões de filtro de categoria acima da grade.
- Mostrar o “All” Guia Filtro: adiciona um botão Todos para que os visitantes possam redefinir o filtro.
- Texto de todas as categorias: o rótulo para o botão de reinicialização, geralmente All.
- Mostrar dica de ferramenta?: ativa dicas de ferramentas nos botões de filtro.
- Proporção de aspecto da imagem: força uma proporção consistente em cada imagem.
- Calha: o espaço entre os itens da grade.
- Alvenaria: muda a grade para um layout de alvenaria para alturas de imagem irregulares.
- Escala de Hover: amplia ligeiramente a imagem ao pairar.
- Valor da escala: quanto a imagem aumenta o zoom, como 1.1.
- Efeito de inclinação: adiciona uma inclinação 3 D que segue o cursor.
Configuração Sobreposição #
O Configuração Sobreposição seção decide o que aparece quando um visitante paira sobre um item.
- Mostrar título?: exibir o título do item no hover.
- Mostrar Legenda?: exibir a legenda no hover.
- Mostrar categoria?: mostrar o rótulo da categoria do filtro.
- Ícone Hover?: adicione um ícone que aparece no hover, como uma lupa ou um símbolo de link.
- Tipo de sobreposição: escolha quando a sobreposição aparecer No Hover é o mais comum.
- Legenda: alterne a área de legenda abaixo da imagem.
- Direção do Hover: permite efeitos de hover direcional.
Estile a galeria na guia Estilo #
O Estilo a guia cobre o contêiner do cartão, imagem, sobreposição e botões.
Estilo do item #
Estilo do item controla o invólucro do cartão Defina aqui o preenchimento, a margem, o tipo de borda, a largura da borda, a cor da borda e o raio da borda Uma borda fina com um raio pequeno é uma maneira rápida de separar os cartões de um fundo claro.
Estilo Imagem #
Estilo Imagem estiliza a imagem em si e seu estado de pairar.
- Estilo de imagem: escolha o padrão ou uma aparência de sobreposição de hover.
- Cor de sobreposição do pairador: a tonalidade que cobre a imagem ao pairar.
- Estilo do título: cor e tipografia para o título do item.
- Legenda Estilo do Legenda: cor e tipografia para o subtítulo.
- Estilo de ícone: tamanho e cor do ícone para o ícone de pairar.
Sobreposição #
O Sobreposição seção escolhe a animação hover As opções incluem Fade In, Slide From Left, Slide From Top, Mask From Bottom, Rotate In, Zoom In e Scale Up Fade In é o padrão seguro; as variantes slide e rotate chamam mais atenção para si mesmas, o que você pode ou não querer em um portfólio.
Botão Um e Dois Estilo #
Estile os botões de ação separadamente Cada botão possui estados Normal e Hover com controles para tipografia, preenchimento, cor do texto, cor de fundo, borda, raio da borda e sombra da caixa.
Veja o resultado ao vivo #
Publique ou visualize a página para ver a galeria final Os visitantes podem passar o mouse sobre um item para ver a sobreposição, o título e o ícone, ou clicar para abrir a caixa de luz ou o link Se você ativou a navegação do filtro, eles também podem clicar nos botões de categoria para mostrar apenas imagens correspondentes.
Uma coisa a verificar: se os botões de filtro não responderem na página ao vivo, mas funcionarem bem no editor, seu plugin de cache ou otimização provavelmente está adiando ou combinando o JavaScript da galeria Exclua os scripts Master Addons da otimização JS e limpe o cache.
Casos de uso comum #
- Páginas do portfólio: deixe os clientes filtrarem por branding, web design ou fotografia.
- Catálogos de produtos: agrupe itens por categoria, cor ou coleção.
- Galerias de viagens ou imóveis: filtrar por localização ou tipo de propriedade.
- Álbuns de equipes ou eventos: organize fotos por departamento ou sessão.
Dicas para uma galeria melhor filtrável #
- Use tamanhos de imagem consistentes. Mantém a grade limpa, principalmente quando a alvenaria está desligada.
- Mantenha as etiquetas dos filtros curtas. Uma ou duas palavras cabem melhor na barra de filtro.
- Habilitar relação de aspecto de imagem se suas imagens de origem tiverem dimensões diferentes.
- Escolha um efeito de hover forte em vez de empilhar escala, inclinação e uma sobreposição ocupada.
- Comprima imagens antes de fazer upload. Uma galeria cheia de fotos descompactadas é uma das causas mais comuns de uma página lenta.
Vídeo Tutorial #
Se você quiser ver o widget Galeria Filtrável em ação, este vídeo percorre toda a configuração, desde a adição de itens de galeria até a grade filtrada na página ao vivo:
Perguntas frequentes #
Como faço para criar uma galeria filtrável no Elementor?
Instale os Complementos Mestres para o Elementor, adicione o widget Galeria Filtrável, crie itens de galeria, atribua um Rótulo de Filtro a cada item e habilite Mostrar o Nav do Filtro na seção Configurações Os visitantes podem então clicar nos botões de categoria para filtrar a grade.
A Galeria Filtrável Master Addons é gratuita?
A versão gratuita do Master Addons inclui um grande conjunto de widgets Verifique o página preços para ver se a Galeria Filtrável está no plano gratuito ou precisa do Pro.
Posso adicionar uma caixa de luz às imagens da galeria?
Sim. defina a opção Popup ou Links para Popup para cada item da galeria Os visitantes podem então clicar em uma imagem para abri-la em uma caixa de luz.
O widget suporta layout de alvenaria?
Sim. ligue o botão Masonry na seção Configurações para exibir imagens em um layout estilo Pinterest com alturas irregulares.
Posso adicionar uma fita ou crachá aos itens da galeria?
Sim. ligue Mostrar Fita no item da galeria e insira o texto da fita, como Popular ou Venda A fita aparece no cartão de imagem.
Embrulhando #
Os complementos mestres Galeria de imagens filtráveis widget transforma uma grade de imagem estática em uma galeria baseada em categorias visitantes podem realmente navegar Navegação de filtro, sobreposição de hover, fitas e suporte lightbox são todos incorporados, então você não precisará de um plugin de galeria separado para a maioria dos projetos.
Para mais ferramentas de imagem, explore o Widget de imagem avançado, Carrossel de Imagem, e Galeria Slider. Você também pode ler nosso resumo de Plugins de galeria filtráveis Elementor ou navegue por completo Widgets e extensões Master Addons coleção.
