Compatibilità:

WebSite X5 Evo e Pro

A volte il problema non è solo quanto testo inserire, ma anche come renderlo più chiaro e coinvolgente. Presentare contenuti lunghi in modo compatto è importante, ma aggiungere un supporto visivo può fare davvero la differenza.


Con l’Oggetto Accordion Image puoi organizzare i contenuti in sezioni espandibili e, allo stesso tempo, associare a ciascun blocco un’immagine che cambia dinamicamente in base alla selezione. In questo modo ottieni un layout ordinato, interattivo e molto più efficace nella comunicazione.


Guarda alcuni esempi di ciò che puoi ottenere nella pagina Anteprima.



Come inserire i contenuti

I contenuti ideali per l’Accordion Image sono quelli suddivisi in sezioni, ciascuna introdotta da un titolo: presentazioni di servizi, step di un processo, caratteristiche di un prodotto, ecc.


Ogni sezione corrisponde a un blocco e deve avere almeno un titolo e un testo, a cui è associata un’immagine.

  • Fai doppio click sull’Oggetto Accordion Image inserito per accedere alla finestra con tutte le opzioni.
  • Rimani nella sezione Contenuto e clicca sul pulsante Aggiungi per inserire un nuovo blocco nell’elenco.
  • Seleziona il blocco appena creato e inserisci le informazioni necessarie. Per ogni blocco puoi definire:
    • un Titolo;
    • un Testo, ovvero il contenuto del blocco;
    • un’Immagine, che verrà visualizzata quando il blocco è attivo. Puoi selezionarla tra quelle salvate in  locale sul PC piuttosto che tra quelle proposte nelle  Librerie Online e renderla  accessibile aggiungendo un Testo Alternativo (vedi, Accessibilità delle immagini: l'importanza del testo alternativo );
    • un Pulsante, inserendo l’etichetta di testo (lo stile sarà definito nella sezione Stile);
    • un Collegamento, attivo se è presente un’immagine e/o un pulsante. Clicca su per richiamare la finestra Collegamento e scegliere l'azione che deve essere svolta al click sull'immagine e/o il pulsante. 
  • Ripeti questi passaggi per creare tutti i blocchi necessari.
  • Per modificare la lista dei blocchi, seleziona quello su cui vuoi agire e utilizza il pulsante Rimuovi per eliminarlo o i tasto freccia per spostarlo.
#tip - Per scrivere o modificare titoli, testi ed etichette dei pulsanti, puoi farti aiutare da  MagicText, l'assistente AI integrato in WebSite X5.


Come definire l’aspetto grafico

Dopo aver inserito i contenuti, puoi definire comportamento e aspetto grafico dell’Oggetto per adattarlo al design del tuo sito.

  • Apri la sezione Stile per intervenire sui singoli elementi dell’Oggetto.
  • Seleziona l’Elemento su cui vuoi agire: Blocco, Titolo, Titolo Attivo, Icona, Testo, Immagine o Pulsante.
  • Utilizza le opzioni disponibili per ciascun elemento per definire disposizioni, effetti, bordi, colori, font, margini e allineamenti.
  • Puoi ottenere risultati molto diversi. Quando hai finito, clicca su Ok per confermare.


Come cambia il layout su spazi ridotti

L’Oggetto Accordion Image è progettato per adattarsi automaticamente allo spazio disponibile, garantendo sempre una buona leggibilità dei contenuti.


In condizioni normali, le immagini sono affiancate ai blocchi di testo. Tuttavia, se lo spazio a disposizione del testo si riduce sotto una determinata soglia (definita automaticamente dal programma), il comportamento dell’Oggetto cambia:

  • le immagini non vengono più visualizzate accanto al testo;
  • vengono invece inserite direttamente all’interno dei blocchi.


In questo modo, il layout diventa analogo a quello dell’Oggetto Accordion Text & FAQ.


Questo può accadere, per esempio:

  • quando, in visualizzazione desktop, l’Oggetto viene inserito in una colonna di dimensioni ridotte;
  • quando si passa a risoluzioni più basse, come su tablet o smartphone.


Questo comportamento è stato progettato per evitare che il testo diventi troppo compresso e difficile da leggere.


Pronto per usarlo?

Vuoi rendere i tuoi contenuti più chiari, dinamici e visivi? Installa subito l’Oggetto Accordion Image


Non hai Crediti a sufficienza per acquistare questo Oggetto? Vedi tutti i pacchetti di Crediti