Editor Studio: aggiungere e personalizzare una Fisarmonica

Tempo di lettura: 5 min.
Usa l'elemento Fisarmonica per mostrare una grande quantità di contenuti in uno spazio ridotto. Consentendo ai visitatori di espandere e comprimere gli elementi, possono trovare facilmente le informazioni di cui hanno bisogno senza dover scorrere un lungo elenco.
GIF che mostra un esempio dell'elemento Fisarmonica in un sito con Editor X
In questo articolo, scoprirai come:

Aggiungere un elemento Fisarmonica

Seleziona il design che preferisci per la Fisarmonica, per iniziare. Puoi personalizzare ogni elemento della tua Fisarmonica per mostrare il contenuto del tuo cliente. Aggiungi gli elementi di cui hai bisogno e organizzali come preferisci all'interno del contenitore. 

Per aggiungere un elemento Fisarmonica:

  1. Clicca su Aggiungi elementi  sul lato sinistro dell'Editor
  2. Clicca su Strumenti layout
  3. Clicca su Fisarmoniche
  4. Trascina una Fisarmonica che preferisci sulla tua pagina 
  5. Modifica il contenuto degli elementi Fisarmonica:
    1. Seleziona l'elemento Fisarmonica che hai appena aggiunto
    2. Clicca su Gestisci elementi
    3. Clicca sull'elemento che vuoi modificare
      Suggerimento: questo apre l'elemento nell'area di lavoro, in modo da poter vedere cosa mostra attualmente
    4. Aggiungi gli elementi e le informazioni pertinenti
I design della Fisarmonica disponibili nel pannello Aggiungi elementi nell'Editor Studio

Aggiungere e gestire gli elementi della Fisarmonica

Gestisci gli elementi visualizzati nel tuo elemento Fisarmonica. Puoi aggiungere altri elementi per i contenuti del tuo cliente, dare nuovi titoli e modificarne l'ordine in cui appaiono.

Per aggiungere e gestire gli elementi della Fisarmonica:

  1. Seleziona l'elemento Fisarmonica
  2. Clicca su Gestisci elementi
  3. Passa il mouse sull'elemento e clicca sull'icona Altre azioni
  4. Scegli cosa fare con questo elemento della Fisarmonica: Duplica, Rinomina o Elimina
Suggerimenti:
  • Clicca su Aggiungi elemento nella parte inferiore del pannello per aggiungere un nuovo elemento vuoto
  • Puoi modificare l'ordine dei tuoi elementi. Tieni premuta l'icona Riordina  accanto a un elemento e trascinalo nella posizione desiderata
Screenshot del pannello Gestisci fisarmonica in cui puoi aggiungere, rinominare, duplicare, eliminare e riordinare gli elementi

Scegliere come aprire e chiudere la Fisarmonica

Decidi come apparirà la tua Fisarmonica quando i visitatori caricano la pagina. Puoi avere tutti gli elementi aperti in modo che le informazioni siano facilmente accessibili o chiusi per un aspetto più minimal. Puoi anche scegliere se i visitatori possono aprire più elementi contemporaneamente.  

Per scegliere come aprire e chiudere la Fisarmonica:

  1. Seleziona l'elemento Fisarmonica
  2. Clicca sull'icona Impostazioni
  3. Seleziona un'opzione in Scegli lo stato predefinito:
    • Tutti gli elementi chiusi: i visitatori vedranno prima gli elementi della fisarmonica chiusi, quindi scelgono quale elemento espandere per saperne di più
    • Primo elemento aperto: i visitatori vedono il contenuto dell'elemento in alto mentre gli altri elementi sono chiusi
    • Tutti gli elementi aperti: i visitatori vedono il contenuto di tutti gli elementi quando la pagina viene caricata 
  4. Clicca sull'interruttore Consenti più elementi aperti:
    • Abilitato: i visitatori possono avere aperti tutti gli elementi che vogliono nella Fisarmonica 
    • Disabilitato: i visitatori possono aprire un solo elemento alla volta
  5. (Facoltativo) Applica un effetto di transizione che appare quando i visitatori cliccano su un elemento per aprirlo
Nota:
L'opzione per consentire l'apertura di più elementi nella Fisarmonica non è disponibile se scegli Tutti gli elementi aperti come stato predefinito.
Screenshot del pannello Impostazioni fisarmonica, in cui puoi impostare la modalità di apertura e chiusura

Progettare il design di una Fisarmonica

Puoi progettare ogni parte della Fisarmonica in modo che corrisponda al resto della tua pagina. Personalizza i titoli degli elementi, i contenitori che mostrano il contenuto di ogni elemento o l'intero spazio di un elemento (titolo e contenitore inclusi).

Per progettare il ddesign di una Fisarmonica:

  1. Seleziona l'elemento Fisarmonica
  2. Clicca sull'icona Apri Ispezione  in alto a destra dell'Editor
Screenshot dell'apertura del pannello Ispezione nell'Editor Studio
  1. Scegli ciò che vuoi progettare dal menu a tendina:
    • Titoli: questi sono i titoli dei tuoi elementi. Puoi progettare i titoli in modo che abbiano un aspetto diverso al passaggio del mouse
    • Contenitori: questi sono i contenitori che mostrano il contenuto di ogni elemento
    • Elementi fisarmonica: controlla l'intero spazio di un elemento della Fisarmonica (titolo e contenitore inclusi)
  2. Usa le opzioni disponibili per scegliere diversi sfondi, caratteri, angoli, bordi e altro ancora
Screenshot del pannello Ispezione, in cui puoi progettare il design dell'elemento Fisarmonica

Regolare il layout della Fisarmonica

Regola il layout dell'elemento Fisarmonica in base alle tue esigenze. Puoi scegliere l'allineamento, il riempimento e la posizione dei titoli dei tuoi elementi, nonché l'icona che appare accanto a ogni titolo.
Suggerimento:
Puoi applicare una griglia CSS a ogni singolo elemento per creare il layout perfetto per i pixel.

Per regolare il layout della Fisarmonica:

  1. Seleziona l'elemento Fisarmonica
  2. Clicca sull'icona Layout
  3. Regola il layout dell'elemento Fisarmonica:
    • Scegli un'icona: seleziona l'icona che appare accanto ai titoli dei tuoi elementi: Freccia o Più 
    • Posizione icona: decidi se l'icona appare a sinistra o a destra dei tuoi titoli 
    • Spaziatura interna titolo: trascina i cursori per aggiungere spaziatura interna orizzontale e verticale attorno ai titoli degli elementi 
Screenshot del pannello Layout della Fisarmonica nell'Editor Studio

Hai trovato utile questo articolo?

|