--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/painel-dobravel' title: 'Adicionar um painel dobrável | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T09:01:16+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Use um painel dobrável, também conhecido como acordeão, quando quiser uma lista de cabeçalhos que os visitantes abrem um de cada vez. Serve para FAQs, listas de funcionalidades e conteúdos longos que se leem melhor por partes. Fica com uma pilha de perguntas cujas respostas abrem com um clique. O exemplo constrói três perguntas para uma página de FAQ de uma agência.' 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 dobrável' description: 'Use um painel dobrável, também conhecido como acordeão, quando quiser uma lista de cabeçalhos que os visitantes abrem um de cada vez. Serve para FAQs, listas de funcionalidades e conteúdos longos que se leem melhor por partes. Fica com uma pilha de perguntas cujas respostas abrem com um clique. O exemplo constrói três perguntas para uma página de FAQ de uma agência.' 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:16+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-dobravel' articleSection: Disposição - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/painel-dobravel' description: 'Use um painel dobrável, também conhecido como acordeão, quando quiser uma lista de cabeçalhos que os visitantes abrem um de cada vez. Serve para FAQs, listas de funcionalidades e conteúdos longos que se leem melhor por partes. Fica com uma pilha de perguntas cujas respostas abrem com um clique. O exemplo constrói três perguntas para uma página de FAQ de uma agência.' 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 dobrável. Aprender DXPR BuilderCriar páginasAdicionar conteúdosDisposição ## Neste guia Guias relacionados - [Adicionar um painel de separadores](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/painel-de-separadores) - [Crie uma página de perguntas frequentes](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-de-perguntas-frequentes) - [Adicionar um esquema aninhado](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/aninhamento) Use um painel dobrável, também conhecido como acordeão, quando quiser uma lista de cabeçalhos que os visitantes abrem um de cada vez. Serve para FAQs, listas de funcionalidades e conteúdos longos que se leem melhor por partes. Fica com uma pilha de perguntas cujas respostas abrem com um clique. O exemplo constrói três perguntas para uma página de FAQ de uma agência. ## Adicionar um painel dobrável 1. Clique em **+** numa secção e escolha **Collapse panel** no separador **Layout**. Vem com um alternador. 2. Abra as definições do painel no seu menu **More**. Escolha com **Collapse** se todos os alternadores começam fechados. Aqui está ligado. Escolha um **Expand icon** e clique em **Save**. 3. Paire o cursor sobre o alternador, abra o seu menu **More** e escolha **Settings**. Escreva a pergunta como **Toggle title** e clique em **Save**. 4. Clique na pergunta para abrir o alternador. Clique em **+** dentro dele, escolha **Text** e escreva a resposta. 5. Clique em **Add toggle** na barra de controlos do painel para a pergunta seguinte. Os alternadores novos ficam no topo, por isso adicione primeiro a última pergunta. 6. Clique em **Save** na barra de ferramentas. Em Preview, clique numa pergunta para confirmar que a resposta abre. ## O que vê Cada pergunta é um cabeçalho com o ícone de expansão escolhido. Um clique abre a resposta por baixo e a resposta que estava aberta fecha. Com **Collapse** desligado, a primeira resposta está aberta quando a página carrega. As respostas ficam no HTML da página enquanto fechadas, para os motores de pesquisa continuarem a lê-las. ## Configure o seu painel dobrável O elemento **Collapse panel** tem duas definições, em **More** > **Settings** na sua barra de controlos. | Definição | O que faz | Predefinição | |---|---|---| | **Collapse** | On: todos os alternadores começam fechados. Off: o primeiro alternador começa aberto | Off | | **Expand icon** | O ícone junto a cada título: **None**, **+** (mais e menos) ou **﹀** (uma seta) | None | Cada alternador tem uma definição, **Toggle title**: a pergunta ou cabeçalho em que os visitantes clicam. ## Gerir alternadores - **Reorder**: arraste um alternador por **Toggle** na sua barra de controlos e largue-o por cima ou por baixo de outro. - **Rename**: paire o cursor sobre o alternador, abra **More** > **Settings**, mude o **Toggle title** e clique em **Save**. - **Remove**: paire o cursor sobre o alternador, abra **More** e escolha **Delete**. A resposta lá dentro vai com ele. Um alternador leva quaisquer elementos: texto, imagens, botões ou uma fila com colunas. Mantenha cada resposta curta. Se uma resposta precisar de uma página própria, ligue para essa página. ## Se não o vir - **A pergunta nova aparece no topo.** **Add toggle** insere sempre no topo do painel. Arraste o alternador por **Toggle** na sua barra de controlos para o lugar pretendido. - **As definições mostram apenas Toggle title.** Abriu as definições de um alternador. Paire o cursor sobre a borda superior do painel para aparecer a barra de controlos do **Collapse panel** e abra aí **More** > **Settings**. - **A primeira resposta está aberta quando a página carrega.** **Collapse** está desligado. Ligue-o nas definições do **Collapse panel** para todas as respostas começarem fechadas. - **Falta Collapse panel no separador Layout do seletor.** O seu perfil de utilizador do DXPR Builder exclui-o. Um administrador marca **Accordion** em **Elements** no seu perfil em `/admin/dxpr_studio/dxpr_builder/profile`. ## E a seguir? - [Adicionar um painel de separadores](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/painel-de-separadores): mostre conteúdos relacionados lado a lado em vez de empilhados. - [Crie uma página de FAQ](/pt-pt/hc/documentacao/aprender-dxpr-builder/tutoriais/pagina-de-perguntas-frequentes): construa uma página de FAQ inteira à volta de um painel dobrável. - [Adicionar um esquema aninhado](/pt-pt/hc/documentacao/aprender-dxpr-builder/esquema/aninhamento): ponha filas e colunas dentro de um alternador.