---
url: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/layout/rows-and-columns'
title: 'Adicionar uma fila | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T09:01:38+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  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.
tags:
  - Lay-out
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Adicionar uma fila'
      description: |-
        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.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T09:01:38+0000'
      dateModified: '2026-10-24T09:09:48+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/layout/rows-and-columns'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/layout/rows-and-columns'
      description: |-
        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.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Início
            item: 'https://dxpr.com/pt-pt'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: pt-pt
---
[Help Center](/pt-pt/node/75)/[Documentation](/pt-pt/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # Adicionar uma fila.

 Learn DXPR BuilderBuild pagesAdd contentLay-out

   ## In this guide

 Related guides

- [Adicionar um esquema aninhado](/pt-pt/hc/documentation/learn-dxpr-builder/layout/nesting)
- [Secções](/pt-pt/hc/documentation/learn-dxpr-builder/layout/sections)
- [Adaptar o esquema aos telemóveis](/pt-pt/hc/documentation/learn-dxpr-builder/design/responsive-design)

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](/pt-pt/hc/documentation/learn-dxpr-builder/layout/nesting).

## 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.

1. Clique em **+** numa secção para abrir o seletor de elementos.
2. Escolha **Row** no separador **Layout**. Vem com duas colunas iguais.
3. 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**.
4. Clique em **+** numa coluna para lhe adicionar conteúdo.
5. 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](/pt-pt/hc/documentation/learn-dxpr-builder/layout/nesting): ponha uma fila dentro de uma coluna para uma grelha mais fina.
- [Secções](/pt-pt/hc/documentation/learn-dxpr-builder/layout/sections): dê à faixa à volta das suas colunas o seu próprio fundo.
- [Design responsivo](/hc/documentation/learn-dxpr-builder/design/responsive-design): como o seu esquema se adapta a cada tamanho de ecrã.