Bloco Seção com colunas: monte layouts lado a lado
Divida a página em 1 a 6 colunas e coloque outros blocos dentro. Veja cada opção do bloco Seção com colunas do Editor visual.
Neste artigo
A Seção com colunas é uma "caixa" que divide uma faixa da página em 1 a 6 colunas. Dentro de cada coluna você coloca outros blocos (texto, imagem, botão, números…). Serve para montar layouts lado a lado, como foto à esquerda e texto à direita, ou três diferenciais em linha.
- Só o administrador do site usa o Editor visual.
- A seção com colunas não pode ser colocada dentro de outra coluna, e as partes fixas (cabeçalho, rodapé, título do imóvel…) também não vão dentro dela.
Para adicionar: . Você também pode digitar parte do nome na caixa Buscar bloco…. O bloco vale na Página inicial e na Página do imóvel (escolha a página no alto do editor).
12- 1Digite parte do nome (ou uma palavra-chave) para achar o bloco mais rápido.
- 2Clique em "Seção com colunas" (ou arraste para a página) para adicionar o bloco.
O que ela mostra no site
Uma faixa com as colunas escolhidas lado a lado. Cada coluna mostra os blocos que você pôs nela, de cima para baixo. No celular, por padrão, as colunas ficam uma embaixo da outra. Os blocos de dentro perdem a "moldura" própria (a largura é controlada pela seção).
123- 1A seção divide a faixa em colunas lado a lado.
- 2Cada coluna recebe os blocos que você escolher.
- 3O botão "+ Adicionar bloco" põe um bloco naquela coluna.
Quando usar
- Para pôr texto e imagem lado a lado com mais liberdade que o bloco "Imagem e texto".
- Para alinhar vários botões, números ou depoimentos em linha.
- Para dar um fundo diferente a cada coluna (efeito de cartões).
Todos os campos (aba Conteúdo)
12345- 1Escolha quantas colunas e a largura de cada uma.
- 2Distância entre as colunas.
- 3Posição vertical do conteúdo.
- 4Cor de fundo de cada coluna.
- 5Empilhar ou manter lado a lado no celular.
| Campo | O que faz | Padrão | Opções ou limite |
|---|---|---|---|
| Divisão | Quantas colunas e qual a largura de cada uma. | 2 colunas iguais | 1 coluna; 2 colunas iguais; 2 colunas: estreita + larga; 2 colunas: larga + estreita; 3 colunas iguais; 3 colunas: larga no meio; 4 colunas iguais; 5 colunas iguais; 6 colunas iguais |
| Espaço entre as colunas | Distância entre uma coluna e outra. | Médio | Nenhum (0 px); Pequeno (14 px); Médio (28 px); Grande (48 px) |
| Altura das colunas | Como o conteúdo se posiciona quando uma coluna é mais alta que a outra. | Conteúdo no alto | Conteúdo no alto; Conteúdo no meio; Conteúdo embaixo; Todas da mesma altura |
| Fundo de cada coluna | Pinta cada coluna com uma cor, como um cartão de cantos arredondados e com espaço interno. | Sem cor | Qualquer cor (seletor, #4a5a3a ou 4a5a3a). O × volta ao automático. |
| No celular | O que acontece em telas pequenas. | Uma coluna embaixo da outra | Uma coluna embaixo da outra; Lado a lado |
Como cada opção muda o resultado
- Divisão: "2 colunas: estreita + larga" cria 1/3 + 2/3 da largura; "3 colunas: larga no meio" cria 25% + 50% + 25%. Se você reduzir o número de colunas, os blocos das colunas que sumiram vão para a última coluna que ficou — nada é perdido.
- Altura das colunas: use "Conteúdo no meio" para alinhar uma foto com um texto mais alto; use "Todas da mesma altura" quando cada coluna tiver fundo e você quiser cartões iguais.
- Fundo de cada coluna: a mesma cor vale para todas as colunas. Para fundo da seção inteira, use a aba Estilo.
- No celular: "Lado a lado" mantém as colunas na mesma linha, com espaço pequeno. Só vale para conteúdo curto, como 2 ou 3 números.
- Dentro das colunas, as listas de imóveis, diferenciais e tipos passam a usar cartões de no mínimo 220 px, e "Imagem e texto" e "Quem somos" empilham foto e texto.
Como pôr blocos dentro das colunas
- Adicione a seção. Ela aparece com as colunas vazias e um botão + Adicionar bloco em cada uma.
- Clique no "+" da coluna. Escolha o bloco na lista; ele entra naquela coluna.
- Arraste para reorganizar. Dá para mover blocos entre colunas pela prévia ou pela aba Blocos.
Veja o passo a passo completo em Seção com colunas.
Aba Estilo (vale para este bloco)
Ao lado de Conteúdo existe a aba Estilo, igual em todos os blocos livres: fundo (pronto ou outra cor), cor do texto, alinhamento do texto, espaço em cima e embaixo, largura, onde mostrar (computador, celular ou os dois), espaçamentos em pixels, ajustes só do celular, animação ao aparecer e CSS próprio. Veja Fundo e cor, Alinhamento e largura, Espaços e margens, Onde mostrar e Animação.
1234- 1A aba Estilo é igual em todos os blocos livres.
- 2Fundo: sem fundo, cinza claro, cor principal ou cor de destaque.
- 3Espaço em cima e embaixo do bloco.
- 4Alinhada ao conteúdo ou tela inteira.
Exemplos de uso
- Foto e texto: divisão "2 colunas iguais"; na esquerda um bloco Imagem, na direita Título e texto + Botão; altura "Conteúdo no meio".
- Três números: divisão "3 colunas iguais" com um bloco Título e texto em cada uma (número grande no título) e fundo de coluna cinza claro.
- Lateral estreita: divisão "2 colunas: estreita + larga" com uma chamada para contato ao lado de um texto longo.
Perguntas frequentes
Posso colocar uma seção com colunas dentro de outra?
Não. Dentro de uma coluna vão blocos comuns, sem outra seção com colunas.
O bloco não aparece no site.
Uma seção sem nenhum bloco dentro não tem o que mostrar para o visitante. Ponha ao menos um bloco numa coluna.