Componente Galeria
O bloco Galeria foi pensado para organizar várias imagens numa composição coerente, com leitura em grelha, carrossel e zoom configurável. Permite controlar espaçamento, slides visíveis, dots, arrows, center mode e a estrutura masonry de cada item, mantendo ALT e TITULO associados a cada imagem.
Informações gerais
O bloco Galeria é indicado quando o objetivo não é apenas destacar uma imagem, mas sim construir um conjunto visual organizado com várias peças médias. Funciona bem para portfólios, coleções editoriais, showcases de produto, referências de projeto ou qualquer contexto em que a força reside na relação entre imagens.
Este bloco pode incluir:
- vários itens de imagem dentro do mesmo bloco
- modo carousel com controlo de dots, arrows e pagination lines
- definicao de gap, slides to show e center mode
- opções de masonry horizontal e vertical por item
- border radius individual para cada imagem
- ALT e TITULO em cada item da galeria
- controlo global de full width, zoom e animacao
Utiliza este componente quando precisas de apresentar um conjunto de imagens com unidade visual, sem cair na lógica de uma única imagem isolada nem na narrativa sequencial mais típica de um slideshow.
Exemplos visuais do bloco
Variacoes de layout e composicao
O bloco Galeria pode assumir leituras visuais bastante diferentes consoante a relação entre escala, corte, espaçamento, navegação e equilíbrio masonry. O slideshow abaixo foca três resultados de galeria que ajudam a ilustrar como este componente pode se comportar no frontend.
Quando usar / Quando evitar
Aplicacao correta do componente
Quando usar
- Para apresentar várias imagens com unidade visual numa única seção
- Para portfolios, showcases, galerias editoriais e referencias visuais
- Quando precisas de combinar grelha, carousel e ritmo masonry
- Quando a leitura depende da relação entre vários itens e não de uma única imagem
Quando evitar
- Quando só existe uma imagem principal e o destaque deve ser isolado
- Quando cada item precisa de muito texto ou contexto editorial complexo
- Quando a narrativa deve ser claramente sequencial, com foco em rotação slide a slide
Como configurar na pratica
Sequencia de trabalho recomendada
Definir a base
- Escolher Skin, Gap, Full Width e a logica geral do bloco
- Decidir desde logo se o zoom deve ficar ativo ou não
Montar o carousel
- Definir Dots, Arrows, Arrow Style e Slides To Show
- Ajustar Center Mode e Pagination Lines apenas se reforcarem a leitura
Construir os items
- Carregar a imagem de cada item e preencher ALT e TÍTULO
- Aplicar border radius e estrutura masonry onde fizer sentido
Validar o resultado
- Confirmar ritmo, espacamento e coerencia entre imagens
- Testar a leitura em desktop, mobile e na navegacao do carousel
Boas praticas de conteudo
Curadoria visual, ordem e acessibilidade
Curadoria visual
- Escolhe imagens com relação visual clara entre si, mesmo quando os cortes diferem
- Evita misturar demasiados estilos, proporções ou tratamentos na mesma galeria
- Usa gap, slides visíveis e masonry para construir ritmo, não para esconder falta de critério
Ordem e contexto
- Preenche ALT e TÍTULO em todos os itens, sobretudo quando a imagem tem significado próprio
- Confirma que a sequência dos itens faz sentido em desktop e na navegação do carousel
- Se o bloco tiver zoom ativo, garante que a qualidade das imagens suporta aproximação
Configurações avançadas do componente Galeria
Estrutura, estilos, carousel e animacao
A parte superior do bloco concentra a estrutura base da galeria: comportamento geral, estilos, espacamentos, controlo de carrossel e animação de entrada.
Estrutura base
- Skin define a variante visual global do bloco
- Disabled block permite desativar o bloco sem o apagar
- Offset e Gap ajudam a afinar espacamento e ritmo
- Full Width faz a galeria ocupar toda a largura disponivel
- Disable Zoom controla o comportamento de ampliação em todo o conjunto
Styles e spacings
- Block ID e Extra Class ajudam na organização e customização
- Background Color define o fundo estrutural do bloco
- Margin e Padding ajustam o encaixe da galeria na pagina
Carousel e animacao
- Dots, Arrows e Arrow Style constroem a navegacao
- Slides To Show, Center Mode e Pagination Lines alteram a leitura do conjunto
- Animation on/off e Scroll animation type controlam a entrada do bloco no frontend
Configuração do conteúdo principal
Imagem, metadata e gestao individual
Cada item da galeria tem vida própria: recebe mídia, metadados e um conjunto de campos que influenciam diretamente o seu peso visual dentro da composição.
Media e metadata
- O campo Imagem recebe o asset principal de cada item
- ALT e TITULO ficam associados a essa imagem individualmente
- Isto permite manter acessibilidade e contexto mesmo em galerias com muitos items
Gestão do item
- Os itens são organizados num fluxo que permite gerir ordem e estrutura
- Os icones laterais indicam uma lógica de controlo rápido ao nível do próprio item
- Vale a pena rever item a item antes de validar o resultado final em preview
Configurações de apresentação dos itens
Masonry horizontal, vertical e hierarquia visual
Depois de definires a imagem de cada item, podes ajustar como esse item ocupa a grelha. E aqui que entram os campos ligados a masonry e ao peso visual dentro da composição.
Horizontal Masonry Columns
- Na prática, este campo costuma definir quantas colunas horizontais o item ocupa dentro da grelha
- One tende a manter a largura base; Two, Three e seguintes fazem o item ocupar mais largura
- Funciona bem para imagens panorâmicas, destaques ou itens que precisam de ganhar mais protagonismo
- Se vários itens tiverem spans muito largos ao mesmo tempo, a galeria pode perder equilíbrio
Vertical Masonry Columns
- Este campo costuma controlar quantas linhas verticais o item ocupa, influenciando diretamente a sua altura aparente
- One tende a manter a altura base; valores superiores fazem o item crescer no eixo vertical
- É útil para retratos, detalhes ou imagens que beneficiam de uma leitura mais alta e menos comprimida
- O ideal e cruzar este campo com o horizontal de forma intencional, para criar ritmo sem desorganizar a grelha
Quando aumentas o valor horizontal, o card tende a alargar dentro da grelha e a destacar-se mais no conjunto.
Quando aumentas o valor vertical, o card tende a ficar mais alto e a criar uma leitura de masonry mais marcada.
Demo e downloads
Exemplos e configurações