Grupo
O que você vai aprender
- Pra que serve o block Grupo
- Como montar layouts customizados combinando blocks dentro dele
- Como usar mídia de fundo e link no grupo inteiro
Pra que serve
É o block de layout mais flexível do tema: um container vazio onde você coloca outros blocks dentro (texto, botão, imagem, ícone, o que quiser, inclusive outro Grupo) e controla como eles se organizam, na horizontal ou vertical, com alinhamento e espaçamento próprios.
Use Grupo sempre que precisar combinar vários elementos numa composição customizada que nenhuma section pronta atende, por exemplo: um ícone ao lado de um texto, ou uma coluna de botões dentro de uma Hero.
Também dá pra usar o Grupo como um "cartão" próprio: com mídia de fundo (imagem ou vídeo), overlay de cor, borda e até um link que torna o grupo inteiro clicável.
Como configurar
Layout
| Configuração | Pra que serve |
|---|---|
| Direção | Empilha o conteúdo interno na vertical (coluna) ou horizontal (linha). |
| Vertical no celular | Quando a direção é horizontal, força empilhamento vertical no celular (evita espremer os itens numa tela estreita). |
| Alinhamento / Posição | Alinhamento horizontal e vertical do conteúdo interno (as opções mudam dependendo da Direção escolhida). |
| Espaçamento | Distância entre os blocks internos. |
Tamanho
| Configuração | Pra que serve |
|---|---|
| Largura / Altura | Ajustar ao conteúdo, Preencher o espaço disponível, ou Personalizado (porcentagem definida manualmente), com opções separadas pra desktop e celular. |
Aparência
| Configuração | Pra que serve |
|---|---|
| Herdar esquema de cores | Usa a cor da section onde está; desative pra escolher uma cor própria pro grupo. |
| Mídia de plano de fundo | Adiciona uma imagem ou vídeo atrás do conteúdo do grupo, transformando-o num "banner" próprio. |
| Sobreposição do plano de fundo | Adiciona uma camada de cor sólida ou gradiente sobre a mídia de fundo, pra dar contraste ao texto por cima. |
| Bordas | Borda ao redor do grupo inteiro. |
Link do bloco
| Configuração | Pra que serve |
|---|---|
| Link | Torna o grupo inteiro clicável (útil pra criar "cards" clicáveis combinando imagem + texto + botão). |
Boas práticas
- Se o link do grupo não estiver funcionando, confira se não tem outro elemento clicável (botão, link) dentro do grupo competindo pelo clique.
- A mídia de fundo não tem proporção fixa, ela se ajusta ao tamanho do grupo (
cover). Envie em alta resolução (pelo menos 1600px de largura) mas comprimida, veja Dimensão de imagem pra entender por que isso importa pra velocidade da loja.