Principais conclusões
- Todos os seis exemplos são páginas de demonstração ao vivo construídas com o mesmo widget, para que você possa abrir cada um e clicar nas guias sozinho.
- Cada um usa quatro categorias mais uma guia Tudo, que mantém a barra em uma única linha em um laptop.
- A guia Todos é renomeada em cada design: “Todas as listagens”, “Menu completo”, “Todos os trabalhos”, “Todos os projetos”, “Shop all” e “Todo destino”.
- As contagens de colunas vão de duas para estudos de caso de interiores a quatro para o menu do restaurante e a grade da loja.
- Dois dos seis botões de colocação em cada cartão, dois usam um ícone de hover que abre a imagem e dois não usam nenhum dos dois.
Uma galeria filtrável parece diferente dependendo do que contém Um menu de restaurante quer cartões densos de quatro colunas com preços, um estúdio de interiores quer duas grandes colunas e um link de estudo de caso, e um fotógrafo quer que as fotos carreguem tudo.
Os seis designs abaixo são páginas de demonstração ao vivo pelas quais você pode clicar Cada entrada anota as categorias, a contagem de colunas e as configurações que lhe dão seu caráter, para que você possa copiar a forma que corresponde ao seu conteúdo.
Índice
Os seis exemplos em resumo
| Exemplo | Categorias | Itens | Colunas | Links cartão |
|---|---|---|---|---|
| Listagens propriedades | Apartamentos, Vilas, Moradias em banda, Escritórios | 8 | 3 | Dois botões |
| Menu restaurante | Pratos Pequenos, Correntes, Sobremesas, Coquetéis | 8 | 4 | Ícone pairar |
| Fotografia casamento | Cerimônia, Retratos, Recepção, Detalhes | 9 | 3 | Ícone pairar |
| Projetos interiores | Residencial, Hotelaria, Varejo, Local de Trabalho | 8 | 2 | Um botão |
| Catálogo produtos | Bolsas, Calçado, Relógios, Vestuário exterior | 8 | 4 | Dois botões |
| Destinos viagem | Europa, Ásia, Americas, África | 8 | 3 | Ícone pairar |
Exemplos de galeria filtráveis
1. listagens de propriedades
Oito listagens em quatro categorias, com a guia Todos renomeada para “Todas as listagens” Cada cartão carrega o nome da propriedade como título e a linha de especificação como subtítulo, então “2 cama, 1 banho, 940 pés quadrados, $ 2.450/mo” fica sob a foto Dois botões por cartão lidam com as duas coisas que um visitante deseja: detalhes e uma visualização.
O detalhe que vale a pena copiar é a fita: um crachá de canto lendo Novo ou Queda de Preço em dois dos oito cartões puxa o olho sem tocar no layout.
Menu 2. restaurant
Quatro colunas sobre um fundo escuro, com a guia Todos lendo menu “Full” O nome do prato é o título e o preço é o subtítulo, que é toda a estrutura do menu em dois campos Os cursos se tornam o filtro, então um visitante que só quer sobremesa chega lá em um clique.
Quatro colunas funcionam aqui porque as fotos são culturas apertadas de pratos únicos Fotografia de cena ampla em quatro colunas seria ilegível.
Fotografia 3. wedding
Nove quadros, quatro partes do dia, e quase nenhum texto A guia Todos diz “Todos trabalham” e os cartões usam um ícone de hover em vez de botões, então um clique abre a imagem em vez de navegar para longe Este é o design para copiar quando as fotografias são o produto.
O que faz funcionar é o que deixa de fora: sem fitas, sem botões e sem legendas competindo com as imagens.
4. Projetos interiores
Duas colunas, para que cada projeto obtenha espaço real, com a sobreposição definida para mostrar em todos os momentos, em vez de no hover Um botão por cartão, lendo “View case study” A barra de filtro é alinhada à esquerda em vez de centralizada, o que se adapta à sensação editorial.
Duas colunas é a escolha que vale a pena copiar para um trabalho que merece um segundo olhar Oito projetos em duas colunas ainda se encaixa em uma tela de rolagem.
Catálogo de produtos 5
Quatro colunas, nome do produto como título, preço como subtítulo e dois botões lendo “Quick view” e “Add to bag” A guia Tudo diz “Shop all” Parece uma página de loja sem ser uma: os cartões são imagens com links em vez de produtos, então nada entra em um carrinho Para um lookbook que aponta para uma loja, isso é o suficiente.
O padrão de dois botões é a parte útil: uma ação suave, uma firme.
6. Destinos de viagem
Continentes como filtro, com a guia Todos renomeada para “Every destination” A escala de hover é definida mais alta do que as outras demonstrações, então as cartas se levantam mais visivelmente sob o cursor Os títulos nomeiam o lugar e as legendas adicionam o detalhe.
A aba All renomeada faz um trabalho real aqui. “Every destination” diz a um visitante qual é o conjunto; “All” não lhes diz nada.
O que os seis têm em comum
- Quatro categorias em todos os seis projetos Quatro abas mais Todos se encaixa em uma linha em um laptop e envolve para dois em um telefone.
- A guia Tudo é renomeada todas as vezes, com seis rótulos diferentes e nenhum restante no padrão.
- Título na parte superior, detalhe abaixo, em cada design que utiliza texto.
- A contagem de colunas segue a fotografia: as colheitas apertadas ocupam quatro colunas, as cenas e as salas ocupam duas ou três.
- Comportamento de um clique por cartão, sejam botões ou ícone de caixa de luz, nunca ambos.
Construindo um desses
Cada design é o mesmo widget com configurações diferentes A compilação é: adicionar um item por imagem, digitar um Filtro de Etiqueta em cada um para criar as guias, definir Colunas e, em seguida, decidir se os cartões são cortados para uma altura uniforme com a Razão de Aspecto da Imagem ou manter suas próprias proporções Os títulos, legendas e o comportamento de sobreposição vivem na seção Configuração de sobreposição, e os dois botões ficam em cada item.
O passo a passo completo está em como criar uma galeria filtrável no Elementor, e o widget em si é o Galeria de imagens filtráveis.
Perguntas frequentes
Posso importar esses exemplos como modelos?
São páginas de demonstração em vez de kits importáveis A reconstrução de um leva cerca de dez minutos, já que a estrutura é um punhado de configurações e suas próprias imagens.
Quantas categorias uma barra de filtro deve ter?
Quatro é o padrão em todos os seis projetos Passado seis a barra envolve em um laptop e começa a ler como um segundo menu.
Uma imagem pode aparecer sob duas guias?
Sim. Coloque os dois nomes de categoria no campo Rótulo do filtro, separados por uma vírgula.
As demos usam alvenaria?
No. Todos os seis cartões de corte para uma altura uniforme, e é por isso que as grades parecem arrumadas A alvenaria é um interruptor separado para conjuntos com orientações mistas.
O exemplo da loja pode receber pagamentos?
Não. É uma galeria com botões, então os cartões link onde quer que você aponte-los Checkout pertence a WooCommerce.
Pensamentos finais
Seis designs, um widget e quatro decisões entre eles: quantas colunas, se os cartões são cortados, o que os botões fazem e como a guia Tudo é chamada Comece a partir do exemplo mais próximo do seu conteúdo e altere esses quatro.
Leitura relacionada
