Compatibilità:

WebSite X5 Evo e Pro

Quando devi presentare più servizi, prodotti, vantaggi o categorie, organizzare i contenuti in box è una delle soluzioni più efficaci e utilizzate nel web design. Ogni elemento è ben separato dagli altri, facile da leggere e può guidare l'utente verso un'azione specifica grazie a un pulsante dedicato.


Con l'Oggetto Opzionale Box List Grid puoi creare in pochi passaggi una griglia di box completi di immagine, titolo, testo e pulsante, mantenendo uno stile uniforme e lasciando che sia il programma ad adattare automaticamente il layout alle diverse dimensioni dello schermo.


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


Quando utilizzare Box List Grid

L'Oggetto Box List Grid è particolarmente indicato quando devi presentare una serie di contenuti che condividono la stessa struttura grafica.


Le raccolte di box (o card) sono oggi una delle soluzioni più utilizzate nel web design perché permettono di organizzare le informazioni in modo chiaro, ordinato e facilmente consultabile. Ogni elemento è ben distinto dagli altri e può mettere in evidenza un servizio, un prodotto, una funzionalità o un collegamento.


Puoi utilizzare Box List Grid, ad esempio, per creare:

  • elenchi di servizi;
  • griglie di prodotti o categorie;
  • raccolte di vantaggi o funzionalità;
  • le fasi di un processo o di un percorso;
  • pacchetti o piani tariffari;
  • collegamenti alle principali sezioni del sito.


Ogni box può includere un'immagine o un'icona, un titolo, un testo descrittivo e un pulsante con collegamento, offrendo così una presentazione ordinata, coerente e immediatamente comprensibile.


Come inserire i contenuti

Per creare la tua griglia devi prima definire i singoli box che la compongono.

  • Fai doppio click sull'Oggetto Box List Grid inserito nella pagina per accedere alla finestra con tutte le opzioni.
  • Rimani nella sezione Contenuto e clicca sul pulsante Aggiungi per inserire un nuovo box nell'elenco.
  • Seleziona il box appena creato e inserisci tutte le informazioni necessarie. Per ogni box puoi prevedere:
    • un Titolo;
    • un Testo, ovvero il contenuto descrittivo del box;
    • un'Immagine o un'icona. 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 pulsante. Clicca su per richiamare la finestra Collegamento e scegliere l'azione che deve essere svolta al click.
  • Ripeti questi passaggi per creare tutti i box necessari.
  • Per modificare la lista dei box, seleziona quello su cui vuoi intervenire e utilizza il pulsante Rimuovi per eliminarlo oppure i pulsanti freccia per cambiarne la posizione.


#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 personalizzare l'aspetto dell'Oggetto in modo da adattarlo perfettamente al design del tuo sito.

  • Apri la sezione Stile.
  • Definisci la Larghezza minima che può essere assunta dai box e la Spaziatura che deve essere mantenuta fra loro. Questi parametri determinano le dimensioni e la disposizione dei box in relazione allo spazio complessivo disponibile. 
  • Scegli quale Effetto su passaggio applicare al box.
  • Può accadere che il numero dei box non sia sufficiente a riempire completamente l'ultima riga della griglia: in questo caso, attiva l'opzione Adatta l'ultima riga per eliminare gli spazi vuoti e fare un modo che i box occupino comunque tutta la larghezza disponibile.  
  • A questo punto, seleziona l'Elemento su cui vuoi intervenire: Sfondo, Sfondo su passaggio, Icona/Immagine, Titolo, Testo, Pulsante, Pulsante su passaggio.
  • Utilizza le opzioni disponibili per il singolo elemento per definire colori, bordi, caratteri, margini, spaziature, allineamenti ed effetti grafici.
  • Quando hai ottenuto il risultato desiderato, clicca su Ok per confermare.


Perché utilizzare un unico Oggetto per creare più box

Anche senza Box List Grid è possibile ottenere lo stesso risultato costruendo manualmente ogni box con altri Oggetti. In questo caso, però, ogni elemento deve essere creato, configurato e aggiornato singolarmente.


Con Box List Grid, invece, puoi gestire un'intera raccolta di box da un'unica finestra di configurazione, rendendo il lavoro molto più rapido e ordinato.


Questo approccio offre diversi vantaggi:

  • riduce il tempo necessario per creare anche griglie molto numerose;
  • garantisce uno stile uniforme tra tutti i box;
  • semplifica la modifica e l'aggiornamento dei contenuti;
  • evita di dover ripetere le stesse operazioni per ogni singolo elemento.


Come si adatta ai diversi dispositivi

Uno dei principali vantaggi di Box List Grid è la gestione automatica del layout responsive.


Su schermi ampi, l'Oggetto dispone automaticamente più box affiancati. Quando invece lo spazio disponibile diminuisce, ad esempio perché l'Oggetto è inserito in una colonna stretta oppure perché la pagina viene visualizzata su tablet o smartphone, la disposizione dei box viene riorganizzata in modo progressivo.


Il risultato è una visualizzazione sempre ordinata e leggibile, senza che tu debba creare versioni diverse dello stesso contenuto o intervenire manualmente sulla disposizione degli elementi.


Pronto per usarlo?

Vuoi presentare servizi, prodotti o vantaggi con una griglia di box ordinata, coerente e perfettamente responsive? Installa subito l'Oggetto Box List Grid.


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