Personalizar o layout do grupo

Blocos de grupo ajudam a manter o conteúdo organizado em um só lugar, aplicando o mesmo estilo e alinhamento. Este guia mostrará como usar as configurações de layout para criar seções de página responsivas e bem alinhadas com um bloco de grupo.

Por padrão, um bloco de grupo organiza os blocos um sobre o outro. Para ter mais flexibilidade na organização do layout do seu design, você pode controlar se o conteúdo aparece lado a lado (na horizontal) ou empilhado (na vertical). Para personalizar o alinhamento do conteúdo do grupo, siga estas etapas:

1. Selecione Visualização em lista na parte superior da tela de edição.
2. Selecione o bloco de grupo.
3. Na barra lateral de configurações do bloco à direita, escolha uma destas cinco opções:
   • Grupo: a organização padrão para blocos de grupo.
   • Pilha: organiza os blocos verticalmente, um sob o outro. Ideal para criar conteúdo de forma clara e em sequência, como etapas ou itens em destaque.
     • Em Justificação, ajuste o alinhamento vertical escolhendo entre superior, central ou inferior.
   • Linha: coloca os blocos lado a lado na horizontal. Perfeito para criar comparações de funcionalidades ou galerias de imagens.
     • Em Justificação, escolha o alinhamento horizontal à esquerda, à direita, centralizado ou espaçado.
   • Grade: organiza os blocos de forma personalizável em um layout de grade. Isso é útil para exibir produtos ou membros da equipe.
4. Clique em Salvar ou Publicar para salvar as alterações.

Controlar a largura total do seu bloco de grupo ajuda você a criar uma hierarquia visual na sua página e ajustar como seu conteúdo se adapta a diferentes tamanhos de tela. Você pode alterar quanto espaço um bloco de grupo ocupa, considerando largura do conteúdo, amplitude e largura total, seguindo estas etapas:

1. Selecione Visualização em lista na parte superior da tela de edição.
2. Selecione o bloco de grupo.
3. Na barra de ferramentas exibida, selecione o íconeAlinhare escolha entre:
   • Conteúdo (ou “Nenhum”): define a largura dos blocos como largura padrão da área de conteúdo. O melhor para seções de conteúdo regulares.
   • Largura ampla: usa uma largura maior para os blocos (mas não total). Boa opção para destacar um conteúdo importante sem ocupar toda a tela.
   • Largura total: configura o bloco para preencher a largura total da área disponível. Perfeita para criar seções de conteúdo imersivas, como banners ou grandes galerias de imagens.
4. Clique em Salvar ou Publicar para salvar as alterações.

Saiba mais sobre como alterar a largura do seu conteúdo.

Você pode controlar quanto espaço seu conteúdo ocupa dentro de um grupo, o que é ideal ao criar designs responsivos, que funcionam bem em telas de dispositivos móveis e desktops. Siga estas etapas para alterar as configurações de largura do conteúdo do bloco de grupo:

1. Selecione Visualização em lista na parte superior da tela de edição.
2. Selecione o bloco de grupo.
3. Na barra lateral de configurações do bloco, localize a seçãoBlocos internos. Ative ou desative a configuração Os blocos internos usam a largura do conteúdo :
   • Ativada: o conteúdo seguirá as configurações de largura do conteúdo do site. Se quiser valores específicos, use os controles de largura.
   • Desativada: o conteúdo será estendido para preencher a largura total do bloco de grupo.
4. Clique em Salvar ou Publicar para salvar as alterações.

A configuração “Os blocos internos usam a largura do conteúdo” controla a largura com que o conteúdo dentro do bloco de grupo será exibido:

Quando ativada: o conteúdo dentro do bloco de grupo seguirá a configuração de largura do conteúdo geral do seu site (geralmente em torno de 700-800 px). Isso cria uma coluna de conteúdo centralizada e limitada, mesmo que seu bloco de grupo use a largura total da página. Assim, a legibilidade fica melhor em telas maiores, mantendo um layout atrativo.

Quando desativada: o conteúdo dentro do bloco de grupo será expandido para preencher toda a largura do bloco de grupo . Se o seu bloco de grupo é de largura total, seu conteúdo também se estenderá pela largura total. Isso é ideal para criar designs sem bordas, como galerias de imagens de largura total, ou quando você deseja que o conteúdo corresponda à largura do plano de fundo do seu bloco de grupo .

Veja este exemplo prático: se você tiver um bloco de grupo com um fundo colorido que se estende pela largura da página inteira, ativar “Os blocos internos usam a largura do conteúdo” criará uma coluna centralizada de conteúdo com o fundo colorido se estendendo de uma ponta à outra. Isso é perfeito para destacar informações importantes, mantendo o interesse visual.

O ajuste de dimensões permite que você controle a altura, a largura e o espaçamento do bloco de grupo conforme suas necessidades de conteúdo e layout. Isso ajuda a criar seções com um visual mais equilibrado e com bastante espaço ao redor do seu conteúdo. Defina o espaçamento exato para usar ao redor conteúdo do seu bloco de grupo seguindo estas etapas:

1. Selecione Visualização em lista na parte superior da tela de edição.
2. Selecione o bloco de grupo.
3. Na barra lateral de configurações do bloco, localize a seção Dimensões .
4. Defina valores para:
   • Preenchimento: espaço entre o conteúdo e a borda do bloco de grupo. Mais preenchimento cria um espaço em torno do seu conteúdo.
   • Margem: espaço em torno do bloco de grupo. Ajuda a separar esta seção de outro conteúdo.
5. Use o ícone de link para alternar entre ajustes laterais uniformes ou individuais.

Saiba mais sobre como personalizar as dimensões do bloco.

O ajuste de espaçamento define o quão próximo ou afastado o conteúdo será exibido dentro do seu bloco de grupo, criando uma harmonia visual entre os elementos. Isso ajuda os visitantes a identificar conteúdo relacionado e mantém a seção organizada. Para gerenciar o espaçamento entre blocos dentro do seu grupo:

1. Selecione Visualização em lista na parte superior da tela de edição.
2. Selecione o bloco de grupo.
3. Na barra lateral de configurações do bloco, localize a seção Espaçamento do bloco .
4. Use os controles para definir:
   • Espaçamento do bloco: espaço entre blocos individuais. Mais espaçamento separa melhor o conteúdo, e menos deixa tudo mais conectado.
   • Altura mínima: a altura mínima do bloco de grupo. Útil para criar seções consistentes ou adicionar espaço em branco para equilibrar o visual.

Saiba mais sobre como ajustar o espaço entre blocos.