Mediante i comandi presenti nella finestra Impostazioni Responsive è possibile fare in modo che ciascuna Pagina del Sito si possa adattare ai diversi dispositivi su cui verrà visualizzata, definendo come deve cambiare in relazione ai breakpoint impostati.
Nello specifico, lavorando con l'edizione Pro in questa finestra è possibile, dopo aver definito l'ordinamento degli Oggetti e deciso quali Oggetti rendere non più visibili, stabilire per ogni breakpoint se e dove impostare delle Interruzioni di Riga.
L'Interruzione di Riga serve per far si che un Oggetto o un Blocco di Oggetti presente in una riga della Griglia di impaginazione venga posizionato su una nuova riga per risoluzioni inferiori a quella del breakpoint selezionato. In pratica, impostare un'Interruzione di Riga significa inserire un "a capo" forzato.
Per attivare la modalità in cui è possibile inserire le Interruzioni di Riga è sufficiente cliccare sul pulsante 
Interruzioni di Riga. Avviata la modalità, sulla Griglia viene disegnato un tratteggio grigio in tutti i punti in cui è possibile inserire un'Interruzione di Riga. È sufficiente cliccare su un tratteggio per inserire un'Interruzione di Riga che, a questo punto, sarà disegnata in rosso. Cliccando una seconda volta su un'Interruzione di Riga già impostata la si rimuove. Terminata l'impostazione delle Interruzioni di Riga, è sufficiente cliccare nuovamente sul pulsante Interruzione di Riga per confermare e uscire dalla modalità.
Immagine 1. La Griglia in modalità Interruzione di Riga
Per meglio comprendere il meccanismo si consideri l'immagine di esempio dove, al breakpoint Desktop, sono state impostate delle Interruzioni di Riga prima dell'Oggetto 3 e dopo l'Oggetto 7:
Immagine 2. Struttura per il breakpoint Desktop
Da notare che il simbolo di Interruzione di Riga rispecchia l'ordinamento impostato. In questo modo si cerca di rendere meglio l'idea che, per esempio, l'Oggetto 7 verrà posizionato sopra il Blocco degli Oggetti 8, 9 e 10 dato che l'ordinamento degli Oggetti per quella riga va da destra verso sinistra.
Dato l'ordinamento impostato, le Interruzioni di Riga inserite e considerando il fatto che l'Oggetto 2 è stato reso non visibile, la stuttura di Pagina al breakpoint successivo a quello Desktop si presenta come segue:
Immagine 3. Struttura per il breakpoint successivo a quello Desktop
Come si vede l'Oggetto 2, che era stato reso non visibile, non è più presente ma questo non altera l'ordinamento degli Oggetti che rimane invariato. L'Interruzione di Riga forza gli Oggetti 3 e 4 a disporsi nella riga 2 della Griglia lasciando che l'Oggetto 1 occupi completamente la riga 1. Senza l'Interruzione di Riga gli Oggetti 1, 3 e 4 avrebbero continuato ad essere disposti affiancati nella riga 1, occupando ciascuno 1/3 dello spazio disponibile in larghezza.
Analogamente la seconda Interruzione di Riga porta gli Oggetti 8, 9 e 10 a non essere più parte di un unico Blocco e a disporsi in righe nuove, sotto l'Oggetto 7.
Da notare che, quando un Oggetto si dispone su più colonne, nel passaggio da un breakpoit al successivo viene mantenuta la stessa proporzione in larghezza. Nell'Immagine 1 si vede, per esempio, che al breakpoint Desktop l'Oggetto 5 occupa 3 colonne su 4 disponibili: questo significa che è largo per il 75% della riga. Questa proporzione viene mantenuta anche al breakpoint successivo (Immagine 3), anche se gli altri Oggetti allineati ad asso in larghezza non seguono più la disposizione precedente.
Best practice:
- |
|
- |
|
- |
