Apresente grandes blocos de texto em seções que ficam ocultas para ajudar os visitantes a navegar pelo conteúdo com muito texto.

Use um bloco de acordeão para mostrar o conteúdo do texto em seções expansíveis. É uma ótima opção para páginas estruturadas e com muito texto, como perguntas frequentes ou ofertas de produtos. O bloco de acordeão mantém a página curta e reduz a rolagem para os visitantes.

Assista a este vídeo

Como funciona o bloco de acordeão

Os visitantes do site veem o bloco de acordeão como uma lista de títulos ao lado dos ícones para expandir. Dependendo das configurações do design, o primeiro item já vem expandido.

Os visitantes devem clicar em cada título para abrir o texto da descrição. Cada bloco de acordeão só pode ter um item expandido por vez. Quando os visitantes clicam em um item expandido, ele se recolhe. Quando eles clicam em um item quando outro item já estiver expandido, o item expandido é fechado.

Adicione um bloco de acordeão

Para adicionar um bloco de acordeão:

1. Edite uma página ou publicação, clique em Adicionar bloco ou num ponto de inserção e selecione Acordeão no menu. Para ajuda, confira Adição de conteúdo com blocos.
2. Para abrir o editor do bloco, clique no ícone de lápis no bloco.
3. Na aba Conteúdo, adicione e edite os itens no bloco de acordeão. Cada item inclui o texto do título, que está sempre visível; e o texto descritivo, que aparece quando o item se expande.
4. Na aba Design, ajuste o estilo do visual do bloco de acordeão.
5. Clique fora do editor de blocos quando terminar. Suas alterações são salvas automaticamente.

Adicione e edite um item

Na aba "Conteúdo":

• Clique em um item na lista para editar o título e a descrição
• Clique em Adicionar item para adicionar um novo item
• Clique e segure um item para mudar de ordem
• Passe o cursor sobre um item e clique no ícone de lixeira para apagá-lo

Ao abrir um item, aparecem mais opções:

• Edite o texto do título no campo Título
• Edite o texto da descrição no campo Descrição
• Clique em Duplicar para criar uma cópia do item
• Clique em Apagar para apagar o item

Ajuste o estilo do bloco de acordeão

Na aba "Design", você ajusta o estilo do texto, o layout e o ícone do bloco, além de como ele aparece:

• Clique em Título para definir o formato e o alinhamento do texto do título.
• Clique em Descrição para definir o formato e o alinhamento da descrição, além de opções como:
  • Largura, que define a largura do texto.
  • Espaçamento, que define a quantidade de espaço em branco ao redor do texto.
  • Alinhamento, que define a direção em que o texto será alinhado.
  • Disposição, que define onde o texto é colocado no bloco.
• Ative Expandir primeiro item para que o primeiro item seja expandido como padrão.
• Ative a opção Permitir vários itens abertos para evitar que um item se feche quando outro for aberto.
• Clique em Divisor para ajustar o estilo das linhas que dividem cada item ou para desativá-las.
• Clique em Ícone para que o ícone de expansão seja uma seta ou um sinal de mais.
• Abaixo de "Ícone", fixe o Tamanho do ícone, a Espessura do ícone e o Posicionamento do ícone.
• Defina o preenchimento da linha para alterar a quantidade de espaço em branco ao redor de cada item.
• Nos sites da versão 7.1, ative a opção da cor de fundo para adicionar cor ao fundo do bloco, fixar o raio dos cantos e alterar o preenchimento do fundo. A versão 7.0 não tem cores de fundo do bloco.
• Ao lado de Riscado, deixe uma linha cheia ou pontilhada no contorno da forma. Nos dois casos, defina a cor e a espessura do riscado. 
• Clique no menu suspenso Combinado para configurar a transparência. Esse efeito é indicado ao deixar um bloco em acordeão na frente de uma imagem ou de outro conteúdo visual.
• Para desfocar o elemento ou o plano de fundo, ative a opção Desfoque e use o controle para ajustar o nível.

As personalizações Riscado, Combinado e Desfoque estão disponíveis nas seções do Editor Intuitivo. As seções que usam o editor clássico contam apenas com a opção Riscado.

Fonte e cor do texto

A fonte e a cor do texto seguem as configurações de estilo do seu site. Lembre-se de que alterar essas configurações afeta todos os elementos do seu site com as mesmas configurações:

• No painel Fontes, os títulos dos blocos em acordeão seguem as configurações de Título e o tamanho do Título 4 . As descrições do bloco em acordeão seguem as configurações de parágrafos e o tamanho do parágrafo 2 .
• No painel Cores, os títulos dos blocos em acordeão seguem o ajuste de Título (pequeno) para o tema de cores. As descrições do bloco em acordeão seguem o ajuste de parágrafo (médio) .

Outras cores

No painel "Cores", use os ajustes em Bloco em acordeão para alterar a cor do divisor, a cor do ícone e a cor de fundo padrão.