The GutenKit Image Accordion block focuses on allowing you to display multiple images in a consolidated area of your website. Additionally, you can add a title, button, popup, project, and so on. 

In this documentation, you will learn to add an image accordion in the Gutenberg block editor in simple steps.

Required Plugins: GutenKit Plugin

How to add Image Accordion in Gutenberg Websites #

Ready to get started? Follow the steps below.

Step 1: Add GutenKit Image Accordion Block #

Log in to your WordPress dashboard, 

• Vai a Pagine > Aggiungi nuova pagina oppure inizia a modificare una pagina esistente con l'editor a blocchi.
• Cerca il “+” icon at the top of the editor screen. Click it.
• Apparirà un menu a blocchi, cerca "GutenKit Image Accordion”.
• Quando lo vedi, fai clic su di esso o trascinalo e rilascialo nella schermata dell'editor dei blocchi.

Step 2: Add Accordion Content #

Adding the image accordion block will automatically load three items to your screen. Then, open the block setting and head to the Contenuto scheda.

Sotto il Fisarmoniche di immagini option, you will see:

• Each item includes a Clona elemento icon to copy a customized item.
• And the ‘X” icon to delete an item.
• Plus, there is a “+ Aggiungi articolo” button to add a new item.

Now, select any accordion item to open its setting.

• Keep This Item Active: Enable this toggle button to keep an item active on the visitor’s end.
• Immagine di sfondo: Here you will insert the image of the accordion item.
• Titolo: Type the text you want to show as the title.
• Enable Wrapper Link: Activating this option allows adding a link that visitors will follow by clicking anywhere on the accordion item.
• Add Button URL: Enable this option to insert a link in the button of the accordion item.
• Add Project Link Url: Enter the project link URL. Do note that the project link is disabled by default. You can enable it from the next settings.

Step 3: Configure Accordion Settings #

In the previous step, we added content for the image accordion. Now, we’ll set how to showcase them.

Impostazioni: #

• Stile: Choose an accordion style between Horizontal and Vertical.
• Active Behaviour: Select a revealing event of the active accordion item.
• Enable Button: Toggle this button to insert a button in the accordion item.
  • Etichetta del pulsante: Enter the text for the button label.
• Abilita pop-up: Activate this option to show a popup with an accordion item.
  • Popup Icon: Choose an icon to indicate the user to reveal the popup.
• Enable Project Link: Enable this toggle button to show a project with the accordion item.
  • Enable Project Link Icon: Add an icon from the library or upload your SVG file to display the project.

Step 4: Style Image Accordion #

Generale: #

• Altezza minima: Use the slider or add a custom value to define the height of the entire accordion section.
• Gutter: Adjust the gap between accordion items.
• Active Item Background: Choose between a solid color or a gradient background.

Titolo: #

• Margine: Determine the gap between the title and other items. Like 
• Colore: Select a color for the title from the color picker.
• Tipografia: Use this setting to set the title font family, text size, weight, line height, style, decoration, etc. 

Contenuto: #

• Allineamento: Place all the content of the accordion item between left, center, and right.
• Imbottitura: Give a custom value in this field to adjust the space around the accordion content.
• Posizione verticale: Defne the vertical placement of the accordion content between top, center, and bottom.

Pulsante: #

• Imbottitura: Define the inner space around the button text and border.
• Tipografia: Here you have all the customizing controls to set the typography style.

Now the following border customization options are applicable for both Normal and Hover state. You can separately customize them.

• Colore: Choose the text color for the button.
• Tipo di sfondo: Add a gradient or solid color background for the button.
• Confine & Raggio del confine: These settings are used for giving the border a color and set its style, thickness, & roundness.

Action Icon: #

• Larghezza: Use the slider to define the inner space of the action icon(Popup or Project) and its border.
• Spazio in mezzo: Use the slider to adjust the gap between action icons.
• Larghezza del bordo: Determine the thickness of the icon border.

The following styling features are applicable for both Normal and Hover states.

• Popup Icon Color: Select a color for the popup icon. 
• Link Icon Color: Use the color picker to choose the project icon color.
• Colore di sfondo: Add a background color for both action icons.

Step 5: Advanced Settings #

From the Advanced Settings tab, you can configure the Image Accordion 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.

Now it’s your turn to add an image accordion layout to your WordPress website using the Gutenberg block editor. You will end up showing multiple images in an appealing and attractive way.