Visão geral
Três componentes de layout reutilizáveis aparecem em quase todas as seções do builder: Grupo, Texto e Divisor. Juntos, eles permitem criar qualquer layout sem escrever CSS. Selecione um bloco para abrir suas configurações.
Grupo
Um Grupo é um contêiner de layout flexível. Adicione blocos filhos dentro dele (texto, botões, imagens, campos de newsletter, até grupos aninhados) e controle como eles são organizados.
Direção
- Vertical: os filhos ficam empilhados de cima para baixo.
- Horizontal: os filhos ficam lado a lado em uma linha.
A opção Empilhar verticalmente no mobile aparece apenas quando a Direção é Horizontal. Ative para transformar uma linha horizontal em uma pilha vertical em telas pequenas.
Posição e Alinhamento
Essas opções distribuem os filhos ao longo dos eixos principal e cruzado. O significado delas muda conforme a direção, e a opção Entre (espaço igual entre os filhos) só existe no eixo principal:
- Direção vertical: Posição é o eixo principal (vertical): topo, centro, base ou entre. Alinhamento é o eixo cruzado (horizontal): esquerda, centro ou direita.
- Direção horizontal: Alinhamento é o eixo principal (horizontal): esquerda, centro, direita ou entre. Posição é o eixo cruzado (vertical): topo, centro ou base.
Largura
- Preencher: expande para ocupar todo o espaço disponível no elemento pai. Use para grupos que devem dividir o espaço igualmente dentro de um pai horizontal.
- Ajustar: encolhe para o tamanho natural do conteúdo.
- Personalizado: revela um controle deslizante de Largura personalizada definido em porcentagem (0 a 100%). O grupo mantém esse tamanho sem crescer ou encolher.
Espaçamento
O espaço em pixels entre os elementos filhos (0 a 100 px, padrão 20 px).
Esquema de cores
Usar esquema de cores do pai vem ativado por padrão, então o grupo herda o esquema do pai. Desative para revelar o seletor de Esquema de cores e escolher um dos seus esquemas globais. Assim, você pode criar zonas de cor distintas dentro de uma seção.
Borda
Borda pode ser Nenhuma ou Sólida. Sólida revela dois controles: Espessura da borda (1 a 20 px, padrão 1) e Opacidade da borda (0 a 100%, padrão 100). A cor vem da cor de borda do esquema ativo.
Raio do canto
Arredondamento dos cantos em pixels (0 a 100), independente da borda. Use para contêineres com aparência de cartão.
Sobreposição de fundo
A opção Sobreposição de fundo adiciona uma camada colorida sobre o fundo do grupo. Ao ativar, defina a Cor da sobreposição (incluindo transparência pelo controle de opacidade), o Estilo da sobreposição (Sólido ou Gradiente que desaparece para transparente) e, para gradiente, a Direção do gradiente (Para cima ou Para baixo). Muito usado para dar cor a fundos de mídia.
Padding
Espaçamento interno em cada lado, em pixels, de 0 a 100 px. O padding fica dentro da borda, entre ela e os filhos.
Texto
Um bloco de texto exibe títulos, parágrafos e textos formatados. O editor de texto rico suporta negrito, itálico, sublinhado, tachado e texto colorido.
Predefinição
A predefinição de tipografia define a família da fonte, o peso padrão e a tag HTML semântica (seu papel na página):
- Padrão: herda o estilo base de texto da seção.
- Parágrafo: estilo de texto do corpo.
- Título 1 até Título 6: estilos de título, usando suas fontes de título e subtítulo.
Tamanho
Um tamanho de fonte personalizado em pixels (10 a 30 px, padrão 16). Este é o tamanho real exibido pelo bloco.
Largura e Alinhamento
- Ajustar: o bloco só tem a largura do conteúdo.
- Preencher: o bloco expande até 100% da largura do contêiner.
Alinhamento (Esquerda, Centro, Direita) só aparece quando a Largura está em Preencher, pois só faz sentido quando o bloco ocupa todo o contêiner.
Altura de linha e Espaçamento entre letras
Altura de linha define o ritmo vertical: Normal (padrão), Apertado ou Solto. Espaçamento entre letras define o espaçamento dos caracteres com as mesmas três opções.
Esquema de cores
Dentro de um grupo, Usar esquema de cores do pai vem ativado por padrão. Desative para revelar o seletor de Esquema de cores. Predefinições de título usam a cor de título do esquema; parágrafo e padrão usam a cor de texto do corpo. Como seção independente, o seletor aparece sozinho, sem opção de herdar.
Padding
Espaçamento interno em cada lado, em pixels, de 0 a 100 px.
Divisor
Uma linha separadora que se adapta ao elemento pai. Em um layout vertical (coluna) é uma linha horizontal; dentro de um grupo horizontal vira uma linha vertical.
Largura
- Ajustar: o contêiner só tem a largura da linha.
- Preencher: o contêiner expande para ocupar o espaço disponível.
Espessura
Espessura da linha em pixels (1 a 10 px, padrão 1). Para divisor horizontal é a altura; para vertical é a largura.
Comprimento
A extensão da linha como porcentagem do contêiner (5 a 100%, padrão 100). Defina abaixo de 100% para criar uma linha parcial, recuada.
Alinhamento
Posiciona a linha quando o comprimento está abaixo de 100%: Início, Centro (padrão) ou Fim. Este controle fica oculto enquanto o comprimento for 100%.
Raio do canto
- Reto: extremidades retangulares.
- Arredondado: extremidades arredondadas.
Esquema de cores
Opcionalmente, escolha um Esquema de cores. O divisor usa a cor de borda desse esquema. Se nenhum for definido, herda a cor da seção ou grupo pai.
Padding
Espaçamento em cada lado, em pixels. Como bloco, o intervalo é de 0 a 100 px. Quando o divisor é adicionado como seção de nível superior, o padding vai até 200 px (padrão 20) para mais espaço vertical.
Erros comuns
- Dois grupos preenchendo dentro de um pai horizontal: cada um ocupa 50% do espaço, que normalmente é o desejado. Para deixar um lado mais largo, defina a Largura desse grupo como Personalizado.
- Divisor vertical não aparece: um divisor só fica vertical quando é filho direto de um grupo com Direção Horizontal. Verifique a direção do grupo pai.
- Opção Entre ausente: Entre aparece apenas no eixo em que os filhos fluem, então está em Posição para grupos verticais e em Alinhamento para grupos horizontais.
- Texto na cor errada: provavelmente está herdando de um grupo pai com esquema diferente. Desative Usar esquema de cores do pai no bloco de texto e escolha o esquema explicitamente.
Para saber onde esses componentes podem ser usados, veja Seções e blocos.