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. Cerca il “+" nella parte superiore della schermata dell'editor.
3. Clicking it will reveal a block library.
4. Put the “FAQ” in the search bar.
5. Quando appare, cliccaci sopra o trascinalo e rilascialo nella schermata dell'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 titolo E descrizione text. Further, hit the “Aggiungi articolo” button to add a new FAQ item. 

You can also copy an existing item by clicking on the “Clona elemento” icon. And, if you don’t want to keep an item, simply click on the “Xpulsante ".

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:

• Colore: Select a color for the title and description text. This setting is named the Colore del titolo under the Title option.
• Tipografia: Use this setting area to change the text’s font family, weight, transitions, line height, character spacing, etc.
• Sfondo: Aggiungi un tipo di sfondo tra colore pieno e sfumato.
• Confine: Use this setting to add border color, width, and style.
• Raggio del confine: Put a value to specify the roundness of the border.
• Imbottitura: Define the inner space around the title and description.
• Margine: Determine the space outside of the title and description. 

Passaggio 4: Impostazioni avanzate #

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

Disposizione: #

• Margine: Definisce lo spazio attorno al layout del blocco. Aiuta a impostare lo spazio tra un altro blocco.
• Imbottitura: inserisci un valore per impostare lo spazio attorno al blocco all'interno del suo layout.
• Larghezza: Oltre a mantenere la larghezza del layout predefinita.
  • Intera larghezza: Selezionando questa opzione, il layout si estenderà per l'intera larghezza dello schermo.
  • In linea (automatico): Applicandolo avrà la stessa larghezza dell'elemento blocco.
  • Costume: Scegliendo questa opzione verrà visualizzato un cursore per definire lo spazio orizzontale del layout del blocco.
• Indice Z: utilizzare il cursore per specificare l'ordine di sovrapposizione del blocco con altri blocchi.

Posizione: #

Sotto il menu a discesa, vedrai tre opzioni: Predefinito, Assoluto, E Fisso. 

• Assoluto: Selezionando questa opzione ti verrà fornita una posizione assoluta del blocco, il che significa che gli elementi si adatteranno al loro contenitore.
• Fisso: l'opzione Posizione fissa consentirà all'elemento di adattarsi all'intera finestra o schermo.

Entrambe le opzioni Assoluto e Fisso hanno impostazioni simili come le seguenti:

• Orientamento orizzontale: scegliere la direzione di posizionamento tra sinistra e destra.
• Compensare: utilizzare il dispositivo di scorrimento o inserire manualmente un valore per regolare il posizionamento orizzontale del blocco.
• Orientamento verticale: Selezionare la direzione di posizionamento tra su o giù.
• Compensare: utilizzare il dispositivo di scorrimento o inserire manualmente un valore per regolare il posizionamento verticale del blocco. 

Sfondo: #

• Sfondo: scegli un'opzione di sfondo tra tinta unita, sfumatura o immagine.

Sotto l'opzione Al passaggio del mouse:

• Immagine: Se scegli l'opzione immagine si apriranno le seguenti opzioni:
  • Immagine: scegli un'immagine dal catalogo multimediale o carica la tua.
  • Dimensioni immaginee: selezionare la dimensione dell'immagine tra Miniatura, Media, Grande o Intera.

• Posizione: Seleziona la posizione delle 10 diverse opzioni.
• Allegato: Specifica la relazione fissa o scorrevole dell'immagine di sfondo con il resto della schermata del browser.
• Ripetere: selezionare un'opzione per impostare la modalità di ripetizione delle immagini di sfondo.
• Dimensioni dello schermo: consente di selezionare una dimensione di visualizzazione tra quattro diverse opzioni.

• Durata della transizione: utilizza il cursore per regolare la transizione dello sfondo dallo stato normale allo stato al passaggio del mouse.

Confine: #

• Confine: sotto questa opzione di impostazione, otterrai opzioni di impostazione del bordo come larghezza, stile e colore.
• Raggio del confine: imposta la rotondità del bordo inserendo un valore.
• Scatola Ombra: Ottieni tutte le impostazioni come colore, orizzontale/verticale, sfocatura, diffusione e altro per dare effetti di ombra al bordo. 

Sotto l'opzione al passaggio del mouse:

• Durata della transizione: puoi aggiungere un valore manualmente o utilizzare il dispositivo di scorrimento per impostare l'ora in cui modificare il design del bordo allo stato al passaggio del mouse.

Visibilità: #

Il modulo visibilità consente di controllare la visualizzazione dei disegni a blocchi in base al tipo di dispositivo. Ci saranno tre opzioni del dispositivo (desktop, tablet, cellulare) con un pulsante di attivazione/disattivazione. Attiva il pulsante di attivazione/disattivazione per nascondere il design a blocchi di quel dispositivo.

Tuttavia, puoi ancora vederlo nella vista dell'editor.

Avanzate: #

• Nome del blocco: assegna un nome per identificare questo blocco in modo univoco durante il collegamento o lo scripting per definire lo stile del blocco.
• Ancoraggio HTML: aggiungi un URL per collegare una pagina del sito web.

• Classi CSS aggiuntive: assegna classi CSS aggiuntive al blocco che ti consentiranno di modellare il blocco come desideri con CSS personalizzato. 

NB: puoi aggiungere più classi separatamente con spazi.

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