---
url: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/multi-column-content'
title: 'Crie conteúdo de várias colunas | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T09:06:46+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  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.
tags:
  - 'Volg een tutorial'
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: 'Crie conteúdo de várias colunas'
      description: |-
        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.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T09:06:46+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/tutorials/multi-column-content'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/tutorials/multi-column-content'
      description: |-
        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.
      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) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Crie conteúdo de várias colunas.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Adicionar uma fila](/pt-pt/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)
- [Secções](/pt-pt/hc/documentation/learn-dxpr-builder/layout/sections)

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

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

| Esquema | Ideal para | Predefinição |
|---|---|---|
| Conteúdo com barra lateral | artigos com ligações relacionadas | **2/3 + 1/3** |
| Duas metades iguais | comparações, antes e depois | a predefinição da fila |
| Três terços iguais | destaques de funcionalidades, serviços | **1/3 + 1/3 + 1/3** |
| Quatro quartos iguais | estatísticas, cartões pequenos | **1/4 + 1/4 + 1/4 + 1/4** |

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](/pt-pt/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails).

## E a seguir?

- [Adicionar uma fila](/pt-pt/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) para todas as definições de fila
- [Secções](/pt-pt/hc/documentation/learn-dxpr-builder/layout/sections) para fundos e larguras de secção