Compatibilità:

WebSite X5 Evo e Pro

Quando si lavora con raccolte di immagini o contenuti visivi, capita spesso di dover gestire elementi con dimensioni diverse, senza voler rinunciare a un layout ordinato e piacevole da vedere. Forzare tutte le immagini in una griglia rigida, però, non sempre è la scelta migliore e può compromettere il risultato finale.


L’Oggetto Masonry nasce proprio per rispondere a questa esigenza: consente di creare griglie dinamiche in cui gli elementi vengono disposti automaticamente in base allo spazio disponibile e alla loro altezza, dando vita a composizioni fluide e visivamente equilibrate. Puoi avere un assaggio di cosa è possibile ottenere grazie alla pagina Anteprima.



Come funziona il layout Masonry

Il layout Masonry organizza gli elementi all’interno della pagina in colonne, distribuendoli verticalmente in base allo spazio disponibile. A differenza di una griglia tradizionale, gli elementi non vengono allineati su righe fisse: ogni contenuto occupa lo spazio necessario in altezza e viene posizionato nel primo punto utile della colonna.

Questo meccanismo permette di gestire in modo naturale immagini o contenuti con proporzioni diverse, evitando spazi vuoti e mantenendo una composizione compatta e visivamente equilibrata. L’ordine degli elementi viene rispettato, ma la loro disposizione si adatta dinamicamente alle dimensioni dei singoli contenuti e alla larghezza disponibile nella pagina.


Il risultato è un layout fluido, che sfrutta meglio lo spazio e si adatta automaticamente alle variazioni di dimensione, senza richiedere interventi manuali sull’impaginazione.


Quando usare l’oggetto Masonry

Come abbiamo detto, l’Oggetto Masonry è particolarmente indicato quando si lavora con contenuti visivi eterogenei e non è necessario mantenere un allineamento rigido su righe orizzontali.


In generale, è consigliabile utilizzarlo quando:

  • le immagini o i contenuti hanno proporzioni e altezze diverse;
  • l’obiettivo è ottenere una composizione fluida e visivamente dinamica;
  • l’ordine di lettura non è strettamente sequenziale.


Al contrario, può essere preferibile optare per altri oggetti quando:

  • è necessario mantenere un allineamento preciso tra gli elementi;
  • i contenuti devono essere confrontati riga per riga;
  • la struttura della pagina richiede una lettura ordinata e prevedibile.


Come inserire un oggetto Masonry

Per utilizzare l’Oggetto Masonry è sufficiente inserirlo all’interno di una pagina e accedere alle sue impostazioni per aggiungere e organizzare i contenuti da visualizzare.

  • Fai doppio click sull’Oggetto Masonry inserito per accedere alla finestra con tutte le opzioni.
  • Clicca sul pulsante Aggiungi per importare le immagini. Cliccando sulla freccia del pulsante Aggiungi puoi scegliere se cercare un File in locale o se utilizzare una Libreria online (per maggiori informazioni, vedi Come si importa un file?). I file importati vanno a comporre la lista dei file che puoi ordinare e modificare liberamente.
#tip - Seleziona multipla. Tieni premuto il tasto CTRL e clicca su tutti i file che vuoi selezionare in modo da importarli in un unico passaggio.
  • Con i pulsanti  puoi decidere se le anteprime delle immagine inserite devono essere visualizzate nella lista con dimensioni piccole o medie: in questo modo lavorerai in maniera più agevole.
  • Composta la lista delle immagini, puoi modificarla in ogni momento: oltre ad aggiungere nuove immagini, puoi eliminare quelle che non servono più o spostarle per creare un nuovo ordine. Per fare questo devi solo selezionare l'immagine dall'elenco e cliccare sul pulsante  per rimuoverla o usare i pulsanti freccia per spostarla.  
  • In maniera analoga, per ciascuna immagine puoi:
    • utilizzare il pulsante per inserire un titolo e un testo alternativo utile ai fini dell'accessibilità oltre che dell'ottimizzazione SEO della pagina (vedi Accessibilità delle immagini: l'importanza del testo alternativo);
    • cliccare sul pulsante  e, attraverso la finestra richiamata, scrivere un breve testo (per esempio, un titolo o una didascalia);
    • cliccare sul pulsante e impostare il link scegliendo l'azione più appropriata.


Come definire lo stile della galleria Masonry

Ora che hai composto la galleria, occupati degli aspetti più grafici.

  • Entra nella sezione Stile, definisci il Numero di colonne in base alle quali devono essere organizzate le immagini e stabilisci quale deve essere il comportamento nella Modalità responsive: puoi decidere che, al ridursi dello spazio disponibile, venga ridotto il numero di colonne a favore di una maggior dimensione delle immagini; oppure, al contrario, che il numero di colonne rimanga comunque sempre lo stesso. 
  • Per definire lo stile delle griglia puoi agire anche sul Margini e applicare un Fattore di smusso per arrotondare gli angoli delle immagini.  
  • Ora occupati dello Stile delle immagini: puoi impostare un Colore e un Effetto di Overlay, oltre che scegliere l'icona che deve viene visualizzata su passaggio del mouse per segnalare che è possibile cliccare per richiamare l'ingrandimento.
  • Naturalmente puoi scegliere anche gli Effetti: sia quello associato al passaggio del mouse sulla singola immagine che quello per la comparsa delle galleria nella pagina.
  • Infine stabilisci se al click sull'immagine deve essere visualizzata o meno la stessa immagine ingrandita: nel caso puoi stabile le dimensioni massime per l'ingrandimento.


Consigli pratici per un buon risultato

Per ottenere un layout Masonry efficace e piacevole da vedere, tieni presenti alcune buone pratiche durante la preparazione dei contenuti e la composizione della pagina.


In particolare:

  • utilizza un numero equilibrato di elementi, evitando raccolte troppo dense;
  • mantieni una coerenza visiva tra le immagini, soprattutto per stile e qualità;
  • ottimizza il peso dei file, per migliorare i tempi di caricamento della pagina;
  • verifica sempre il risultato in anteprima, sia su desktop che su dispositivi mobili.



Impaziente di usarlo nelle pagine del tuo sito? Installa subito l’Oggetto Masonry


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