--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/painel-de-separadores' title: 'Adicionar um painel de separadores | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T09:01:52+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Use Tabs quando quiser vários blocos de conteúdo relacionado num lugar, com apenas um visível de cada vez. Fica com uma fila de rótulos de separadores; os visitantes clicam num rótulo para ver o seu conteúdo. O exemplo constrói uma página de agência com um separador por serviço. Para perguntas e respostas, um painel dobrável costuma ler-se melhor.' 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 painel de separadores' description: 'Use Tabs quando quiser vários blocos de conteúdo relacionado num lugar, com apenas um visível de cada vez. Fica com uma fila de rótulos de separadores; os visitantes clicam num rótulo para ver o seu conteúdo. O exemplo constrói uma página de agência com um separador por serviço. Para perguntas e respostas, um painel dobrável costuma ler-se melhor.' 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:52+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/painel-de-separadores' articleSection: Disposição - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/painel-de-separadores' description: 'Use Tabs quando quiser vários blocos de conteúdo relacionado num lugar, com apenas um visível de cada vez. Fica com uma fila de rótulos de separadores; os visitantes clicam num rótulo para ver o seu conteúdo. O exemplo constrói uma página de agência com um separador por serviço. Para perguntas e respostas, um painel dobrável costuma ler-se melhor.' 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 painel de separadores. Aprender DXPR BuilderCriar páginasAdicionar conteúdosDisposição ## Neste guia Guias relacionados - [Adicionar um painel dobrável](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/painel-dobravel) - [Adicionar um esquema de carrossel](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/esquema-de-carrossel) - [Adicionar um esquema aninhado](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/aninhamento) Use Tabs quando quiser vários blocos de conteúdo relacionado num lugar, com apenas um visível de cada vez. Fica com uma fila de rótulos de separadores; os visitantes clicam num rótulo para ver o seu conteúdo. O exemplo constrói uma página de agência com um separador por serviço. Para perguntas e respostas, [um painel dobrável](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/painel-dobravel) costuma ler-se melhor. ## Adicionar um painel de separadores 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 **Tabs**. O elemento aparece com um separador, com o rótulo **Title**. 3. Paire o cursor sobre o painel do separador e abra **More > Settings**. Escreva um nome em **Tab title** e clique em **Save**. 4. Clique em **+** dentro do painel para adicionar conteúdo, como um elemento **Text**. 5. Para adicionar um separador, paire o cursor sobre os rótulos e clique em **Add tab** na barra de controlos de **Tabs**. O separador novo fica primeiro, à frente dos outros. Dê-lhe nome e preencha-o da mesma forma. ## O que vê Uma fila de rótulos fica por cima do conteúdo do separador aberto. Em Preview e na página publicada, um clique num rótulo mostra o conteúdo desse separador e esconde o resto. Cada separador tem os seus próprios elementos, por isso um separador pode ter texto e outro um conjunto de cartões. Em ecrãs com menos de 768 píxeis, os separadores tornam-se cabeçalhos empilhados que abrem como um painel dobrável. ## Configure os seus separadores O elemento **Tabs** tem três definições. Abra-as em **More > Settings** na barra de controlos de **Tabs**, que aparece quando paira o cursor sobre os rótulos. | Definição | O que faz | Predefinição | |---|---|---| | **Tab direction** | Onde ficam os rótulos: **Default** (por cima do conteúdo), **Left** ou **Right** | Default | | **Style** | O aspeto dos rótulos: **Default** (uma linha por baixo dos rótulos), **Modern** (cartões arredondados) ou **Accordion** (cabeçalhos com linhas de separação) | Default | | **Mobile friendly** | Mostra os separadores como cabeçalhos dobráveis em ecrãs com menos de 768 píxeis | On | Cada separador tem as suas próprias definições em **More > Settings** no seu painel. **Tab title** é o texto do rótulo. **Tab description** é uma linha curta opcional por baixo do rótulo do separador aberto. ## Gerir separadores - **Reorder**: arraste um rótulo para um lugar novo entre os rótulos. O seu conteúdo vai com ele. - **Rename**: paire o cursor sobre o painel do separador, abra **More > Settings**, mude o **Tab title** e clique em **Save**. - **Remove**: paire o cursor sobre o painel do separador, abra **More** e escolha **Delete**. Tudo o que está dentro do separador é removido com ele. Limite os rótulos a uma a três palavras e fique-se por cerca de cinco separadores, para os rótulos caberem numa linha. ## Se não o vir - **O separador novo fica primeiro em vez de último.** **Add tab** põe sempre o separador novo à frente. Arraste o seu rótulo para o lugar pretendido. - **As definições mostram apenas Tab title e Tab description.** Abriu as definições de um separador. Paire o cursor sobre os rótulos para aparecer a barra de controlos de **Tabs** e abra aí **More > Settings**. - **Os telemóveis mostram cabeçalhos empilhados em vez de separadores.** **Mobile friendly** está ligado, que é a predefinição. Desligue-o nas definições de **Tabs** para manter separadores em todas as larguras de ecrã. - **Falta Tabs no separador Layout do seletor.** O seu perfil de utilizador do DXPR Builder exclui-o. Um administrador marca **Tabs** em **Elements** no seu perfil em `/admin/dxpr_studio/dxpr_builder/profile`. ## E a seguir? - [Adicionar um painel dobrável](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/painel-dobravel): empilhe perguntas e respostas que abrem uma de cada vez. - [Adicionar um esquema de carrossel](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/esquema-de-carrossel): mostre o mesmo tipo de conteúdo um diapositivo de cada vez. - [Adicionar um esquema aninhado](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/aninhamento): ponha filas e colunas dentro de um separador para esquemas mais ricos.