Blocchi a fisarmonica

Visualizza grandi porzioni di testo in sezioni comprimibili per aiutare i visitatori a navigare tra i contenuti più ricchi di testo.

Ultimo aggiornamento 10 aprile 2024

Usa i blocchi a fisarmonica per visualizzare i contenuti del testo in sezioni comprimibili. Questa è un'ottima opzione per pagine strutturate e ricche di testo come domande frequenti oppure offerte di prodotti. I blocchi a fisarmonica aiutano a mantenere la pagina concisa e a ridurre lo scorrimento per i visitatori.

Guarda un video

Come funzionano i blocchi a fisarmonica

I visitatori del tuo sito vedono il blocco a fisarmonica come un elenco di titoli insieme alle icone di espansione. A seconda delle impostazioni di progettazione, il primo elemento può essere espanso per impostazione predefinita.

I visitatori fanno clic su ciascun titolo per aprire il testo della descrizione. Ogni blocco a fisarmonica può avere un solo elemento espanso alla volta. Se i tuoi visitatori fanno clic su un elemento espanso, questo si comprime. Se fanno clic su un elemento quando un altro elemento è già stato espanso, quello precedente viene chiuso.

Accordion_block.png

Accordion_block.png

Aggiungere un blocco a fisarmonica

Per aggiungere un blocco a fisarmonica:

  1. Modifica una pagina o un post, fai clic su Aggiungi blocco o su un punto di inserimento, quindi seleziona Fisarmonica dal menu. Per assistenza, visita Aggiungere contenuti con blocchi.
  2. Apri l'editor dei blocchi cliccando sull'icona della matita presente sul blocco.
  3. Nella scheda Contenuto, aggiungi e modifica gli elementi nel blocco a fisarmonica. Ogni elemento include il testo del titolo, che viene sempre visualizzato, e il testo della descrizione, che viene visualizzato quando l'elemento viene espanso.
  4. Nella scheda Design, crea l'aspetto del blocco a fisarmonica.
  5. Quando hai finito, clicca fuori dall'editor dei blocchi. Le modifiche apportate vengono salvate automaticamente.

Aggiungere e modificare elementi

Nella scheda Contenuto:

  • Fai clic su un elemento nell'elenco per modificare il titolo e la descrizione
  • Fai clic su Aggiungi elemento per aggiungere un nuovo elemento
  • Fai clic e tieni premuto un elemento per riorganizzarlo
  • Passa il mouse sopra un elemento e clicca sull'icona cestino per eliminarlo

Quando apri un elemento, vedrai altre opzioni:

  • Modifica il testo del titolo nel campo Titolo
  • Modifica il testo della descrizione nel campo Descrizione
  • Fai clic su Duplica per creare una copia dell'elemento
  • Fai clic su Elimina per eliminare l'elemento

Progettare il blocco a fisarmonica

Nella scheda Design puoi definire il testo, il layout, l'aspetto e l'icona del blocco:

  • Clicca su Titolo per impostare il formato e l'allineamento del testo del titolo.
  • Clicca su Descrizione per impostare il formato e l'allineamento della descrizione, insieme ad altre opzioni come:
    • Larghezza, che imposta la larghezza del testo.
    • Padding, che imposta la quantità di spazio vuoto intorno al testo.
    • Allineamento, che consente di impostare la direzione di allineamento del testo.
    • Posizionamento, che imposta la posizione del testo nel blocco.
  • Abilita Espandi il primo elemento per espandere il primo elemento per impostazione predefinita.
  • Abilita Consenti più elementi aperti per impedire la chiusura di un elemento quando se ne apre un altro.
  • Clicca su Divisori per definire lo stile delle linee che dividono ogni elemento o per disattivarle.
  • Fai clic su Icona per impostare l'icona di espansione come freccia o segno più.
  • Sotto Icona, imposta Dimensione iconaSpessore iconaPosizionamento icona.
  • Imposta il padding delle righe per modificare la quantità di spazio bianco attorno a ciascun elemento.
  • Nei siti della versione 7.1, attiva l'interruttore del colore Sfondo per aggiungere colore di sfondo al blocco, impostare i raggi degli angoli e modificare il padding dello sfondo. I colori di sfondo a blocchi non sono supportati nella versione 7.0.
  • Accanto a Forma, attiva una linea solida o tratteggiata che delimiti il blocco. Per le linee solide e tratteggiate, imposta il tratto Colore e Spessore
  • Clicca sul menu a discesa Modalità Blend per scegliere un'impostazione di trasparenza. Questi effetti sono ottimali se stai sovrapponendo un blocco a fisarmonica a un'immagine o ad altri contenuti visivi.
  • Per sfocare l'Elemento o lo Sfondo, attiva l'opzione accanto a Sfocatura e sposta il cursore per regolare il livello di sfocatura.

Accesso a questa funzionalità

Le personalizzazioni Tratto, Modalità Blend e Sfocatura sono disponibili per le sezioni dell'Editor fluido. Per le sezioni che utilizzano l'editor classico, è disponibile solo Tratto.

Tipo di carattere e colore del testo

Il tipo di carattere e il colore del testo seguono le impostazioni degli stili del sito.Tieni presente che la modifica di queste impostazioni influisce su tutti gli elementi del tuo sito che condividono le stesse impostazioni:

  • Nel pannello Tipi di carattere, i titoli dei blocchi a fisarmonica seguono le impostazioni delle intestazioni e le dimensioni di Intestazione 4. Le descrizioni dei blocchi a fisarmonica seguono le impostazioni dei paragrafi e le dimensioni di Paragrafo 2.
  • Nel pannello Colori, i titoli dei blocchi a fisarmonica seguono il tweak Intestazione (piccola) per il tema cromatico. Le descrizioni dei blocchi a fisarmonica seguono la modifica di Paragrafo (medio).

Altri colori

Nel pannello Colori, utilizza i tweak in Blocco a fisarmonica per modificare il colore del divisore, quello dell'icona e dello sfondo predefinito.

Footer Image
  • Ricevi assistenza dalla nostra community

  • Ricevi assistenza dalla nostra community in merito alle personalizzazioni avanzate.

  • Affidati a uno Squarespace Expert

  • Fatti notare online con l'aiuto di un designer o di uno sviluppatore esperto.