Um Grupo é uma caixa que guarda outros blocos e os organiza. Use-o para pôr elementos lado a lado, criar colunas ou dar a uma parte de uma secção o seu próprio fundo e borda.
Onde pode usar grupos
Muitas secções aceitam um bloco Grupo: o rodapé, a newsletter, o hero, os diapositivos da apresentação, a FAQ, antes e depois, as avaliações, o contacto, a 404, a confirmação do pedido, as linhas recolhíveis e a zona de texto das listas de produtos, como produtos em destaque e coleções. Cada secção decide que blocos podem ir dentro dos seus grupos e quantos grupos aceita.
Para adicionar um no construtor, selecione a secção, clique em Adicionar novo bloco e escolha Grupo. Depois arraste outros blocos para dentro dele. Algumas secções (rodapé, newsletter, avaliações) também permitem pôr um grupo dentro de outro grupo.
Disposição
- Largura: Preencher ocupa o espaço livre e divide-o por igual com os outros grupos Preencher ao lado. Ajustar só é tão largo como o seu conteúdo. Personalizado define uma Largura personalizada em percentagem.
- Direção: Vertical empilha os blocos, Horizontal coloca-os lado a lado. Os blocos lado a lado passam para uma nova linha quando não há espaço suficiente.
- Empilhar verticalmente no telemóvel (só Horizontal): nos telemóveis, os blocos ficam antes empilhados.
- Posição: posiciona os blocos na vertical (Topo, Centro, Inferior).
- Alinhamento: posiciona os blocos da esquerda para a direita (Esquerda, Centro, Direita).
- Espaço entre: distribui os blocos com espaços iguais entre eles. Está disponível na direção em que os blocos seguem: em Posição para um grupo vertical, em Alinhamento para um grupo horizontal.
Aspeto
- Utilizar esquema de cores do elemento pai: ativo por defeito, para o grupo usar as cores da secção. Desative-o e escolha um Esquema de cores para dar ao grupo o seu próprio fundo e cores de texto.
- Bordo: Nenhum ou Sólido. Sólido acrescenta Espessura do contorno (1 a 20 píxeis) e Opacidade do contorno. A cor é a cor da borda do esquema.
- Raio do canto: arredonda os cantos, de 0 a 100 píxeis.
- Sobreposição de fundo: acrescenta uma camada de cor por cima do fundo. Defina a Cor da sobreposição e o Estilo da sobreposição: Sólido, ou Gradiente que vai ficando transparente, com uma Direção do gradientePara cima ou Baixo. Útil para tornar o texto legível sobre uma imagem de hero.
Espaçamento
O Espaçamento entre blocos é o espaço entre os blocos dentro do grupo (0 a 100 píxeis). O Preenchimento interior é o espaço entre a margem do grupo e os seus blocos, de cada lado.
Receitas
- Dois botões lado a lado num hero: coloque os dois num grupo Horizontal com pouco espaçamento.
- Três colunas no rodapé: um grupo Horizontal com três itens Preencher lá dentro, e Empilhar verticalmente no telemóvel ativo.
- Um cartão: um grupo Vertical com o seu próprio esquema de cores, uma borda Sólida, um raio do canto e espaçamento interior.
- Texto à esquerda, botão à direita: um grupo Horizontal com o Alinhamento em Espaço entre.
Bom saber
- Uma coluna está mais larga do que quer: dois grupos Preencher dividem o espaço por igual. Defina um como Personalizado e dê-lhe uma percentagem.
- O grupo não aparece: um grupo sem blocos, ou só com blocos ocultos, não aparece na loja.
- O Grupo não está na lista de blocos: essa secção não aceita grupos, ou o limite de grupos foi atingido.
- As configurações de Texto, Botão e Separador estão em Blocos Grupo, Texto, Botão e Separador: como funcionam as configurações dos componentes de disposição?.