Grupo
O que você vai aprender
- Pra que serve este block e o que pode ir dentro dele
- Como funciona mídia de fundo e sobreposição
Pra que serve
É um container de layout: agrupa outros blocks (de qualquer tipo do tema, blocks de app, ou um Divisor) em linha ou coluna, com controle de alinhamento, espaçamento, fundo e borda. É a peça central pra montar layouts customizados dentro de sections, tipo colunas lado a lado ou blocos empilhados com fundo próprio.
O valor deste block está inteiramente em quais blocks você coloca dentro e como configura o agrupamento, ele não renderiza nenhum conteúdo próprio sozinho.
Como configurar
Layout
| Configuração | Pra que serve |
|---|---|
| Direção | Vertical (coluna) ou Horizontal (linha). |
| Empilhar no celular | Só aparece com direção Horizontal, força a virar coluna na visualização mobile. |
| Alinhamento / Posição | Controlam o alinhamento horizontal e vertical dos blocks internos, as opções mudam conforme a Direção escolhida. |
| Alinhar linha de base do texto | Só aparece quando Posição é "Inferior" em layout horizontal, alinha o texto pela linha de base em vez da borda da caixa. |
| Espaçamento | Distância entre os blocks internos. |
Tamanho
| Configuração | Pra que serve |
|---|---|
| Largura / Largura no celular | Ajustar, Preencher ou Personalizada (percentual), controlados separadamente por dispositivo. |
| Altura | Ajustar, Preencher ou Personalizada. |
Aparência
| Configuração | Pra que serve |
|---|---|
| Herdar esquema de cores | Quando ativado, usa o esquema de cores do contexto ao redor. |
| Mídia de fundo | Nenhuma, Imagem ou Vídeo, atrás do conteúdo do grupo. |
| Posição da mídia de fundo | Cobrir (preenche cortando) ou Conter (mostra inteira, sem cortar). |
| Bordas | Estilo, espessura, opacidade e raio da borda ao redor do grupo. |
| Sobreposição | Ativa uma camada de cor (sólida ou gradiente) por cima da mídia de fundo, útil pra manter contraste do texto. |
Link do bloco
| Configuração | Pra que serve |
|---|---|
| Link | Torna o grupo inteiro clicável, útil quando ele funciona como um "card". |
| Abrir em nova aba | Só faz sentido com Link preenchido. |
Boas práticas
- Use Mídia de fundo + Sobreposição em vez de colocar uma Imagem como block filho quando quiser texto sobreposto a uma imagem, fica mais fácil de controlar contraste e alinhamento.
- Cuidado ao usar Link no grupo se algum block filho também for um link (ex: um Botão), links aninhados podem gerar comportamento inesperado de clique.