---
url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/design/design-responsivo'
title: 'Adaptar o esquema aos telemóveis | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T11:47:27+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  As páginas adaptam-se sozinhas a telemóveis e tablets: as colunas ficam lado a lado em ecrãs largos e empilham em ecrãs pequenos. Esta página mostra como assumir o controlo. Define um esquema de colunas por tamanho de ecrã, espelha a ordem em ecrãs largos e mostra elementos apenas em alguns dispositivos. O exemplo transforma uma linha de quatro colunas em duas por duas em tablets.
  O vídeo esconde uma foto em telemóveis e depois estreita a janela para a ver desaparecer.
tags:
  - 'Design guides'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Adaptar o esquema aos telemóveis'
      description: |-
        As páginas adaptam-se sozinhas a telemóveis e tablets: as colunas ficam lado a lado em ecrãs largos e empilham em ecrãs pequenos. Esta página mostra como assumir o controlo. Define um esquema de colunas por tamanho de ecrã, espelha a ordem em ecrãs largos e mostra elementos apenas em alguns dispositivos. O exemplo transforma uma linha de quatro colunas em duas por duas em tablets.
        O vídeo esconde uma foto em telemóveis e depois estreita a janela para a ver desaparecer.
      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:27+0000'
      dateModified: '2026-10-24T17:19:22+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/documentacao/aprender-dxpr-builder/design/design-responsivo'
      articleSection: 'Guias de design'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/design/design-responsivo'
      description: |-
        As páginas adaptam-se sozinhas a telemóveis e tablets: as colunas ficam lado a lado em ecrãs largos e empilham em ecrãs pequenos. Esta página mostra como assumir o controlo. Define um esquema de colunas por tamanho de ecrã, espelha a ordem em ecrãs largos e mostra elementos apenas em alguns dispositivos. O exemplo transforma uma linha de quatro colunas em duas por duas em tablets.
        O vídeo esconde uma foto em telemóveis e depois estreita a janela para a ver desaparecer.
      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
---
[Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Criar páginas](/pt-pt/hc/documentation/learn-dxpr-builder/build) /[Estilizar os elementos](/pt-pt/hc/documentation/learn-dxpr-builder/element-settings) /[Guias de design](/pt-pt/hc/documentation/learn-dxpr-builder/design/overview) # Adaptar o esquema aos telemóveis.

 Aprender DXPR BuilderCriar páginasEstilizar os elementosGuias de design

   ## Neste guia

 Guias relacionados

- [Adicionar uma fila](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/filas-e-colunas)
- [Edite uma página no telemóvel ou tablet](/pt-pt/hc/documentacao/aprender-dxpr-builder/edicao/edicao-em-telemovel)
- [Estender uma secção de borda a borda](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/esquemas-de-largura-total)

As páginas adaptam-se sozinhas a telemóveis e tablets: as colunas ficam lado a lado em ecrãs largos e empilham em ecrãs pequenos. Esta página mostra como assumir o controlo. Define um esquema de colunas por tamanho de ecrã, espelha a ordem em ecrãs largos e mostra elementos apenas em alguns dispositivos. O exemplo transforma uma linha de quatro colunas em duas por duas em tablets.

O vídeo esconde uma foto em telemóveis e depois estreita a janela para a ver desaparecer.

  ## Antes de começar

- Uma linha com quatro colunas iguais na página; consulte [Linhas e colunas](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/filas-e-colunas).

## Escolher um esquema por tamanho de ecrã

1. Paire sobre a linha e clique no ícone de grelha na barra de controlos. O diálogo de esquema abre com um painel **Medium devices (≥ 768px)**.
2. Clique em **Add screen size**. Um segundo painel abre, definido como **Extra small (< 576px)**.
3. Na lista desse painel, escolha **Small devices (≥ 576px)**.
4. Clique em **Custom Layout**, escreva `1/2 + 1/2 + 1/2 + 1/2` e clique em **Save**.
5. Clique em **Save** na barra de ferramentas.

Quatro metades mantêm as quatro colunas e põem duas em cada linha. O mosaico com duas colunas iguais cortaria a linha para duas colunas em todos os tamanhos de ecrã.

## O que vê

No computador, as quatro colunas continuam numa linha. Estreite a janela do navegador abaixo de 768 píxeis e passam a duas por duas. Abaixo de 576 píxeis empilham, uma por linha, na ordem vista no editor.

Um esquema aplica-se do tamanho de ecrã para cima, até um tamanho maior ter esquema próprio. Cada linha nova começa com um esquema para **Medium devices (≥ 768px)**, por isso as colunas empilham em telemóveis e tablets pequenos. **Remove screen size** num painel elimina outra vez esse esquema.

## Espelhar a ordem em ecrãs largos

Abra o menu **More** da linha, escolha **Settings** e ligue **Mirror row**. A partir de 768 píxeis, as colunas aparecem por ordem inversa; em ecrãs mais pequenos empilham na ordem do editor.

Use para linhas alternadas de imagem e texto. Ponha a imagem primeiro no editor, para os telemóveis a mostrarem acima do texto, e espelhe cada segunda linha para os computadores mostrarem a imagem à direita.

## Mostrar ou esconder um elemento por tamanho de ecrã

1. Abra o menu **More** do elemento e escolha **Settings**.
2. Em **HTML classes**, escolha um chip do grupo **Responsive Visibility**, por exemplo **Hidden on extra small devices, phones (<576px)**.
3. Clique em **Save**.

Cada chip **Hidden on** esconde o elemento num só tamanho de ecrã. Cada chip **Visible on** mostra-o nesse tamanho e esconde-o nos restantes.

## Tamanhos de ecrã

| Label in the layout dialog | Screen width |
|---|---|
| **Extra small (< 576px)** | Telemóveis ao alto |
| **Small devices (≥ 576px)** | Telemóveis grandes, tablets pequenos |
| **Medium devices (≥ 768px)** | Tablets |
| **Large devices (≥ 992px)** | Portáteis |
| **Extra large (≥ 1200px)** | Computadores |
| **Extra extra large (≥ 1400px)** | Computadores grandes |

Um elemento **Positioned layers** tem o próprio interrutor **Responsive**, desligado por predefinição. Ligue-o para dimensionar a altura da área e o texto com a largura da janela, para a composição manter as proporções.

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

- **Columns still stack on a tablet.** A linha não tem esquema para esse tamanho de ecrã, por isso as colunas empilham abaixo de 768 píxeis. Abra o ícone de grelha da linha, clique em **Add screen size** e escolha **Small devices (≥ 576px)**.
- **An element disappeared on every screen size.** Tem dois chips **Visible on**, e cada um esconde-o onde o outro o mostra. Mantenha um, ou use chips **Hidden on**, um por tamanho a esconder.
- **Mirror row does nothing on a phone.** **Mirror row** funciona a partir de 768 píxeis. Para mudar a ordem em telemóveis, mova antes as colunas no editor.

## O que se segue?

- [Linhas e colunas](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/filas-e-colunas): construa as linhas que aqui torna responsivas.
- [Editar uma página no telemóvel ou tablet](/pt-pt/hc/documentacao/aprender-dxpr-builder/edicao/edicao-em-telemovel): verifique e corrija páginas num ecrã pequeno.
- [Estender uma secção de borda a borda](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/esquemas-de-largura-total): decida a largura do conteúdo.