Visão geral
Três componentes de layout reutilizáveis aparecem em quase todas as seções do construtor: Grupo, Texto e Divisor. Entendê-los permite criar qualquer layout necessário sem escrever CSS.
Grupo
Um Grupo é um contêiner de layout flexível. Adicione blocos filhos dentro dele (texto, botões, imagens, entradas de newsletter e até grupos aninhados) e controle exatamente como eles são organizados.
Direção
- Vertical: filhos se empilham de cima para baixo (o padrão para a maioria das seções).
- Horizontal: filhos ficam lado a lado em uma linha.
Habilite Empilhar no celular para alternar automaticamente um grupo horizontal para uma pilha vertical em telas pequenas.
Alinhamento e posição
Essas duas configurações controlam como os filhos são distribuídos ao longo dos eixos principal e cruzado. Seu significado muda dependendo da direção do grupo:
- Direção vertical: Posição controla a distribuição vertical (superior, centro, inferior ou entre). Alinhamento controla o posicionamento horizontal (esquerda, centro, direita ou entre).
- Direção horizontal: Alinhamento controla a distribuição horizontal (esquerda, centro, direita ou entre). Posição controla o posicionamento vertical (superior, centro, inferior ou entre).
Entre distribui os filhos igualmente com espaço igual entre eles, o que é útil para esticar itens em uma linha de largura total.
Espaçamento
O espaçamento em pixels entre elementos filhos (0 a 100 px, padrão 20 px).
Largura
- Preencher: expande para ocupar todo o espaço disponível no pai. Use isso para grupos que devem compartilhar espaço igualmente dentro de um pai horizontal.
- Ajustar: encolhe para o tamanho natural de seu conteúdo. Use isso para grupos que devem ser apenas tão largos quanto o que está dentro deles.
- Personalizado: defina uma porcentagem específica (0 a 100%). O grupo manterá aquele tamanho sem crescer ou encolher.
Esquema de cores e herança
Por padrão, um grupo herda o esquema de cores de sua seção pai. Desative Herdar esquema para atribuir um esquema de cores explícito (1 a 9) das suas configurações globais de cores. Isso permite criar zonas distintas de cor de plano de fundo ou texto dentro de uma seção sem adicionar uma nova seção.
Borda
Adicione uma borda ao redor do grupo. Opções: Nenhuma ou Sólida. Quando sólida é selecionada, defina a espessura da borda (1 a 20 px); a cor vem da cor de borda do esquema ativo.
Raio
Arredondamento de cantos em pixels (0 a 100). Use isso para criar contêineres de grupo no estilo cartão.
Opacidade
Opacidade geral do grupo (0 a 100%, padrão 100%).
Sobreposição
Adiciona uma camada colorida dentro do grupo. Quando habilitado, defina a Cor da sobreposição (incluindo transparência usando o controle deslizante de opacidade do seletor de cores), o Estilo (preenchimento sólido plano ou um gradiente que desvanece para transparente) e, para gradiente, a Direção (para cima ou para baixo). Isso é comumente usado para criar uma camada colorida semitransparente sobre um plano de fundo de mídia em uma seção herói.
Preenchimento
Espaçamento em cada lado em pixels (superior, esquerdo, direito e inferior), cada um de 0 a 100 px. O preenchimento é aplicado dentro da borda do grupo, criando espaço entre a borda e os filhos do grupo.
Texto
Um bloco de texto renderiza conteúdo de texto rico (títulos, parágrafos e texto formatado) dentro de uma seção ou grupo. O editor suporta negrito, itálico, sublinhado, tachado e texto colorido.
Predefinição
A predefinição de tipografia controla o tamanho da fonte, o peso da fonte e o papel semântico do texto. Predefinições disponíveis:
- Padrão: herda o estilo de texto base da seção.
- Parágrafo: estilo de texto de corpo.
- Título 1 a Título 6: tamanhos decrescentes do maior ao menor, usando a fonte de título definida nas suas configurações de tipografia.
Tamanho
Um tamanho de fonte personalizado em pixels (10 a 30 px) que substitui o tamanho da predefinição. Deixe no padrão para deixar a predefinição determinar o tamanho.
Largura
- Ajustar: o bloco de texto é apenas tão largo quanto seu conteúdo.
- Preencher: o bloco de texto se expande para 100% da largura do contêiner disponível.
Alinhamento
Alinhamento horizontal do texto: Esquerda, Centro ou Direita.
Altura da linha
Controla o ritmo vertical: Compacto (linhas compactas), Normal (o padrão) ou Espaçoso (linhas espaçosas).
Espaçamento de letras
Controla o espaçamento de caracteres: Compacto (caracteres mais próximos), Normal (o padrão) ou Espaçoso (caracteres mais distantes).
Esquema de cores e herança
Por padrão, um bloco de texto herda sua cor da seção pai. Desative Herdar esquema para usar um esquema de cores específico. As predefinições de título usam a cor de título do esquema; as predefinições de parágrafo e padrão usam a cor do texto de corpo do esquema.
Preenchimento
Espaçamento interno em cada lado em pixels (superior, esquerdo, direito e inferior), cada um de 0 a 100 px.
Divisor
Uma linha separadora visual. Em um layout vertical, aparece como uma linha horizontal. Dentro de um grupo horizontal, aparece como uma linha vertical. O divisor se adapta automaticamente à direção de seu contêiner pai.
Espessura
A espessura da linha em pixels (1 a 10 px, padrão 1 px).
Comprimento
A extensão da linha como porcentagem do seu contêiner (5 a 100%, padrão 100%). Defina como menos de 100% e combine com alinhamento para criar uma linha decorativa centralizada ou recuada.
Estilo de extremidade
- Afiado: extremidades retangulares.
- Arredondado: extremidades em formato de pílula.
Alinhamento
Como a linha é posicionada quando seu comprimento é menor que 100%: Início, Centro (padrão) ou Fim.
Largura
- Ajustar: o contêiner do divisor é apenas tão largo quanto a linha em si.
- Preencher: o contêiner do divisor se expande para preencher o espaço disponível em seu pai.
Esquema de cores
Opcionalmente defina um esquema de cores (1 a 9). O divisor usa a cor de borda do esquema selecionado. Se nenhum esquema estiver definido, ele herda a cor da seção ou grupo pai.
Preenchimento
Espaçamento em cada lado em pixels. Quando o divisor é usado como seção de nível superior, os valores de preenchimento vão até 200 px para mais espaço vertical generoso.
Problemas comuns
- Dois grupos de preenchimento dentro de um pai horizontal: cada um ocupará 50% do espaço disponível, o que geralmente é o que você quer. Se precisar de um lado mais largo que o outro, use a largura Personalizado em um deles.
- Divisor vertical não aparecendo: um divisor só se torna vertical quando é filho direto de um grupo configurado para direção Horizontal. Certifique-se de que a direção do grupo pai está configurada como horizontal.
- Texto mostrando uma cor inesperada: se um bloco de texto aparecer na cor errada, provavelmente está herdando de um grupo pai que tem um esquema de cores diferente. Desative Herdar esquema no bloco de texto e atribua o esquema correto explicitamente.