GutenKit FAQ block lets you add a stunning and fully functional FAQ section to your WordPress website using the default block editor. You can easily control how frequently asked questions are arranged and customized on your website.

In this documentation, we’ll break down how to use the GutenKit FAQ block on the Gutenberg editor.

Begin by installing the GutenKit plugin. Then log in to your WordPress dashboard. And, follow the steps below one by one.

How to Use GutenKit FAQ Block #

Step 1: Add GutenKit FAQ Block #

1. Take a new page and enable the block editor.
2. Procure o "+” ícone na parte superior da tela do editor.
3. Clicking it will reveal a block library.
4. Put the “Perguntas frequentes” na barra de pesquisa.
5. Quando ele aparecer, clique ou arraste e solte-o na tela do editor.

Step 2: Add FAQ Items #

Open up the block settings, you will type the FAQ title and description.

Under FAQ Option: #

The FAQ block loads with 3 items by default. Click on any item to edit the título e descrição text. Further, hit the “Adicionar Item” button to add a new FAQ item. 

You can also copy an existing item by clicking on the “Clonar item” icon. And, if you don’t want to keep an item, simply click on the “X" botão.

Step 3: Style FAQ Items #

The style tab comes with two setting options, Title and Content. Both options will have similar settings to customize the title and description text.  

Under Title & Content Option:

• Cor: Select a color for the title and description text. This setting is named the Cor do título under the Title option.
• Tipografia: Use this setting area to change the text’s font family, weight, transitions, line height, character spacing, etc.
• Fundo: Adicione um tipo de fundo entre cor sólida e gradiente.
• Fronteira: Use this setting to add border color, width, and style.
• Raio da Fronteira: Put a value to specify the roundness of the border.
• Preenchimento: Define the inner space around the title and description.
• Margem: Determine the space outside of the title and description. 

Etapa 4: configurações avançadas #

From the Advanced Settings tab, you can configure the FAQ block layout, background, border styles, and control its visibility.

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.

So, we’ve outlined everything you need to create a beautiful FAQ section on the block editor of your WordPress website. Just try yourself.