--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/aninhamento' title: 'Adicionar um esquema aninhado | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T09:01:23+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Pode pôr uma fila dentro de uma coluna para subdividir essa coluna, como dois ícones lado a lado por cima de um cabeçalho. Use-a quando uma coluna precisar de uma grelha mais fina do que a fila à volta. O exemplo adiciona uma fila de dois ícones à coluna do meio de uma fila de três colunas. Para a sua primeira fila, comece por Adicionar uma fila. 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 esquema aninhado' description: |- Pode pôr uma fila dentro de uma coluna para subdividir essa coluna, como dois ícones lado a lado por cima de um cabeçalho. Use-a quando uma coluna precisar de uma grelha mais fina do que a fila à volta. O exemplo adiciona uma fila de dois ícones à coluna do meio de uma fila de três colunas. Para a sua primeira fila, comece por Adicionar uma fila. 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:23+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/aninhamento' articleSection: Disposição - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/aninhamento' description: |- Pode pôr uma fila dentro de uma coluna para subdividir essa coluna, como dois ícones lado a lado por cima de um cabeçalho. Use-a quando uma coluna precisar de uma grelha mais fina do que a fila à volta. O exemplo adiciona uma fila de dois ícones à coluna do meio de uma fila de três colunas. Para a sua primeira fila, comece por Adicionar uma fila. 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 esquema aninhado. Aprender DXPR BuilderCriar páginasAdicionar conteúdosDisposição ## Neste guia Guias relacionados - [Adicionar um contentor de camadas posicionadas](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/camadas-posicionadas) - [Adicionar uma fila](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/filas-e-colunas) - [Adicionar um painel de separadores](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/painel-de-separadores) Pode pôr uma fila dentro de uma coluna para subdividir essa coluna, como dois ícones lado a lado por cima de um cabeçalho. Use-a quando uma coluna precisar de uma grelha mais fina do que a fila à volta. O exemplo adiciona uma fila de dois ícones à coluna do meio de uma fila de três colunas. Para a sua primeira fila, comece por [Adicionar uma fila](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/filas-e-colunas). ## Adicionar um esquema aninhado 1. Adicione uma secção com uma fila e colunas. 2. Paire o cursor sobre uma coluna e clique em **+** na sua barra Column. 3. No seletor de elementos, selecione **Row** no separador **Layout**. 4. A fila aninhada aparece dentro da coluna com colunas próprias. 5. Adicione elementos às colunas aninhadas como habitualmente, por exemplo um **Icon** em cada. 6. Clique em **Save** na barra de ferramentas para guardar a página. Os elementos novos ficam no topo da sua coluna, por isso a fila aninhada fica por cima do texto da coluna. ## O que vê O lápis e a estrela ficam lado a lado no topo da coluna do meio, por cima do cabeçalho Design. As colunas exteriores não mudam. No editor, a fila aninhada tem as suas próprias barras Row e Column, dentro das da fila exterior. ```text Section Row (1/3 + 1/3 + 1/3) Column Text: Discovery Column Row (nested, 1/2 + 1/2) Column Icon: pencil Column Icon: star Text: Design Column Text: Delivery ``` ## Configure o seu esquema aninhado Uma fila aninhada tem o mesmo ícone de grelha e as mesmas definições que qualquer fila; veja [Adicionar uma fila](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/filas-e-colunas). As suas larguras são frações da coluna-mãe, não da página. Uma coluna de meia largura com uma fila aninhada de duas metades dá duas áreas de um quarto. Em ecrãs com menos de 768 píxeis, as colunas aninhadas empilham-se como as exteriores. Dê à fila aninhada um esquema de telemóvel com **Add screen size** se os ícones deverem ficar lado a lado. ### Profundidade máxima de aninhamento As filas aninham-se três níveis: uma fila, uma fila numa das suas colunas e mais uma fila dentro dessa. Um quarto nível é recusado. O mesmo limite aplica-se a cada tipo de contentor por si, como Tabs dentro de Tabs. Um tipo nunca conta para o limite de outro tipo. Dois níveis chegam para a maioria dos esquemas. Cada nível extra acrescenta barras de controlos por onde apontar e estreita o espaço para o conteúdo. ### Padrões comuns de aninhamento | Padrão | Como se constrói | |---|---| | Grelha de funcionalidades | Uma fila de três colunas, cada uma com uma fila aninhada: um ícone ao lado do seu texto | | Blocos de barra lateral | Uma fila 2/3 + 1/3 cuja coluna estreita tem filas aninhadas, uma por bloco | | Membros da equipa | Uma fila de duas colunas, cada uma com uma fila aninhada 1/3 + 2/3: um retrato ao lado da biografia | ## Se não a vir - **Um aviso diz que só pode aninhar filas 3 níveis.** A coluna já está dentro de duas filas aninhadas, por isso "Element cannot be added". Adicione a fila a uma coluna um nível acima ou use uma predefinição com mais colunas na fila exterior. - **A fila aninhada fica por cima do texto em vez de por baixo.** Os elementos novos ficam no topo da sua coluna. Abra **More** na barra da fila aninhada e escolha **Move Down**. - **Os ícones empilham-se no telemóvel.** As colunas aninhadas empilham-se abaixo de 768 píxeis, como todas as colunas. Clique no ícone de grelha da fila aninhada, depois em **Add screen size**, e escolha **1/2 + 1/2** para **Extra small (< 576px)**. ## E a seguir? - [Adicionar um contentor de camadas posicionadas](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/camadas-posicionadas): sobreponha elementos de formas que a grelha não consegue. - [Adicionar uma fila](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/filas-e-colunas): predefinições de colunas e um esquema por tamanho de ecrã. - [Adicionar um painel de separadores](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/painel-de-separadores): empilhe painéis de conteúdo num lugar em vez de lado a lado.