O bloco GutenKit Accordion é a solução perfeita para dar ao seu público acesso fácil a conteúdo longo. Ele adiciona uma seção dobrável ao seu site WordPress, além de fornecer recursos para adorar a seção de acordeão nos estágios ativo e inativo.

Nesta documentação, mostraremos como criar seções sanfonadas no editor padrão do Gutenberg.

Como adicionar blocos de acordeão no site Gutenberg #

Para iniciar o processo, é necessário instalar o plugin GutenKit. Quando terminar, basta seguir as etapas abaixo.

Etapa 1: adicionar bloco de acordeão GutenKit #

No painel do WordPress, 

• Seguir Páginas > Adicionar nova página ou comece a editar uma página existente.
• Para adicionar um novo bloco clique no botão “+”Ícone na parte superior da tela do editor de bloco.
• Procure o Acordeão GutenKit.
• Assim que aparecer, clique no ícone ou arraste e solte.

Etapa 2: adicionar itens de acordeão #

Abra as configurações do bloco, onde você adicionará o título, a descrição e o ícone do acordeão.

Acordeão: #

Por padrão, o bloco acordeão é carregado com três itens. Clique em qualquer item para editar o título e descrição texto. Existe um "Mantenha este slide aberto”Opção, habilitá-la manterá este controle deslizante ou item sempre aberto para seus visitantes.

Além disso, clique no botão “Adicionar novo”Para adicionar um novo item de acordeão. Você também pode copiar um item já personalizado clicando no botão “Clonar item”ícone. E, se você não quiser ficar com um item, basta clicar no botão “X" botão.

Selecione o estilo: Selecione o layout de acordeão desejado entre 5 estilos predefinidos.

Ícone: #

• Posição do ícone: Defina o posicionamento do seu ícone entre esquerda e direita. Ou você pode mostrar ícones em ambos os lados.
• Mostrar contagem de loops: ative este botão de alternância para mostrar a contagem de números com itens de acordeão. Observe que selecionar a opção “Ambos os lados” na configuração anterior fará com que essa configuração desapareça.
• Ícone Direita/Esquerda: adicione um ícone indicador para os visitantes abrirem o controle deslizante acordeão.
• Ícone direito/esquerdo ativo: mostra um ícone para o controle deslizante acordeão ativo.

*Além de selecionar na biblioteca de ícones, você também pode fazer upload de um arquivo de ícone SVG do seu próprio dispositivo.

Etapa 3: estilizar o conteúdo do texto do acordeão #

Título: #

• Tipografia: Use esta área de configuração para aplicar todas as opções de personalização de tipografia, como família de fontes, tamanho, espessura, estilo, decoração, altura da linha, etc.

A seguir, as seguintes opções estão disponíveis para ambos Abrir e Fechado opções. Isso significa que você pode personalizar o texto do título separadamente para estágios ativos e inativos.

• Cor: defina uma cor para o texto do título.
• Tipo de plano de fundo: escolha entre uma cor sólida e um fundo gradiente para o fundo do título.

• Fronteira: controle a largura, defina a cor e o estilo da borda do título.
• Raio da Fronteira: define a redondeza da borda do título.
• Sombra da caixa: use esses controles para definir a sombra da caixa ao redor da borda do título.
• Preenchimento: ajuste o preenchimento do título do item sanfonado.
• Margem Inferior: use o controle deslizante ou adicione um valor personalizado para definir o intervalo entre os itens sanfonados.

Descrição: #

• Cor: escolha a cor do texto da descrição do item do acordeão.
• Tipografia: aqui, você encontrará opções para alterar a família da fonte do texto de descrição, tamanho, espessura, estilo, espaçamento e muito mais.
• Tipo de plano de fundo: escolha um tipo de plano de fundo entre cor sólida e gradiente.
• Raio da Fronteira: Defina a redondeza da borda da área de descrição.
• Preenchimento: ajuste o espaço interno da área de descrição.

Etapa 3: borda e ícone de acordeão personalizados #

Fronteira: #

Semelhante à opção de título, você também pode personalizar a borda separadamente para ambos Abrir e Fechado modos.

• Fronteira: controle a largura, defina a cor e o estilo da borda do item sanfonado.
• Raio da Fronteira: define o arredondamento da borda do item sanfonado.
• Sombra da caixa: use esses controles para trazer efeitos de sombra ao redor da borda do item sanfonado.
• Desativar borda para os últimos elementos: ative este botão de alternância para desativar a borda do último item do acordeão.

Ícone: #

As configurações de estilo de ícone abaixo são aplicáveis para ambos Ícone fechado e Abrir ícone. 

• Tamanho do ícone: Defina o tamanho dos ícones.
• Cor: use o seletor de cores para adicionar cor ao ícone.
• Tipo de plano de fundo: selecione um tipo de plano de fundo entre cor sólida e gradiente.

• Fronteira: use esta área de configuração para aplicar cor, estilo e largura da borda ao redor do ícone.
• Raio da Fronteira: Esta configuração definirá a redondeza da borda do ícone.
• Preenchimento: ajuste o preenchimento do ícone.
• Margem: ajuste a margem ao redor do ícone.

Etapa 4: configurações avançadas #

Na guia Configurações avançadas, você pode configurar o layout do bloco acordeão, plano de fundo, estilos de borda e controlar sua visibilidade.

Disposição: #

• Margem: Defina o espaço ao redor do layout do bloco. Ajuda a definir a lacuna entre outro bloco.
• Preenchimento: insira um valor para definir o espaço ao redor do bloco dentro de seu layout.
• Largura: Além de manter a largura padrão do layout.
  • Largura completa: selecionar esta opção fará com que o layout ocupe toda a largura da tela.
  • Em linha (automático): Aplicá-lo terá a mesma largura do elemento do bloco.
  • Personalizado: Escolher esta opção revelará um controle deslizante para definir o espaço horizontal do layout do bloco.
• Índice Z: Use o controle deslizante para especificar a ordem da pilha do bloco com outros blocos.

Posição: #

No menu suspenso, você verá três opções: Padrão, Absoluto, e Fixo. 

• Absoluto: Selecionar esta opção lhe dará uma posição absoluta do bloco, o que significa que os elementos caberão em seu contêiner.
• Fixo: a opção Posição fixa permitirá que o elemento caiba em toda a viewport ou tela.

Ambas as opções Absoluta e Fixa têm configurações semelhantes às abaixo:

• Orientação horizontal: Escolha a direção de posicionamento entre esquerda e direita.
• Desvio: Use o controle deslizante ou coloque um valor manualmente para ajustar o posicionamento horizontal do bloco.
• Orientação Vertical: Selecione a direção de posicionamento entre para cima ou para baixo.
• Desvio: Use o controle deslizante ou coloque um valor manualmente para ajustar o posicionamento vertical do bloco. 

Fundo: #

• Fundo: escolha uma opção de plano de fundo entre cor sólida, gradiente ou imagem.

Na opção Hover:

• Imagem: Se você escolher a opção de imagem, serão abertas as seguintes opções:
  • Imagem: escolha uma imagem da biblioteca de mídia ou carregue a sua própria.
  • Tamanho da imageme: Selecione o tamanho da imagem entre Miniatura, Médio, Grande ou Completo.

• Posição: Selecione a posição das 10 opções diferentes.
• Anexo: Especifique a relação da imagem de fundo fixa ou de rolagem com o resto da tela do navegador.
• Repita: selecione uma opção para definir como as imagens de fundo serão repetidas.
• Tamanho de exibição: selecione um tamanho de exibição entre quatro opções diferentes.

• Duração da transição: use o controle deslizante para ajustar a transição do plano de fundo do estado Normal para o estado flutuante.

Fronteira: #

• Fronteira: Nesta opção de configuração, você obterá opções de configuração de borda como largura, estilo e cor.
• Raio da Fronteira: defina o arredondamento da borda inserindo um valor.
• Sombra da caixa: Obtenha todas as configurações como cor, horizontal/vertical, desfoque, propagação e muito mais para dar efeitos de sombra à borda. 

Na opção Hover:

• Duração da transição: você pode adicionar um valor manualmente ou usar o controle deslizante para definir o tempo para alterar o design da borda no estado de foco.

Visibilidade: #

O módulo de visibilidade permite controlar a exibição de designs de blocos dependendo do tipo de dispositivo. Haverá três opções de dispositivos (Desktop, Tablet, Mobile) com um botão de alternância. Ative o botão de alternância para ocultar o design do bloco desse dispositivo.

No entanto, você ainda pode vê-lo na visualização do editor.

Avançado: #

• Nome do bloco: forneça um nome para identificar este bloco exclusivamente ao vincular ou criar scripts para definir o estilo do bloco.
• Âncora HTML: adicione um URL para vincular uma página do site.

• Classes CSS adicionais: atribua classes CSS adicionais ao bloco, o que permitirá estilizar o bloco como desejar com CSS personalizado. 

Observação: você pode adicionar várias classes separadamente com espaços.

É isso. Esperamos que este guia tenha ajudado você a aprender como adicionar design de acordeão a um site WordPress.