Como Adicionar uma Seção de Acordeão ou FAQ a uma Página
Use o elemento Acordeão para exibir perguntas e respostas em linhas expansíveis. Os visitantes clicam em um cabeçalho para revelar a resposta—ideal para FAQs, detalhes de políticas, especificações de produtos ou informações de apoio que não precisam estar visíveis o tempo todo.
Este guia cobre como adicionar o elemento e configurar as principais opções que controlam conteúdo e comportamento.
Antes de Começar
Certifique-se de ter:
- Texto de FAQ escrito (pergunta + resposta para cada linha).
- Uma página aberta no Page Builder.
- Uma seção ou container pronta para o bloco de FAQ (geralmente abaixo de preços ou depoimentos).
Mantenha seu copy de vendas mais importante fora do acordeão. Use linhas expansíveis para detalhes de apoio que os visitantes podem ler apenas quando têm objeções.
Passo 1: Adicionar o Elemento Acordeão
- Abra Pages e clique em Edit na sua página.
- No Page Builder, encontre Acordeão no painel de elementos.
- Arraste Acordeão para a seção ou container desejado.
- Clique no acordeão no canvas para abrir as configurações.
Para páginas de FAQ longas, coloque o acordeão em uma seção dedicada com um título acima (por exemplo, Perguntas Frequentes).
Passo 2: Adicionar e Gerenciar Itens do Acordeão
Cada linha do acordeão é um item com duas partes:
| Parte | O que é |
|---|---|
| Cabeçalho | A pergunta ou título visível que os visitantes clicam para expandir. |
| Conteúdo | A resposta ou texto do corpo exibido quando a linha está aberta. |
Ações dos itens
| Ação | O que faz |
|---|---|
| Adicionar item | Cria uma nova linha de FAQ. |
| Remover item | Exclui uma linha do acordeão. |
| Reordenar itens | Altera a ordem em que as linhas aparecem na página. |
| Editar cabeçalho | Atualiza o texto da pergunta ou título. |
| Editar conteúdo | Atualiza o texto da resposta ou explicação. |
Escreva cabeçalhos como perguntas claras: Quanto tempo leva a entrega? funciona melhor do que Entrega.
Mantenha as respostas concisas. Parágrafos longos dentro de acordeões são mais difíceis de escanear no mobile.
Passo 3: Configurar o Estado Padrão
| Configuração | O que faz |
|---|---|
| Estado padrão | Controla qual item (se houver) começa expandido quando a página carrega. |
Padrões comuns:
- Primeiro item aberto — Bom quando a pergunta principal aborda a maior objeção.
- Todos recolhidos — Bom quando você quer um bloco de FAQ compacto.
- Item específico aberto — Útil quando uma resposta é crítica para conformidade ou confiança.
Teste o estado padrão em Preview para saber o que os visitantes veem antes de clicar em qualquer coisa.
Passo 4: Configurar o Ícone de Expansão
| Configuração | O que faz |
|---|---|
| Ícone | O indicador de expandir/recolher (como chevron ou mais/menos) quando suportado. |
| Posição do ícone | Se o ícone fica no início ou no fim da linha do cabeçalho. |
| Estado ativo | Como o ícone aparece quando uma linha está aberta vs fechada. |
Ícones ajudam os visitantes a entender que a linha é clicável. Certifique-se de que o ícone não sobreponha texto longo do cabeçalho em telas pequenas.
Passo 5: Ajustar o Layout (Principais Opções de Estilo)
Você não precisa personalizar cada cor para lançar. Foque nestas configurações estruturais:
| Área | O que verificar |
|---|---|
| Espaço entre itens | Espaço entre linhas de FAQ para que não fiquem apertadas. |
| Padding do cabeçalho | Área de clique amigável para toque no mobile. |
| Padding do corpo | Espaçamento legível ao redor do texto da resposta. |
| Largura do container | Se o acordeão ocupa a largura total ou uma coluna mais estreita. |
| Borda ou divisor | Separação visual entre linhas quando seu template usa bordas. |
Visualize em tablet e mobile. Cabeçalhos com texto longo podem precisar de redação mais curta ou mais padding.
Passo 6: Salvar, Publicar e Testar
- Clique em Save no builder.
- Publique a página. Consulte Publicar uma página.
- Abra a URL ao vivo.
- Clique em cada linha para confirmar que expandir e recolher funciona.
- Confirme que o item aberto por padrão corresponde à sua intenção.
Checklist de testes
- Abra e feche cada item no desktop.
- Repita no mobile —alvos de toque devem ser fáceis de acertar.
- Confirme que nenhum elemento sobreposto bloqueia cliques no cabeçalho.
- Leia as respostas em busca de problemas de formatação (links quebrados, quebras de linha ausentes).
Boas Práticas
- Coloque copy crítico para conversão (oferta, garantia, CTA) acima ou fora do acordeão.
- Agrupe perguntas relacionadas e ordene da mais comum para a menos comum.
- Use 5–10 linhas de FAQ fortes em vez de dezenas de respostas superficiais.
- Alinhe a redação dos cabeçalhos com objeções reais de clientes vindas de tickets de suporte.
Solução de Problemas
| Problema | O que verificar |
|---|---|
| Linha não expande | Elemento correto selecionado; nenhum container sobreposto bloqueando cliques. |
| Item errado aberto ao carregar | Configuração de estado padrão daquele item. |
| Conteúdo apertado no mobile | Padding de cabeçalho/corpo e espaço entre itens. |
| Ícone desalinhado | Posição do ícone e comprimento do texto do cabeçalho em telas pequenas. |
Resultado
Sua página agora tem uma seção de FAQ ou acordeão funcional. Os visitantes podem expandir apenas as respostas que precisam, o que mantém a página escaneável enquanto ainda aborda objeções em profundidade.
Documentação Relacionada
FAQ
Quando devo usar um acordeão em vez de texto simples?
Use um acordeão para FAQs, políticas, especificações ou detalhes de apoio que os visitantes podem expandir apenas quando necessário. Mantenha copy de vendas essencial visível fora de painéis ocultos.
Posso reordenar perguntas de FAQ depois de criá-las?
Sim. Reordene os itens na lista de itens do acordeão. Publique novamente se a página já estava ao vivo.
A primeira FAQ deve estar aberta por padrão?
Depende da sua página. Abrir o primeiro item pode abordar a principal objeção imediatamente. Manter todas as linhas recolhidas deixa a seção mais compacta.
Posso adicionar links dentro das respostas do acordeão?
Sim. Você pode incluir links no corpo do conteúdo. Teste-os após publicar para confirmar que abrem corretamente no mobile.
Quantos itens de FAQ devo adicionar?
A maioria das landing pages funciona bem com aproximadamente 5–10 perguntas focadas. Linhas demais podem sobrecarregar visitantes mobile mesmo quando recolhidas.