Principais conclusões
- O widget gratuito da Galeria de Imagens do Elementor não possui barra de filtro A lista de controle é imagens, colunas, lacuna, legenda, link e lightbox.
- Duas rotas oferecem guias de categoria: o widget Galeria do Elementor, que está na lista Pro, ou um widget de complemento em uma instalação gratuita do Elementor.
- Com o Galeria de imagens filtráveis Master Addons a categoria vem de um rótulo de filtro que você digita em cada item, portanto, uma imagem pode ser colocada em diversas categorias.
- Mostrar Filtro Nav e Mostrar “Todas as guias Filtro” estão ativadas por padrão e o texto da guia Todos é editável.
- Quando as guias não aparecem, a causa é quase sempre um rótulo de filtro vazio, o Nav do filtro de exibição desligado ou um cache de página que serve a marcação antiga.
Uma galeria filtrável é uma grade com uma fileira de botões de categoria acima dela Clique em Retratos e os retratos ficam enquanto todo o resto fica fora de vista É o layout portfólios, catálogos de produtos e conjuntos de fotos alcançar, porque rolar passado quarenta imagens para encontrar um tipo de trabalho não é ideia de ninguém de um bom tempo.
Elementor pode fazer isso, mas não no widget gratuito Galeria de imagens Este guia cobre ambas as rotas: o que Elementor em si oferece, e como construir a mesma coisa em um Elementor gratuito instalar com um addon.
Índice
O que Elementor lhe dá da caixa
Abra o painel de widgets em uma instalação gratuita do Elementor, procure por galeria e você obterá o widget Galeria de Imagens Sua lista de controle é Adicionar Imagens, Resolução de Imagens, Colunas, Legenda, Link, Lightbox, Order By e um controle deslizante Espaçamento na guia Estilo As colunas vão de 1 a 10 e começam em 4, Legenda oferece a legenda de anexo ou nada, e Link envia a imagem para o arquivo de mídia, a página de anexo ou em nenhum lugar Isso lhe dá uma grade com uma caixa de luz Não há barra de filtro, nem alvenaria e nenhum título por imagem.
Elementor possui um segundo widget de galeria, chamado Gallery, e esse é Pro. Ele contém as opções de layout e a barra de filtro. Uma barra de filtro do próprio Elementor significa uma licença Pro.
Rota 1: o widget da Galeria Elementor (Pro)
Se você já paga pelo Elementor Pro, comece aqui, porque é um plugin a menos O widget Galeria mantém várias galerias dentro de um widget e dá a cada um um nome, e esses nomes se tornam a barra de filtro.
- Arraste o widget Galeria para a página.
- Alternar Tipo de Único para Múltiplo O único é o padrão, e não tem barra de filtro.
- Adicione uma galeria por categoria no repetidor Galerias e preencha o campo Título, pois esse texto passa a ser a guia.
- Escolha um layout: grade, justificado ou alvenaria. Grade e alvenaria usam o controle Colunas, que começa em 4 na área de trabalho, 2 no tablet e 1 no celular. Justificado usa altura de linha em seu lugar.
- Deixe o filtro “All” ligar e renomeie-o em “All” Filter Label se “All” for muito vago.
O trade-off é como as categorias são armazenadas Cada imagem pertence à galeria em que você a deixou cair, então uma imagem que pertence a duas categorias tem que ser adicionada duas vezes A rota de complementos abaixo lida com isso com um campo de texto em vez disso.
Rota 2: o widget Master Addons, passo a passo
Esta rota funciona em uma instalação gratuita do Elementor Instale Master Addons, certifique-se de que o widget Galeria de Imagens Filtráveis esteja habilitado na lista de widgets do plugin e, em seguida, siga estas etapas.
Passo 1: adicione o widget e suas imagens
Procure Galeria de Imagens Filtráveis no painel Elementor e arraste-o para dentro As imagens são adicionadas um item de cada vez no repetidor de Conteúdo da Galeria, em vez de em um único selecionador de mídia, que é o que torna possíveis os campos por item.
Colunas leva um número de 1 a 6 e o padrão é 3. uma coisa a saber antes de planejar um layout: este controle não é responsivo, então a mesma contagem de colunas se aplica em cada tamanho de tela A grade em si ainda reflui em telas estreitas, mas você não pode definir quatro colunas na área de trabalho e duas no tablet do painel.
Passo 2: dê a cada item um rótulo de filtro
Abra uma linha repetidora e você obterá os campos que constroem o cartão: a imagem, um título, uma legenda, uma fita, o comportamento pop-up ou link, dois botões com seus próprios URLs e o rótulo do filtro.
Digite o nome da categoria exatamente como você deseja que ele leia no botão, porque a guia é construída a partir deste texto Separe várias categorias com vírgulas quando um item pertence a mais de um, que é a parte que a rota Pro não pode fazer sem duplicar a imagem.
Passo 3: ligue a barra de filtro e nomeie a guia Tudo
Abra a seção Configurações Mostrar Filtro Nav e Mostrar “Todos os botões Filtro Tab estão ambos ligados por padrão, e Todas as categorias Texto define o que diz o primeiro botão. “Todos os projetos”, “Shop todos os” e “Full menu” todos leem melhor do que um “All” nu.
Passo 4: verifique na extremidade frontal
Salvar e visualizar a página A barra de filtro renderiza acima da grade, a guia Tudo está ativa e clicar em uma categoria oculta todos os itens sem essa etiqueta.
As configurações que alteram o comportamento do filtro
| Configuração | Onde | O que faz |
|---|---|---|
| Etiqueta do filtro | Cada item repetidor | Constrói as abas Vírgula separada para várias categorias. |
| Mostrar o Filtro Nav | Configurações | Esconde toda a barra quando desligado, que é como você obtém uma grade simples. |
| Mostrar a guia Filtro “All” | Configurações | Solta a primeira guia se quiser que os visitantes escolham uma categoria imediatamente. |
| Todas as categorias Texto | Configurações | Renomeia a guia Tudo. |
| Relação de aspecto da imagem | Configurações | Corta cada cartão para a mesma altura Desligado mantém as próprias proporções de cada imagem. |
| Calha | Configurações | Espaço entre as cartas Responsivo, 0 a 40 px, 10 por padrão. |
| Colunas | Conteúdo | 1 a 6, um valor para cada tamanho de tela. |
| Tipo Sobreposição | Configuração Sobreposição | Ao pairar, sempre, nunca ou se esconder ao pairar. |
| Pop-up ou links | Cada item repetidor | Abre a imagem em uma lightbox ou envia o cartão para uma URL. |
Duas coisas que o widget não tem, então você pode planejar em torno deles: não há carga mais botão e nenhuma paginação, então cada item carrega com a página, e não há caixa de pesquisa Para um portfólio de quarenta imagens que está bem em um host decente, mas um arquivo de duzentas imagens quer dividir em páginas.
Filtrar guias não mostrando? Verifique essas quatro coisas
Quatro coisas causam isso, e as duas primeiras são responsáveis pela maior parte.
- Um rótulo de filtro vazio Um item sem rótulo nunca se junta a uma categoria e, se nenhum item tiver um, não há nada a partir do qual construir guias.
- Mostrar filtro Nav desligado. O padrão é ligado, então geralmente é a edição anterior de alguém.
- Uma página em cache Os caches de página e os CDNs servem a marcação de antes de adicionar os rótulos, portanto, limpe o cache e recarregue com uma atualização difícil.
- Etiquetas que diferem por um caractere. “Portraits” e “portraits ” com um espaço à direita são duas categorias, então você obtém duas abas segurando metade do conjunto cada.
Se as guias aparecerem, mas clicar em uma não fizer nada, o script de filtragem não será executado Isso aponta para um erro de JavaScript de outro plugin na mesma página, ou um otimizador de script adiando o arquivo Desligue a combinação JS para essa página e teste novamente.
Perguntas frequentes
Elementor tem uma galeria filtrável?
Não na versão gratuita O widget gratuito da Galeria de Imagens é uma grade com uma lightbox O widget da Galeria do Elementor, que pode mostrar várias galerias nomeadas com uma barra de filtro, está em sua lista Pro.
Uma imagem pode ser dividida em duas categorias?
Sim, com a rota do addon Coloque ambos os nomes de categorias no campo Rótulo do Filtro, separado por uma vírgula, e o item mostra em ambas as guias.
Posso alterar o que diz o botão Todos?
Sim. Todas as Categorias O texto na secção Configurações define - o, para que possa usar “Todos os trabalhos”, “Shop todos os” ou qualquer outra coisa que se encaixe na página.
A galeria tem carga maior ou paginação?
Não. Cada item é renderizado com a página. Mantenha os conjuntos em um tamanho que carregue confortavelmente ou divida um arquivo grande em várias páginas.
A galeria funcionará no celular?
Sim, a grade é refluída e os botões de filtro são envoltos. Lembre-se de que o valor Colunas se aplica a todos os tamanhos de tela, portanto, escolha um número que ainda leia bem em um telefone.
Pensamentos finais
No Elementor Pro, o widget Galeria leva você até lá e você não instala nada Em uma instalação gratuita, um widget addon faz isso, e o campo Filter Label tem a vantagem para qualquer pessoa cujo trabalho se enquadra em mais de uma categoria.
Seja qual for o caminho que você seguir, gaste o tempo com os nomes das categorias Quatro categorias claras reduzem a grade ao que o visitante procurava; nove vagas apenas movem o problema para a barra de filtro.
Leitura relacionada
