Il blocco GutenKit Accordion è la soluzione perfetta per offrire al tuo pubblico un facile accesso a contenuti di lunga durata. Aggiunge una sezione pieghevole al tuo sito Web WordPress oltre a fornire funzionalità per adorare la sezione della fisarmonica sia nelle fasi attive che inattive.

In questa documentazione mostreremo come creare sezioni di fisarmonica sull'editor Gutenberg predefinito.

Come aggiungere blocchi di fisarmonica sul sito Web di Gutenberg #

Per avviare il processo, è necessario installare il plugin GutenKit. Una volta terminato, segui semplicemente i passaggi seguenti.

Passaggio 1: aggiungi il blocco fisarmonica GutenKit #

Dalla dashboard di WordPress, 

• Seguire Pagine > Aggiungi nuova pagina o iniziare a modificare una pagina esistente.
• Per aggiungere un nuovo blocco fare clic su "+"nella parte superiore della schermata dell'editor dei blocchi.
• Cerca il Fisarmonica GutenKit.
• Una volta visualizzato, fai clic sull'icona o trascinala e rilasciala.

Passaggio 2: aggiungi elementi a fisarmonica #

Apri le impostazioni del blocco, dove aggiungerai il titolo, la descrizione e l'icona della tua fisarmonica.

Fisarmonica: #

Per impostazione predefinita, il blocco a soffietto viene caricato con tre elementi. Fare clic su qualsiasi elemento per modificare il file titolo E descrizione testo. C'è un "Mantieni questa diapositiva aperta", abilitandola manterrai questo cursore o elemento sempre aperto ai tuoi visitatori.

Inoltre, premi il pulsante "Aggiungere nuova" per aggiungere un nuovo elemento della fisarmonica. Puoi anche copiare un articolo già personalizzato facendo clic sul pulsante “Clona elemento" icona. E, se non desideri conservare un oggetto, basta premere il pulsante "Xpulsante ".

Seleziona Stile: seleziona il layout della fisarmonica desiderato tra 5 stili predefiniti.

Icona: #

• Posizione dell'icona: definisce il posizionamento dell'icona tra sinistra e destra. Oppure puoi mostrare le icone su entrambi i lati.
• Mostra conteggio loop: attiva questo pulsante di attivazione/disattivazione per mostrare il conteggio dei numeri con gli elementi della fisarmonica. Tieni presente che selezionando l'opzione "Entrambi i lati" nell'impostazione precedente questa impostazione scomparirà.
• Icona destra/sinistra: aggiungi un'icona indicatore per consentire ai visitatori di aprire il dispositivo di scorrimento della fisarmonica.
• Icona destra/sinistra attiva: mostra un'icona per il dispositivo di scorrimento della fisarmonica attivo.

*Oltre a selezionare dalla libreria di icone, puoi anche caricare un file di icone SVG dal tuo dispositivo.

Passaggio 3: stile del contenuto testuale della fisarmonica #

Titolo: #

• Tipografia: utilizza quest'area di impostazione per applicare tutte le opzioni di personalizzazione della tipografia come famiglia di caratteri, dimensione, spessore, stile, decorazione, altezza della linea, ecc.

Successivamente, sono disponibili le seguenti opzioni per entrambi Aprire E Chiuso opzioni. Ciò significa che puoi personalizzare il testo del titolo separatamente per le fasi attive e inattive.

• Colore: imposta un colore per il testo del titolo.
• Tipo di sfondo: scegli tra un colore a tinta unita e uno sfondo sfumato per lo sfondo del titolo.

• Confine: controlla la larghezza, imposta il colore e lo stile per il bordo del titolo.
• Raggio del confine: definisce la rotondità del bordo del titolo.
• Scatola Ombra: utilizzare questi controlli per impostare l'ombra del riquadro attorno al bordo del titolo.
• Imbottitura: regola l'imbottitura del titolo dell'elemento della fisarmonica.
• Margine inferiore: utilizza il dispositivo di scorrimento o aggiungi un valore personalizzato per impostare lo spazio tra gli elementi della fisarmonica.

Descrizione: #

• Colore: Scegli il colore del testo della descrizione dell'oggetto della fisarmonica.
• Tipografia: qui troverai le opzioni per modificare la famiglia di caratteri, le dimensioni, lo spessore, lo stile, la spaziatura e altro ancora del testo della descrizione.
• Tipo di sfondo: scegli un tipo di sfondo tra colore solido e sfumato.
• Raggio del confine: Definisce la rotondità del bordo dell'area descrizione.
• Imbottitura: regola lo spazio interno dell'area della descrizione.

Passaggio 3: bordo e icona della fisarmonica personalizzati #

Confine: #

Similmente all'opzione titolo, puoi anche personalizzare il bordo separatamente per entrambi Aprire E Chiuso modalità.

• Confine: controlla la larghezza, imposta il colore e lo stile del bordo dell'elemento a fisarmonica.
• Raggio del confine: definisce la rotondità del bordo dell'elemento a fisarmonica.
• Scatola Ombra: utilizza questi controlli per applicare effetti ombra attorno al bordo dell'oggetto fisarmonica.
• Disabilita bordo per gli ultimi elementi: attiva questo pulsante di attivazione/disattivazione per disattivare il bordo per l'ultimo elemento della fisarmonica.

Icona: #

Le seguenti impostazioni di stile delle icone sono applicabili per entrambi Icona chiusa E Apri l'icona. 

• Dimensioni dell'icona: definisce la dimensione delle icone.
• Colore: utilizza il selettore colori per aggiungere colore all'icona.
• Tipo di sfondo: seleziona un tipo di sfondo tra colore solido e gradiente.

• Confine: utilizzare quest'area di impostazione per applicare il colore, lo stile e la larghezza del bordo attorno all'icona.
• Raggio del confine: Questa impostazione definirà la rotondità del bordo dell'icona.
• Imbottitura: regola la spaziatura dell'icona.
• Margine: regola il margine attorno all'icona.

Passaggio 4: Impostazioni avanzate #

Dalla scheda Impostazioni avanzate, puoi configurare il layout del blocco Fisarmonica, lo sfondo, gli stili dei bordi e controllarne la visibilità.

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.

Questo è tutto. Ci auguriamo che questa guida ti abbia aiutato a imparare come aggiungere il design della fisarmonica a un sito Web WordPress.