---
url: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/design/full-width-layouts'
title: 'Estender uma secção de borda a borda | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T11:47:20+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  O conteúdo de uma secção pode correr de borda a borda, ou ficar encaixotado no centro enquanto o fundo enche a janela. Um interrutor na secção decide: Full width. O exemplo constrói uma secção cinzenta com três colunas e depois liga Full width para as colunas esticarem. Para preenchimentos de cor e foto, consulte Fundos.
  O vídeo constrói uma secção cinzenta com 3 colunas e depois deixa o conteúdo correr de borda a borda.
tags:
  - Ontwerpgidsen
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T11:47:20+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Estender uma secção de borda a borda'
      description: |-
        O conteúdo de uma secção pode correr de borda a borda, ou ficar encaixotado no centro enquanto o fundo enche a janela. Um interrutor na secção decide: Full width. O exemplo constrói uma secção cinzenta com três colunas e depois liga Full width para as colunas esticarem. Para preenchimentos de cor e foto, consulte Fundos.
        O vídeo constrói uma secção cinzenta com 3 colunas e depois deixa o conteúdo correr de borda a borda.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T11:47:20+0000'
      dateModified: '2026-10-24T11:47:20+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/design/full-width-layouts'
      articleSection: Ontwerpgidsen
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/design/full-width-layouts'
      description: |-
        O conteúdo de uma secção pode correr de borda a borda, ou ficar encaixotado no centro enquanto o fundo enche a janela. Um interrutor na secção decide: Full width. O exemplo constrói uma secção cinzenta com três colunas e depois liga Full width para as colunas esticarem. Para preenchimentos de cor e foto, consulte Fundos.
        O vídeo constrói uma secção cinzenta com 3 colunas e depois deixa o conteúdo correr de borda a borda.
      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) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # Estender uma secção de borda a borda.

 Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

   ## In this guide

 Related guides

- [Dar a uma secção uma cor, foto ou gradiente de fundo](/pt-pt/hc/documentation/learn-dxpr-builder/design/backgrounds)
- [Adaptar o esquema aos telemóveis](/pt-pt/hc/documentation/learn-dxpr-builder/design/responsive-design)

O conteúdo de uma secção pode correr de borda a borda, ou ficar encaixotado no centro enquanto o fundo enche a janela. Um interrutor na secção decide: **Full width**. O exemplo constrói uma secção cinzenta com três colunas e depois liga **Full width** para as colunas esticarem. Para preenchimentos de cor e foto, consulte [Fundos](/hc/documentation/learn-dxpr-builder/design/backgrounds).

O vídeo constrói uma secção cinzenta com 3 colunas e depois deixa o conteúdo correr de borda a borda.

  ## Construir uma secção encaixotada

1. Clique em **Add Elements** na área de conteúdo vazia e escolha **Section** no separador **Layout**.
2. Paire sobre a secção, abra **More** e escolha **Settings**.
3. Abra o painel **Style** e escolha um **Background** cinzento claro.
4. Clique em **Save**. O cinzento já abrange a janela.
5. Clique em **+** na secção e escolha **Row**.
6. Clique no ícone de grelha na linha, escolha o mosaico com três colunas iguais e clique em **Save**.
7. Em cada coluna, clique em **+**, escolha **Text** no separador **Content**, escreva um **Heading 4** e uma linha, e clique em **Save**.

As três colunas ficam numa caixa centrada sobre a faixa cinzenta.

## Ligar Full width

1. Abra **More** na secção e escolha **Settings**.
2. No painel **General**, ligue **Full width**.
3. Clique em **Save**.
4. Clique em **Save** na barra de ferramentas do DXPR Builder.
5. Abra o menu de vista, o ícone de olho na barra de ferramentas, e escolha **Preview**.

## O que vê

A faixa cinzenta parece igual a antes. Só a caixa de conteúdo mudou: a primeira coluna começa agora na borda esquerda da secção e a última termina na borda direita.

Cada secção tem duas partes: um elemento exterior com o fundo, e uma caixa interior com as linhas. **Full width** só muda a caixa interior. Desligado, fica centrado com largura máxima; ligado, estica-se até às bordas da secção.

## Definições

O painel **General** da secção tem três interrutores de esquema, todos desligados por predefinição:

| Setting | What it does |
|---|---|
| **Full width** | As linhas enchem a secção de borda a borda em vez de uma caixa centrada |
| **100% height** | A secção tem pelo menos a altura da janela do navegador |
| **Vertical centering** | As linhas ficam no meio vertical da secção |

As linhas não têm definição própria de largura; a secção decide.

## Dois padrões

- **Edge-to-edge background, boxed text**: o principal comum. Deixe **Full width** desligado e defina o fundo no painel **Style** ou **Background effects**.
- **Edge-to-edge content**: uma faixa de cartões ou imagens. Ligue **Full width** e dê algum **Padding** às colunas se o texto ficar demasiado perto da borda da janela.

## Se a alteração não aparece

- **Nothing changes when you switch on Full width.** Num ecrã estreito, como um telemóvel, a versão encaixotada já enche a largura. Alargue a janela do navegador e veja outra vez.
- **The background stops short of the window edges.** O tema coloca o conteúdo da página numa região encaixotada, e a secção só pode encher essa região. Escolha um esquema de página ou região de largura total no tema.
- **Text touches the window edge.** É o que **Full width** faz. Adicione **Padding** no painel **Style** das colunas, ou deixe **Full width** desligado.

## O que se segue?

- [Encher uma secção com cor, foto ou gradiente](/hc/documentation/learn-dxpr-builder/design/backgrounds): estilize a faixa atrás do conteúdo.
- [Adaptar o esquema aos telemóveis](/hc/documentation/learn-dxpr-builder/design/responsive-design): controle como as colunas se comportam em ecrãs pequenos.