Crie conteúdo de várias colunas.

Aqui constrói-se uma página com os quatro esquemas de colunas que mais vai usar: conteúdo com barra lateral, duas metades iguais, três terços e quatro quartos. Cada um tem um cabeçalho por cima. Use-a para aprender que predefinição serve a que conteúdo. Para todas as definições de fila, veja Adicionar uma fila.

O vídeo constrói a página de recolha de resíduos de um município.

Antes de começar

• A sua função tem a permissão Edit with DXPR Builder.
• A página está aberta no construtor. Para uma nova, vá a Content > Add content > Landing Page (/node/add/landing_page) e clique em Save.
• Os elementos novos ficam no topo da sua secção. É por isso que cada cabeçalho entra depois da sua fila: fica por cima dela.

Escolha um esquema

Uma Row nova vem com duas colunas iguais. Qualquer outro esquema vem do ícone de grelha da fila (Column layout).

Passo 1: conteúdo com barra lateral

1. Clique em Add Elements na página vazia e escolha Section no separador Layout.
2. Clique em + na secção e escolha Row. Clique no seu ícone de grelha (Column layout), escolha a predefinição 2/3 + 1/3 e clique em Save.
3. Clique em + na coluna larga e escolha Text no separador Content. Escreva o artigo, defina a primeira linha como Heading 3 e clique em Save.
4. Clique em + na coluna estreita e escolha Text. Escreva "Related" como Heading 4, adicione uma linha por página relacionada e clique em Save.
5. Clique em + na secção e escolha Text; fica por cima da fila. Escreva "Content with a sidebar" como Heading 2 e clique em Save.

Passo 2: duas metades iguais

1. Paire o cursor sobre a secção e clique em Add Section Below. Abra o More > Settings da secção nova, escolha um Background cinzento claro no painel Style e clique em Save.
2. Clique em + na secção e escolha Row. Duas colunas iguais é a predefinição, por isso não há nada a mudar.
3. Adicione um elemento Text em cada coluna: "Before" e "After" como Heading 4 com uma linha cada.
4. Adicione o cabeçalho "Two equal halves" da mesma forma que no Passo 1.

Passo 3: três terços iguais

1. Adicione uma terceira secção com Add Section Below e dê-lhe a classe Align text center.
2. Adicione um Row, clique no seu ícone de grelha (Column layout), escolha a predefinição 1/3 + 1/3 + 1/3 e clique em Save.
3. Adicione um elemento Text em cada coluna: "Paper", "Glass" e "Organic" como Heading 4 com uma linha cada.
4. Adicione o cabeçalho "Three equal thirds".

Passo 4: quatro quartos iguais

1. Adicione uma quarta secção com um Background cinzento claro e a classe Align text center.
2. Adicione um Row, clique no seu ícone de grelha (Column layout), escolha a predefinição 1/4 + 1/4 + 1/4 + 1/4 e clique em Save.
3. Adicione um elemento Text em cada coluna: o dia como Heading 4 e o que se recolhe.
4. Adicione o cabeçalho "Four equal quarters".

Passo 5: guarde e pré-visualize

1. Clique em Save na barra de ferramentas do construtor.
2. Abra o menu de vista (o ícone de olho) e escolha Preview.

Em ecrãs mais pequenos

As colunas ficam lado a lado a partir de 768 píxeis de largura, por isso os tablets mostram o mesmo esquema que os computadores. Nos telemóveis, cada coluna ocupa a largura total e as colunas empilham-se pela sua ordem. Para outro esquema em tablets, clique no ícone de grelha da fila (Column layout) e escolha Add screen size.

Para ir mais longe

Não mostrado no vídeo:

• Estreito, largo, estreito: a predefinição 1/4 + 1/2 + 1/4 mantém o texto longo legível com margens vazias.
• Mirror row: ligue-o nas definições da fila para trocar as colunas em tablets e computadores. Os telemóveis mantêm a ordem original, por isso a primeira coluna continua a vir primeiro.

O que vê

Quatro faixas seguem-se, cada uma com o seu cabeçalho no topo. O artigo e as suas ligações relacionadas partilham a primeira, duas metades ficam sobre cinzento e três terços centrados vêm a seguir. Quatro quartos centrados sobre cinzento fecham a página.

Se não vir as colunas como mostradas

• A fila tem o número errado de colunas. A predefinição só se aplica quando clica em Save no diálogo de esquema. Clique novamente no ícone de grelha da fila (Column layout), escolha a predefinição e clique em Save.
• Um cabeçalho fica por baixo da sua fila. O cabeçalho entrou antes da fila e os elementos novos ficam no topo da sua secção. Arraste o cabeçalho para cima da fila pela pega de arrasto na sua barra de controlos.
• As colunas empilham-se num tablet. O tablet tem menos de 768 píxeis de largura, como um tablet pequeno ao alto. Adicione um esquema para essa largura com Add screen size no diálogo de esquema da fila.
• As suas mudanças desapareceram depois de recarregar. Saiu da página antes de clicar em Save na barra de ferramentas do construtor. Se Save mostra um erro, veja As mudanças não guardam.

E a seguir?

• Adicionar uma fila para todas as definições de fila
• Secções para fundos e larguras de secção