Principais conclusões
- Alvenaria significa que as imagens mantêm suas próprias proporções em vez de serem cortadas em um cartão uniforme, de modo que uma foto de retrato permanece alta.
- O widget gratuito da Galeria de Imagens da Elementor não tem opção de alvenaria Seus controles de layout são colunas e lacuna.
- A Galeria de Imagens Filtráveis Master Addons possui um interruptor de alvenaria que interrompe o corte, mas o script frontal apresenta os itens em linhas, de modo que as cartas altas deixam uma lacuna sob as curtas na mesma linha.
- Se você deseja colunas compactadas sem lacunas, as colunas CSS em um contêiner são a rota honesta em uma instalação gratuita.
- Para fotos de produtos e fotos de equipe, uma grade uniforme geralmente é melhor lida do que a alvenaria, então ligue a proporção de aspecto da imagem.
Alvenaria é o layout onde as imagens se sentam em sua altura natural e as colunas cambaleiam, a forma que o Pinterest tornou familiar, Ele se adapta à fotografia, onde cortar uma moldura de retrato em um quadrado joga fora metade da imagem.
Elementor pode chegar perto disso de três maneiras diferentes, e nem todas produzem a mesma coisa. Um deles tem um interruptor rotulado como Maçonaria que faz menos do que o nome sugere, que é a parte que vale a pena ler antes de construir.
Índice
Alvenaria, grade e justificado: a diferença
| traçado | O que faz às imagens | Lê melhor para |
|---|---|---|
| Grade | Corta cada imagem para o mesmo tamanho de cartão | Produtos, fotos de equipe, logotipos, tudo o que você quiser arrumado |
| Maçonaria | Mantém a altura de cada imagem, colunas cambaleiam | Fotografia mista, retratos junto a paisagens |
| Justificado | Mantém proporções, mas estica cada linha na mesma altura | Ensaios fotográficos e folhas de contato |
Alvenaria e justificado ambos proteger a cultura original A diferença é que direção a matemática corre: alvenaria fixa a largura da coluna e deixa a altura variar, justificado fixa a altura da linha e deixa a largura variar.
Rota 1: widget Galeria do Elementor (Pro)
O widget gratuito da Galeria de Imagens do Elementor tem dois controles de layout, Colunas e Espaçamento, e ele recorta para um cartão uniforme O widget Galeria, que é Pro, tem um controle Layout com três valores: Grade, Justificado e Maçonaria há a coisa real, colunas embaladas sem lacunas, e o widget Pro Portfolio tem seu próprio switch Masonry também Se você já possui Pro, esse é o caminho mais curto e não há nada para instalar.
Rota 2: o interruptor de alvenaria na galeria filtrável
Em uma instalação gratuita do Elementor, o Galeria de imagens filtráveis possui um interruptor de alvenaria em sua seção Configurações, próximo à proporção de aspecto de imagem e calha.
Com a Maçonaria ligada e a Razão de Aspecto da Imagem desligada, as imagens mantêm suas próprias proporções, de modo que uma moldura de retrato permanece alta e nada é cortado O empacotamento de colunas é a parte que você não obtém Na versão atual, o script que apresenta a grade organiza os itens em linhas, de modo que uma imagem curta deixa um espaço vazio abaixo dela até que a próxima linha comece.
Isso é útil quando suas imagens têm formato aproximadamente semelhante, já que nada é cortado e as linhas permanecem organizadas. Para a aparência compactada do Pinterest em uma instalação gratuita, a rota 3 é a resposta.
Rota 3: colunas CSS em um contêiner
O CSS tem um layout de coluna que embala o conteúdo da maneira que a alvenaria deve Colocar suas imagens em um contêiner, adicionar algumas linhas de CSS a ele e o navegador faz o trabalho sem script.
selector {
column-count: 3;
column-gap: 24px;
}
selector img {
width: 100%;
margin-bottom: 24px;
break-inside: avoid;
}
@media (max-width: 767px) {
selector { column-count: 2; }
}O selector palavra-chave tem como alvo o elemento que você está editando, então este trecho vai na caixa Custom CSS no próprio contêiner Em um Elementor gratuito instalar essa caixa vem de um addon, como Css personalizado, já que o Elementor marca seu próprio campo CSS personalizado como Pro.
A compensação é ordenação. As colunas CSS preenchem de cima para baixo em cada coluna, portanto, a ordem de leitura desce pela coluna um e depois desce pela coluna dois. Para uma galeria ninguém lê em sequência o que é bom. Para qualquer coisa cronológica não é.
Tamanhos de imagem que fazem a alvenaria parecer certa
- Carregar em uma largura consistente Cerca de 1.200 px é suficiente para uma grade de três colunas e mantém a luz da página.
- Deixe as alturas variarem e mantenha as larguras iguais, pois a alvenaria funciona fixando a largura do pilar.
- Defina a Resolução de Imagem deliberadamente Arquivos de tamanho completo em uma grade de nove imagens é uma página lenta sem ganho visual.
- O controle deslizante Gutter é responsivo e funciona de 0 a 40 px, para que você possa apertá-lo nos telefones.
- Evite um quadro extremo Um único panorama muito alto entre imagens quadradas tira o olho de todo o resto.
Quando uma grade uniforme é a melhor resposta
Ative a taxa de aspecto da imagem e você obterá uma grade uniforme, que é o que as fotos do produto, fotos da equipe e logotipos desejam, juntamente com qualquer outra coisa que deve parecer um conjunto.
Uma maneira simples de escolher: se as imagens foram filmadas em uma sessão com uma configuração de câmera, corte-as em uma grade Se elas vierem de diferentes filmagens em diferentes orientações, deixe-as manter sua forma.
Perguntas frequentes
Elementor tem uma galeria de alvenaria?
Não no widget gratuito da Galeria de Imagens, que oferece apenas colunas e gap O widget Galeria da Elementor com opções de layout está em sua lista Pro.
Por que minha galeria de alvenaria ainda tem lacunas?
Porque a grade é disposta em linhas em vez de colunas embaladas As imagens mantêm sua altura natural, então uma imagem curta sentada em uma fileira com uma alta deixa espaço embaixo Colunas CSS é a rota para o verdadeiro empacotamento.
A alvenaria funciona com as abas do filtro?
Sim. A filtragem e o layout são separados, portanto, clicar em uma categoria restringe a grade e os itens restantes são recolocados.
Posso colocar alvenaria apenas no celular?
No. O interruptor de alvenaria aplica-se a cada tamanho de tela O controle deslizante Gutter é o controle que muda por dispositivo.
A alvenaria é ruim para a velocidade da página?
O layout em si é barato O que custa você são as imagens, então defina uma resolução de imagem sensata em vez de arquivos em tamanho real, e lembre-se de que cada item na galeria carrega com a página.
Pensamentos finais
Três rotas, três resultados diferentes O widget Galeria do Elementor Pro embala as colunas para você O interruptor de alvenaria na galeria filtrável interrompe o corte e mantém as linhas, o que muitas vezes é suficiente As colunas CSS dão o visual embalado em uma instalação gratuita, ao custo da ordem de leitura.
Proteger a colheita original e manter uma grelha organizada são dois objectivos diferentes, por isso escolha o percurso que corresponda ao que realmente tem.
Leitura relacionada
