Adicionar uma fila.
Uma fila divide uma secção em colunas, para pôr conteúdos lado a lado: três serviços, uma foto junto ao seu texto, uma barra lateral ao lado de um artigo. Escolhe-se a divisão de doze predefinições e pode dar-se aos telemóveis um esquema próprio. Leia esta página para adicionar uma fila; para uma fila dentro de uma coluna, veja Adicionar um esquema aninhado.
Adicionar uma fila
O exemplo adiciona uma fila de três colunas a uma secção, uma para cada serviço que uma equipa oferece.
- Clique em + numa secção para abrir o seletor de elementos.
- Escolha Row no separador Layout. Vem com duas colunas iguais.
- Clique no ícone de grelha (Column layout) na barra de controlos da fila, escolha uma predefinição de colunas como três colunas iguais e clique em Save.
- Clique em + numa coluna para lhe adicionar conteúdo.
- Clique em Save na barra de ferramentas para guardar a página.
O ícone de grelha fica logo a seguir à pega de arrasto da fila. Uma predefinição muda as colunas assim que se clica nela; Cancel repõe o esquema antigo.
O que vê
Os três serviços ficam lado a lado, cada coluna com um terço da largura da secção. Em ecrãs com menos de 768 píxeis, as colunas empilham-se: cada uma ocupa a largura total, pela ordem que têm na página.
As colunas só têm a altura do seu conteúdo, por isso uma coluna curta acaba antes das vizinhas. Nota-se quando as colunas têm cor de fundo; Equal-height columns iguala-as.
Configure a sua fila
Esquemas de colunas
O ícone de grelha abre um painel por cada tamanho de ecrã com esquema próprio. Cada painel mostra estas doze predefinições em mosaicos:
| Predefinição | Esquema |
|---|---|
| 1/1 | Uma coluna de largura total |
| 1/2 + 1/2 | Duas colunas iguais |
| 1/3 + 1/3 + 1/3 | Três colunas iguais |
| 1/4 + 1/4 + 1/4 + 1/4 | Quatro colunas iguais |
| 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 | Seis colunas iguais |
| 1/4 + 1/2 + 1/4 | Estreita, larga, estreita |
| 1/6 + 4/6 + 1/6 | Estreita, muito larga, estreita |
| 1/4 + 3/4 | Um quarto à esquerda, três quartos à direita |
| 3/4 + 1/4 | Três quartos à esquerda, um quarto à direita |
| 2/3 + 1/3 | Larga à esquerda, estreita à direita |
| 1/3 + 2/3 | Estreita à esquerda, larga à direita |
| 5/12 + 7/12 | Ligeiramente estreita à esquerda, ligeiramente larga à direita |
Para qualquer outra divisão, clique em Custom Layout e escreva as larguras como
frações, como 1/6 + 5/6. Larguras que somem mais de 1 passam para
uma linha nova. Quando voltar a abrir a caixa de diálogo, Custom Layout está marcado e
mostra o esquema, como Custom Layout (1/6 + 5/6).
Um esquema por tamanho de ecrã
O primeiro painel, Medium devices (≥ 768px), define o esquema desde os tablets para cima. Para mudar também os telemóveis, clique em Add screen size no topo da caixa de diálogo. Abre-se um painel para Extra small (< 576px); escolha outro tamanho da sua lista se precisar, depois uma predefinição. Remove screen size apaga novamente um painel.
Definições de filas e colunas
Abra More > Settings na barra de controlos da fila, ou na barra da coluna para a definição de coluna.
| Definição | Elemento | O que faz | Predefinição |
|---|---|---|---|
| Equal-height columns | Fila | Estica todas as colunas até à altura da mais alta | Off |
| Mirror row | Fila | Mostra as colunas por ordem inversa a partir de 768 píxeis; as colunas empilhadas mantêm a ordem da página | Off |
| Vertical centering | Coluna | Centra o conteúdo numa coluna mais alta do que ele | Off |
Mirror row serve para uma página de filas alternadas: foto à esquerda, depois foto à direita, enquanto os telemóveis mostram sempre a foto primeiro.
Mover e remover colunas
Arraste uma coluna pela sua pega ou use More > Move Left ou Move Right na sua barra. As colunas não têm Delete: escolha antes uma predefinição com menos colunas. O conteúdo nunca se perde assim; passa para a última coluna restante.
Se não a vir
- Vertical centering numa coluna não muda nada. A coluna só tem a altura do seu conteúdo, por isso não há espaço para centrar. Ligue Equal-height columns nas definições da fila.
- As colunas empilham-se no telemóvel. Abaixo de 768 píxeis é a predefinição. Clique no ícone de grelha, depois em Add screen size, e escolha uma predefinição para Extra small (< 576px).
- O texto saltou para outra coluna. Escolheu uma predefinição com menos colunas e o conteúdo das colunas removidas passou para a última. Prima Ctrl+Z (Cmd+Z num Mac) para anular a mudança.
- Uma coluna não tem Delete no seu menu More. As colunas removem-se através do esquema. Clique no ícone de grelha da fila e escolha uma predefinição com menos colunas.
E a seguir?
- Adicionar um esquema aninhado: ponha uma fila dentro de uma coluna para uma grelha mais fina.
- Secções: dê à faixa à volta das suas colunas o seu próprio fundo.
- Design responsivo: como o seu esquema se adapta a cada tamanho de ecrã.