Componente Mosaico
O bloco Mosaico foi pensado para construir composicoes visuais modulares onde cada item pode combinar imagem, texto, filtro, link e pesos diferentes dentro da grelha. Permite controlar gap, espacamentos, background, inside container, animacao e a ocupacao horizontal e vertical de cada tile, mantendo ALT e TITULO associados a cada item.
Informacoes gerais
O bloco Mosaico e uma solucao pensada para compor areas visuais com varios tiles, cada um com o seu proprio peso, conteudo e destino. Em vez de repetir imagens com comportamento uniforme, este componente permite construir uma grelha mais editorial, onde algumas pecas ganham mais largura, outras mais altura, e o texto pode entrar como parte da propria composicao.
Este bloco pode incluir:
- varios items com imagem, texto e link dentro do mesmo bloco
- ALT e TITULO associados individualmente a cada imagem
- controlo de border radius e image filter por tile
- ajustes de Horizontal Columns e Vertical Rows
- definicao de Order Mobile para reorganizar a leitura em ecras pequenos
- ligacao por URL ou Category / Page, com respetivo Target
- controlo estrutural de gap, background, inside container e animacao
Utiliza este componente quando o objetivo e construir uma composicao com hierarquia, ritmo e multiplos pontos de entrada. O Mosaico faz mais sentido quando cada tile tem funcao propria dentro do layout, e nao apenas quando precisas de listar imagens de forma uniforme.
Exemplos visuais do bloco
Variacoes de layout e composicao
O bloco Mosaico pode assumir leituras muito diferentes consoante a relacao entre spans horizontais e verticais, uso de texto, filtros e destinos de clique. Os tres exemplos abaixo resumem formas recorrentes de o usar no frontend sem perder coerencia visual.
Quando usar / Quando evitar
Aplicacao correta do componente
Quando usar
- Para campanhas, hubs editoriais e entradas visuais para varias paginas ou categorias
- Quando cada tile precisa de peso proprio, com spans diferentes e possivel uso de texto
- Para construir composicoes modulares onde imagem, copy e link trabalham em conjunto
- Quando a hierarquia da secao deve nascer da grelha e nao de uma lista uniforme de imagens
Quando evitar
- Quando precisas apenas de uma imagem isolada sem logica de composicao entre tiles
- Quando a narrativa e totalmente sequencial e depende de rotacao slide a slide
- Quando o conteudo textual e demasiado extenso para caber com clareza dentro da grelha
Como configurar na pratica
Sequencia de trabalho recomendada
Definir a base
- Escolher Skin, Gap, background e a logica estrutural do bloco
- Definir se o mosaico deve ficar mais contido no container ou mais aberto na composicao
Construir os items
- Carregar imagem, preencher ALT e TITULO e decidir se o tile precisa de texto
- Usar image filter e border radius apenas quando ajudam a leitura e o tom visual
Equilibrar spans
- Ajustar Horizontal Columns para controlar largura relativa
- Ajustar Vertical Rows para controlar altura e ritmo da grelha
Validar mobile e clique
- Confirmar Order Mobile, legibilidade do texto e equilibrio entre tiles
- Rever URL, Category / Page e Target para garantir comportamento coerente no frontend
Boas práticas de conteúdo
Curadoria visual, ordem e acessibilidade
Hierarquia e ritmo
- Escolhe 1 ou 2 tiles com maior protagonismo e deixa os restantes apoiar essa leitura
- Evita dar peso especial a quase todos os items, porque o mosaico perde clareza rapidamente
- Usa gap, spans e contraste de escala para construir ritmo, nao para compensar falta de curadoria
Texto, filtro e destino
- Se usares o campo Texto, garante contraste suficiente entre copy e imagem
- O Image filter deve reforcar a legibilidade, nao tapar a qualidade do asset
- Se um tile parece clicavel, o destino configurado deve corresponder a essa expectativa visual
Configuracoes avancadas do componente Mosaico
Estrutura, espacamentos e comportamento base
Estas opcoes controlam a base estrutural do mosaico: identidade visual do bloco, organizacao interna, espacamentos e forma como a composicao encaixa no layout da pagina.
Estrutura base
- Skin define a variante visual global do bloco
- Disabled block permite desativar o bloco sem o apagar
- Block ID e Extra Class ajudam na organizacao, ancora e customizacao
Spacings e container
- Margin e Padding definem o encaixe do mosaico no resto da pagina
- Inside Container controla se a grelha respeita mais claramente a largura do container
- Gap define o respiro entre os tiles e influencia diretamente o ritmo visual
Cor e animacao
- Background color define o fundo estrutural da composicao
- Animation on/off ativa ou desativa a entrada animada do bloco
- Scroll animation type ajusta o tipo de animacao aplicado no frontend
Configuracao do conteudo principal
Imagem, metadata e copy de cada tile
Cada item do mosaico recebe o seu proprio asset, metadata e bloco de conteudo. E nesta area que se define tanto a base visual da imagem como a informacao textual que pode aparecer dentro do tile.
Media e metadata
- O campo Imagem recebe o asset principal de cada tile
- ALT e TITULO ficam associados individualmente a essa imagem
- Isto permite manter acessibilidade e contexto mesmo quando a composicao mistura varios papeis visuais
Tratamento visual
- Image border radius controla a suavizacao visual dos cantos
- Image filter ajuda a escurecer ou uniformizar a imagem para suportar melhor o texto
- Estas opcoes devem servir a legibilidade e nao mascarar um asset fraco
Texto do tile
- O campo Texto permite inserir copy diretamente na composicao
- Funciona bem para titulos curtos, chamadas editoriais ou pequenas frases de apoio
- Se a copy for longa, o tile perde impacto e o mosaico fica visualmente pesado
Configuracoes de apresentacao dos items
Spans, mobile order e comportamento de clique
Depois de definires imagem e copy, e nesta zona que decides quanto espaco cada tile ocupa, como se reorganiza no mobile e para onde encaminha o utilizador quando existe interacao.
Horizontal Columns
- Na pratica, este campo define quantas colunas horizontais o tile ocupa dentro da grelha
- One tende a manter a largura base; valores superiores fazem o tile ganhar mais presenca no eixo horizontal
- Funciona bem para imagens panoramicas, heroes visuais ou tiles que precisam de abrir a leitura
Vertical Rows
- Este campo controla quantas linhas verticais o tile ocupa, alterando a sua altura aparente
- One tende a manter a altura base; valores superiores fazem o tile crescer no eixo vertical
- E util para retratos, detalhes ou blocos textuais que precisam de mais respiracao
Order Mobile
- Permite reorganizar a sequencia dos tiles quando a grelha colapsa para mobile
- E importante quando o tile principal em desktop nao deve ser necessariamente o primeiro em ecras pequenos
- Ajuda a proteger a narrativa e a prioridade comercial da secao
URL, Category / Page e Target
- URL define um destino direto para o tile
- Category / Page ajuda a ligar o tile a uma pagina interna quando a relacao ja existe no CMS
- Target controla se a abertura acontece na mesma pagina ou num novo contexto
Guias relacionados
Contexto complementar para este bloco