Seção com colunas: montar blocos lado a lado
Divida uma faixa da página em 1 a 6 colunas e coloque blocos dentro de cada uma: divisão, espaço, altura, fundo e comportamento no celular.
Neste artigo
Antes de começar
- Só o administrador do site abre o Editor visual (menu ).
- Tudo que você faz vira rascunho: nada aparece para os visitantes até clicar em Publicar.
A Seção com colunas (grupo Estrutura da biblioteca) é um bloco que serve de “prateleira”: ele divide uma faixa da página em colunas e cada coluna recebe outros blocos. Serve para texto ao lado de imagem, três diferenciais lado a lado etc.
1- 1Clique em Seção com colunas (grupo Estrutura).
Passo a passo
- Adicione a seção. Na aba Adicionar, grupo Estrutura, clique em Seção com colunas ou arraste. Começa com duas colunas iguais.
- Escolha a divisão no campo Divisão.
- Coloque blocos dentro. Em cada coluna há um botão + Adicionar bloco. Clique nele: aparece “Escolha o bloco para pôr na coluna N” e a biblioteca abre. Clique no bloco desejado.
- Ou arraste blocos da biblioteca para dentro da coluna (a linha diz “Soltar na coluna N”).
12- 1Adicionar bloco nesta coluna.
- 2Cada coluna recebe seus blocos.
Opções da seção
| Campo | Opções |
|---|---|
| Divisão | 1 coluna; 2 iguais; 2 com estreita + larga; 2 com larga + estreita; 3 iguais; 3 com larga no meio; 4 iguais; 5 iguais; 6 iguais. |
| Espaço entre as colunas | Nenhum, Pequeno, Médio, Grande. |
| Altura das colunas | Conteúdo no alto, no meio, embaixo, ou Todas da mesma altura. |
| Fundo de cada coluna | Uma cor aplicada em cada coluna (vazio = sem cor). |
| No celular | Uma coluna embaixo da outra (padrão) ou Lado a lado. |
A seção também tem a aba Estilo como qualquer bloco livre.
1234- 1Divisão: de 1 a 6 colunas.
- 2Espaço entre as colunas.
- 3Altura das colunas.
- 4Como ficam no celular.
Trabalhando com os blocos de dentro
- Na aba Blocos eles aparecem recuados, com um número que indica a coluna. Têm Duplicar e Excluir.
- Clique neles na prévia ou na lista para editar as opções; a lateral mostra “coluna 2 de Seção com colunas”.
- Para mover entre colunas arraste, ou use ↑ ↓ (dentro da mesma coluna).
- Se reduzir o número de colunas, o conteúdo das colunas que sobrarem passa para a última, sem se perder.
Não cabe dentro de colunas
Outra Seção com colunas e partes fixas. Ao tentar: “Este bloco não vai dentro de uma coluna.”.
Na biblioteca há uma seção pronta “Duas colunas: texto e imagem” com texto, botão e imagem já montados.
Perguntas frequentes
No celular as colunas ficaram empilhadas.
É o padrão para boa leitura. Para mantê-las lado a lado, escolha “No celular: Lado a lado”.
Uma coluna ficou menor que a outra.
Ajuste “Altura das colunas” para “Todas da mesma altura”.
Veja também
Este artigo ajudou?