Elemento Acordeão

O que é um elemento de acordeão?

Um acordeão é uma lista de cabeçalhos empilhados verticalmente que os visitantes podem clicar para expandir ou recolher. Isso permite que os clientes controlem quais informações eles veem, mantendo sua página organizada e fácil de navegar.

Um caso de uso comum para design de acordeão é o Página de perguntas frequentes, onde várias perguntas são listadas e os espectadores podem simplesmente clicar em uma pergunta para revelar a resposta que procuram:

Como adicionar o elemento Accordion no GemPages

Para adicionar o elemento Acordeão à sua página, siga os passos abaixo:

Etapa 1: No Painel GemPages, selecione sua página para entrar no Editor.

Uma vez finalizado, as configurações do elemento Acordeão serão apresentadas na barra lateral esquerda:

Configurando o Elemento Acordeão

O elemento Acordeão no GemPages é totalmente personalizável. As configurações são divididas em duas guias principais: Configurações e Avançado.

1. A guia de configuração

Gerenciamento de Itens

• Para adicionar um item: Basta clicar em Adicionar mais opção. 
• Para duplicar um item: Passe o mouse sobre o slide desejado e clique no ícone duplicar. 
• Para remover um item: Passe o mouse sobre o slide específico e clique no ícone da lixeira.

Estilo do item

• Plano de fundo: cor de fundo para cada item (incluindo o estado recolhido e expandido do item) no Acordeão.

• Borda: personalize a cor, a espessura e o traço da borda.

• Canto: ajuste o raio do canto para bordas arredondadas.

• Sombra: adicione efeitos de sombra para profundidade.

Cabeçalho do Item

• Ícone de título: As configurações do ícone do cabeçalho do acordeão.

• Título: O estilo de texto do título do cabeçalho.

• Ícone de expansão: as configurações para o ícone expandido de cada item no Acordeão.

• Altura: A altura do cabeçalho do Accordion. Por padrão, sua altura é Automática, o que significa que a altura será redimensionada automaticamente para se ajustar ao conteúdo dentro do cabeçalho. 

• Plano de fundo: altera a cor de fundo do cabeçalho.

• Preenchimento: O preenchimento do cabeçalho do Accordion cria o espaçamento interno da borda até o conteúdo dentro dele.

• Borda: personalize as bordas do cabeçalho.

• Alinhar: Alinhamento do conteúdo do cabeçalho (incluindo o ícone do cabeçalho e o título).

Conteúdo do item

• Preenchimento: O preenchimento da área de conteúdo para cada item do Accordion

Espaçamento de itens

• Espaço: O espaçamento entre cada item do Accordion. Espaçamento padrão = 16px

Efeito

• Item de foco: As configurações para o estilo do cabeçalho do Accordion ao passar o mouse sobre ele.

• Expandir cabeçalho: As configurações para o estilo do cabeçalho Acordeão quando expandido. Clicar na configuração Expandir abrirá seu Popover, que contém as configurações do estado Expandir.

Dimensões:

• Largura: Tamanho do conteúdo real dentro do elemento Acordeão.

Shape

Essas configurações de forma são para o wrapper do acordeão.

• Fronteira
• Corner
• Shadow

Condição de exibição

• Modo de expansão: Selecione o número de itens que um cliente pode abrir simultaneamente.
• O modo único permite que eles abram apenas um item.
• As opções múltiplas permitem abrir mais de um item ao mesmo tempo.
• Expansão automática: Defina um dos itens do acordeão para ser aberto inicialmente por padrão.

Quando esta opção for Sim, a configuração para escolher o item expandido padrão será exibida. Selecione o item que é expandido por padrão. Se houver vários itens abertos por padrão, separe-os com uma vírgula.

Alinhar

• O alinhamento será desabilitado quando a largura do elemento for 100%.
• Caso contrário, a opção de alinhamento padrão é Centralizar.

2. A guia Avançado

Para uma personalização mais avançada, navegue até o Guia Avançado e siga as instruções em Este artigo.