Adicionar um painel dobrável.
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
- Clique em + numa secção e escolha Collapse panel no separador Layout. Vem com um alternador.
- 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.
- Paire o cursor sobre o alternador, abra o seu menu More e escolha Settings. Escreva a pergunta como Toggle title e clique em Save.
- Clique na pergunta para abrir o alternador. Clique em + dentro dele, escolha Text e escreva a resposta.
- 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.
- 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: mostre conteúdos relacionados lado a lado em vez de empilhados.
- Crie uma página de FAQ: construa uma página de FAQ inteira à volta de um painel dobrável.
- Adicionar um esquema aninhado: ponha filas e colunas dentro de um alternador.