1. Início
  2. Documentos
  3. Sites Institucionais
  4. Funcionalidades Extras
  5. Ocultar/Exibir Lista com Conteúdos Extensos

Ocultar/Exibir Lista com Conteúdos Extensos

Este recurso deverá ser solicitado ao CGCO, através da Central de Serviços de TI (abre em nova janela).

Para evitar páginas ou postagens muito longas, é possível criar listas com conteúdos que podem ser expandidos ou retraídos, de acordo com a necessidade do usuário. Essas listas são chamadas Accordions e permite que o assunto seja estruturado em tópicos. Dessa forma, o usuário visualiza apenas os tópicos que forem clicados.

Imagem de exemplo de um accordion com todos os itens retraídos.

Imagem de exemplo de um accordion com um dos itens expandido.

Por que utilizar Accordions?

Esse recurso possibilita uma visão geral do conteúdo e, também, maior controle sobre como ele será exibido. O uso de accordions é ideal para situações onde o usuário precisa de apenas algumas partes da informação contida em uma página ou postagem. Ao esconder a maior parte desse conteúdo, ele usará seu tempo de forma mais eficiente, focando apenas nos tópicos de seu interesse.

Para usuários que utilizam telas menores, como no caso de celulares, o uso de accordions é de muita ajuda, pois o excesso de rolagem, muitas vezes, desencoraja a leitura e faz com que eles acabem fechando o site antes de encontrar o que procuram. Ter o conteúdo organizado em tópicos irá ajudá-los a encontrar mais rapidamente o que precisam, além de permitir que formem um modelo mental da informação disponível.

Quando não utilizar Accordions?

Para usuários que acessam o site de computadores de mesa ou notebooks, o uso desse recurso pode fazer com que parte da informação não seja lida, principalmente em listas longas, uma vez que estas exigem um esforço ativo por parte deles para visualizar o conteúdo. Muitos usuários podem clicar apenas naquilo que acham importante e, com isso, acabar perdendo alguma informação da qual possa precisar depois. Por isso, em casos onde é importante que todo o conteúdo de uma página ou postagem seja lido, é melhor evitar accordions, mesmo que isso deixe o texto muito extenso.

Como criar Accordion

Para criar um novo accordion, vá em Painel > Nice Accordion > Add New

Imagem da opção Nice Accordion selecionada e a opção Add new, do submenu, em destaque.

Você será redirecionado para a tela de edição. Escolha um título e digite-o no campo apropriado. Esse título não aparecerá no seu site, mas é importante identificar o accordion para encontrá-lo com facilidade mais tarde.
Imagem da tela de edição de accordions com o campo Digite o título aqui em destaque.

Na aba “Accordion Contents”, o primeiro item da lista já estará previamente criado. Clique sobre ele para começar sua edição.

Imagem da tela de edição de accordions com o primeiro item em destaque.

No campo “Accordion Title”, digite o título do item. Seja claro e objetivo ao definir um título, para que o usuário saiba que informação irá encontrar ao acessar o conteúdo.

Imagem da tela de edição de accordions com o campo Accordion Title em destaque

Imagem de exemplo de um accordion pronto, o local onde o título do accordion aparecerá está em destaque

 

O campo “Accordion Description” possui um editor de texto semelhante ao editor de páginas e de postagens. Nesse campo é que você deverá adicionar o conteúdo do accordion, sendo possível a formatação do texto pela barra de ferramentas e a adição de imagens. 

Imagem da tela de edição de accordions com o editor de texto em destaque

Imagem de exemplo de um accordion pronto, o local onde o conteúdo aparecerá está em destaque.

Você pode clicar sobre o item para retraí-lo, dessa forma poderá visualizar melhor os próximos itens que irá adicionar. 

Imagem da tela de edição de accordions com o título do primeiro item em destaque

 

Para adicionar um novo item, clique sobre o botão “Add Accordion Item”. É possível criar quantos itens forem necessários. 

Imagem da tela de edição de accordions com o botão Add Accordion Item em destaque

Você pode usar as setas para cima ou para baixo para inverter a ordem de um item com aquele que estiver diretamente acima ou abaixo dele. 

Imagem da tela de edição de accordions com os botões de setas para cima e para baixo em destaque

Caso deseje excluir um item já criado, clique sobre o botão “Remove Accordion Item” ou no “X” ao lado do título do item.

Imagem da tela de edição de accordions com o botão Remove Accordion Item e o botão X ao lado do título em destaque

Uma mensagem pop-up aparecerá, perguntando se você tem certeza que deseja remover o item. Clique em “OK” para confirmar.

 

Imagem da mensagem pop-up com a opção OK em destaque

Na caixa de publicação, clique no botão “Publicar” (ou “Atualizar”, caso o accordion já tenha sido publicado), para salvar as alterações feitas.

Imagem da tela de edição de accordions com botão Publicar em destaque

Inserir Accordion

Para ter acesso aos accordions já criados, vá em Painel > Nice Accordion > All Accordion.

Imagem da opção Nice Accordion selecionada e a opção All Accordion, do submenu, em destaque.

Localize o item desejado na lista de accordions. 

Imagem da tela de accordions com um item em destaque

Nessa mesma tela, é possível visualizar o shortcode do accordion. Selecione-o e clique sobre ele com o botão direito do mouse. Depois, clique com o botão esquerdo do mouse sobre a opção “Copiar”. 

Imagem da tela de accordions com o shortcode de um item selecionado e o botão Copiar em destaque

O shortcode também estará disponível na aba “Accordion Shortcodes” do seu accordion. O procedimento para copiá-lo é o mesmo. É importante ressaltar que você só deve copiar o shortcode DEPOIS de ter publicado o seu accordion. Caso contrário, o shortcode estará vazio.  

Imagem da tela de edição de accordions com o shortcode selecionado e a opção Copiar em destaque.

Copiado o shortcode, acesse o editor da página ou da postagem onde deseja inserir o seu accordion e cole-o, clicando com o botão direito do mouse na caixa de texto. Depois, clique com o botão esquerdo sobre a opção “Colar”. Imagem da tela de edição de post com a opçao Colar em destaque

Deletar um Accordion

Para excluir um accordion, clique em “Mover para a lixeira” na área de edição.

Imagem da tela de edição de accordions com a opção Mover para a lixeira em destaque

Também é possível excluí-lo clicando em “Colocar na lixeira” na lista de accordions.

Imagem da tela de accordions com a opção Colocar na lixeira em destaque

Depois de apagados, os itens serão movidos para a lixeira. Caso deseje acessá-la, clique em “Lixo”.

Imagem da tela de accordions com a opção Lixo em destaque

Caso deseje recuperar um item já deletado, clique em “Restaurar”.

Imagem da lixeira com a opção Restaurar em destaque

Para deletar um item completamente, clique em “Excluir permanentemente”.

Imagem da lixeira com a opção Excluir Permanentemente em destaque

 

Referência:

Accordions Are Not Always the Answer for Complex Content on Desktops – site em inglês (abre em nova janela)