--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/camadas-posicionadas' title: 'Adicionar um contentor de camadas posicionadas | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T09:01:30+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Use Positioned layers quando quiser sobrepor elementos ou colocá-los num ponto exato, o que as filas e colunas não conseguem. Obtém uma tela onde arrasta cada elemento para o lugar pretendido, como um cabeçalho sobre uma foto. O exemplo coloca um cabeçalho branco de dia aberto sobre uma imagem. Para conteúdos lado a lado comuns, as filas e colunas são mais fáceis de manter arrumadas nos telemóveis.' tags: - Layout 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: 'Adicionar um contentor de camadas posicionadas' description: 'Use Positioned layers quando quiser sobrepor elementos ou colocá-los num ponto exato, o que as filas e colunas não conseguem. Obtém uma tela onde arrasta cada elemento para o lugar pretendido, como um cabeçalho sobre uma foto. O exemplo coloca um cabeçalho branco de dia aberto sobre uma imagem. Para conteúdos lado a lado comuns, as filas e colunas são mais fáceis de manter arrumadas nos telemóveis.' 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:30+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/esquema/camadas-posicionadas' articleSection: Disposição - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/camadas-posicionadas' description: 'Use Positioned layers quando quiser sobrepor elementos ou colocá-los num ponto exato, o que as filas e colunas não conseguem. Obtém uma tela onde arrasta cada elemento para o lugar pretendido, como um cabeçalho sobre uma foto. O exemplo coloca um cabeçalho branco de dia aberto sobre uma imagem. Para conteúdos lado a lado comuns, as filas e colunas são mais fáceis de manter arrumadas nos telemóveis.' 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) /[Adicionar conteúdos](/pt-pt/hc/documentation/learn-dxpr-builder/elements) /[Disposição](/pt-pt/hc/documentation/learn-dxpr-builder/layout/overview) # Adicionar um contentor de camadas posicionadas. Aprender DXPR BuilderCriar páginasAdicionar conteúdosDisposição ## Neste guia Guias relacionados - [Secções](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/seccoes) - [Adicionar um esquema aninhado](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/aninhamento) - [Animar elementos ao deslocar, pairar ou clicar](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/separador-de-animacao) Use Positioned layers quando quiser sobrepor elementos ou colocá-los num ponto exato, o que as filas e colunas não conseguem. Obtém uma tela onde arrasta cada elemento para o lugar pretendido, como um cabeçalho sobre uma foto. O exemplo coloca um cabeçalho branco de dia aberto sobre uma imagem. Para conteúdos lado a lado comuns, [as filas e colunas](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/filas-e-colunas) são mais fáceis de manter arrumadas nos telemóveis. ## Adicionar um contentor de camadas posicionadas 1. Paire o cursor sobre a coluna e clique em **+** na sua barra de controlos, ou no **+** no meio de uma coluna vazia, para abrir o seletor de elementos. 2. No separador **Layout**, clique em **Positioned layers**. 3. As suas definições abrem-se primeiro. Defina **Height** para caber a camada mais alta e clique em **Save**. Aparece uma tela vazia. 4. Paire o cursor sobre a tela e clique em **+** na sua barra de controlos para adicionar um elemento, como **Text** ou um **Image**. Cada elemento adicionado torna-se uma camada que pode posicionar. ## O que vê A tela mantém a altura definida e cada camada fica onde a colocou, por cima ou por baixo das outras. Os visitantes veem a composição como aparece no editor. As posições guardam-se como fração da tela, por isso uma camada mantém o seu lugar quando a tela estreita. O texto mantém o tamanho, salvo se ligar **Responsive**. ## Configure as suas camadas posicionadas Abra as definições em **More** > **Settings** na barra de controlos de **Positioned layers**. | Definição | O que faz | Predefinição | |---|---|---| | **Width** | Largura da tela, como 100% ou 600px | 100% | | **Height** | Altura da tela em píxeis | 500 | | **Responsive** | Ajusta a altura da tela e o texto à largura da tela, para a composição manter as proporções em ecrãs pequenos | Off | ## Posicionar camadas - **Select**: clique numa camada. Aparecem pegas nos seus cantos e bordas. - **Move**: arraste a camada pelo seu nome na sua barra de controlos, como **Text** ou **Image**. As camadas ficam dentro da tela. - **Resize**: arraste uma pega da camada selecionada. - **Add at a spot**: faça duplo clique numa parte vazia da tela. O seletor de elementos abre-se e o elemento novo fica onde clicou. O menu **More** de cada camada tem quatro itens extra. **100% width** e **100% height** esticam a camada pela tela. **Bring forward** e **Send backward** movem-na para cima ou para baixo das outras camadas. ## Se não a vir - **Uma camada não se move quando a arrasta.** As camadas só se movem pela pega com o seu nome na barra de controlos. Paire o cursor sobre a camada e arraste essa pega. - **Uma camada esconde-se atrás de outra.** Está mais abaixo na pilha. Abra o menu **More** da camada e escolha **Bring forward**. - **As camadas sobrepõem-se ou transbordam nos telemóveis.** **Responsive** está desligado, por isso a altura da tela e o texto mantêm o tamanho. Ligue **Responsive** nas definições de **Positioned layers**. - **Falta Positioned layers no seletor dentro de uma tela.** Uma tela não pode conter outra tela. Adicione o novo elemento **Positioned layers** a uma coluna. - **Falta Positioned layers no seletor em todo o lado.** O seu perfil de utilizador do DXPR Builder exclui-o. Um administrador marca **Layers** em **Elements** no seu perfil em `/admin/dxpr_studio/dxpr_builder/profile`. ## E a seguir? - [Secções](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/seccoes): dê à área à volta da tela uma cor ou imagem de fundo. - [Adicionar um esquema aninhado](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/aninhamento): combine camadas com filas e colunas em esquemas mais complexos. - [Separador de animação](/pt-pt/hc/documentacao/aprender-dxpr-builder/design/separador-de-animacao): deixe cada camada aparecer com o seu próprio efeito de entrada.