Criar o design das colunas

É possível usar colunas para organizar conteúdo em layouts estruturados, o que torna seu site visualmente interessante e fácil de navegar. Neste guia, você aprenderá a personalizar aspectos de design das colunas, como cores, alinhamento e aparência em dispositivos móveis.

Para adicionar ou alterar a cor de fundo das colunas, siga estas etapas:

1. Selecione Visualização em lista na parte superior esquerda do editor. É o ícone que são três linhas horizontais, uma sobre a outra.
2. Localize o bloco de colunas e clique nele:

3. Nas configurações do bloco de colunas, à direita da tela, clique na guia Estilos (o ícone é um círculo preto e branco):

4. Nas configurações de cor, clique em Plano de fundo e selecione uma cor.
5. Clique no botão Salvar para salvar suas alterações.

Se você quiser definir cores diferentes para cada coluna, siga as mesmas etapas, mas selecione um único bloco de colunas na visualização em lista, em vez do bloco de colunas geral.

Quando você adiciona conteúdo a uma nova coluna, ele é alinhado à parte superior dela por padrão. Para alterar o alinhamento do conteúdo dentro das colunas, siga estas etapas:

1. Selecione Visualização em lista na parte superior esquerda do editor. É o ícone que são três linhas horizontais, uma sobre a outra.
2. Localize o bloco de colunas e clique nele:

3. Na barra de ferramentas que aparece acima ou abaixo das colunas selecionadas, clique na opção de alinhamento vertical:

4. Escolha entre Alinhar ao topo, Alinhar no meio ou Alinhar à base para colocar todo o conteúdo na parte superior, no meio ou na parte inferior das colunas.

Se você quiser definir alinhamentos diferentes para cada coluna, siga as mesmas etapas, mas selecione uma única coluna na visualização em lista, em vez das colunas gerais. Assim, é possível criar um layout misto como este:

Ao usar um layout de colunas, é importante considerar como elas aparecerão para os visitantes do seu site que usam dispositivos móveis. Como os celulares têm telas menores, nem todas as colunas cabem em uma única linha sem afetar a legibilidade do conteúdo.

É possível “empilhar” as colunas nos dispositivos móveis para que elas apareçam uma sobre a outra, e não em uma única linha:

1. Selecione o bloco de colunas usando a visualização em lista ou a barra de ferramentas do bloco.
2. Nas configurações do bloco de colunas, à direita da tela, ative a opção Empilhar nos dispositivos móveis:

Essa opção determina se as colunas são exibidas na horizontal ou se são empilhadas na vertical quando a página ou post é mostrado em dispositivos móveis. Veja a seguir um exemplo de colunas empilhadas, que compara a visualização em computadores/laptops e em dispositivos móveis: