Compatibilità:
WebSite X5 Pro
Quando realizzi un Sito Web Responsive, può essere necessario intervenire non solo sull’ordine e sulla visibilità dei contenuti, ma anche sul modo in cui gli Oggetti si dispongono quando lo spazio disponibile diminuisce.
Con WebSite X5 Pro, oltre a definire l’ordinamento degli Oggetti e scegliere quali contenuti mostrare o nascondere, puoi utilizzare le Interruzioni di Riga per controllare con maggiore precisione il layout delle pagine alle risoluzioni inferiori e decidere dove gli Oggetti devono andare a capo.
Cosa sono le Interruzioni di Riga
L’Interruzione di Riga consente di forzare uno o più Oggetti, oppure interi Blocchi di Oggetti, a spostarsi su una nuova riga quando il sito passa a breakpoint inferiori.
In pratica, si tratta di un “a capo” controllato che permette di:
- migliorare la leggibilità;
- evitare layout troppo compressi;
- distribuire meglio i contenuti;
- rendere più ordinata la struttura responsive;
- personalizzare ulteriormente la disposizione degli elementi.
Le Interruzioni di Riga sono particolarmente utili quando la disposizione calcolata automaticamente non produce il risultato che vuoi ottenere.
Sezioni e Interruzioni di Riga: qual è la differenza?
Le Sezioni e le Interruzioni di Riga possono sembrare simili perché entrambe introducono una separazione nella disposizione dei contenuti, ma svolgono funzioni diverse.
Le Sezioni organizzano la struttura della Griglia di impaginazione. Permettono, per esempio, di utilizzare un numero o una larghezza delle colonne differenti nelle diverse parti della Pagina.
Le Interruzioni di Riga, invece, fanno parte delle Impostazioni Responsive e servono a stabilire dove gli Oggetti devono andare a capo nelle Visualizzazioni successive. Non modificano la struttura di base della Pagina.
#tip - Per maggiori informazioni sulle Sezioni, vedi Sezioni di pagina. Come creare layout con strutture diverse?
Come impostare le Interruzioni di Riga
Per inserire un’Interruzione di Riga:
1. Accedi alle Impostazioni Responsive
- Vai al Passo 4 - Pagine.
- Apri la pagina desiderata.
- Clicca sul pulsante Responsive per aprire la finestra Impostazioni Responsive.
2. Seleziona la Visualizzazione di partenza
Utilizza la Responsive Bar per selezionare la Visualizzazione sulla quale vuoi intervenire.
Ricorda che le Interruzioni impostate non modificano la Visualizzazione attualmente selezionata, ma determinano come gli Oggetti verranno disposti nella Visualizzazione immediatamente successiva.
3. Attiva la modalità Interruzione di Riga
- Clicca sul pulsante
Interruzioni di Riga. - Nella Griglia compaiono tratteggi grigi nei punti in cui è possibile inserire una nuova interruzione.
4. Inserisci o rimuovi le interruzioni
- Clicca su un tratteggio grigio per inserire un’interruzione: la linea diventa rossa.
- Clicca nuovamente su una linea rossa per rimuoverla.
5. Conferma
- Clicca nuovamente sul pulsante Interruzione di Riga per salvare e uscire dalla modalità.
Puoi ripetere l’operazione nelle Visualizzazioni successive, inserendo nuove Interruzioni dove necessario.
Immagine 1. La Griglia in modalità Interruzione di Riga
Come funzionano le Interruzioni nei breakpoint
Le Interruzioni di Riga non modificano il layout della Visualizzazione attualmente selezionata, ma stabiliscono come la Pagina deve riorganizzarsi nella Visualizzazione immediatamente successiva.
Per esempio, se inserisci un’Interruzione mentre è selezionata la Visualizzazione Desktop, il layout Desktop non cambia: l’effetto sarà visibile nella Visualizzazione successiva.
In questo processo:
- l’ordinamento degli Oggetti rimane invariato;
- gli Oggetti impostati come non visibili restano esclusi;
- la disposizione degli Oggetti viene ridefinita in base alle Interruzioni inserite.
Procedendo verso le risoluzioni inferiori puoi aggiungere nuove Interruzioni per adattare ulteriormente il layout.
Nella Visualizzazione Smartphone non è necessario inserirne altre: gli Oggetti rimasti visibili vengono completamente linearizzati e disposti uno sotto l’altro secondo l’ordine definito.
Esempio pratico
Per comprendere meglio il meccanismo, considera una Pagina in cui, nella Visualizzazione Desktop, sono state inserite due Interruzioni di Riga: una prima dell’Oggetto 3 e una dopo l’Oggetto 7.
Immagine 2. Struttura per il breakpoint Desktop
Il simbolo dell’Interruzione di Riga tiene conto dell’ordinamento impostato. Nell’esempio, questo permette di capire che l’Oggetto 7 verrà posizionato sopra il Blocco formato dagli Oggetti 8, 9 e 10, perché l’ordinamento di quella parte della Pagina procede da destra verso sinistra.
Considerando l’ordinamento impostato, le Interruzioni inserite e il fatto che l’Oggetto 2 sia stato reso non visibile, nella Visualizzazione successiva la Pagina assume questa struttura:
Immagine 3. Struttura per il breakpoint successivo a quello Desktop
L’Oggetto 2 non è più presente, ma questo non modifica l'ordinamento degli altri Oggetti.
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.
In questo modo puoi modificare il layout senza cambiare l’ordine logico dei contenuti.
Come si comportano le Interruzioni di Riga in una Pagina con più Sezioni
Se la Pagina è suddivisa in più Sezioni, WebSite X5 gestisce il comportamento responsive separatamente per ciascuna di esse.
Le Interruzioni di Riga continuano quindi a servire per controllare come gli Oggetti di una Sezione devono disporsi nelle Visualizzazioni successive.
Non creano, eliminano o modificano le Sezioni: intervengono soltanto sulla disposizione responsive degli Oggetti.
Gestione delle proporzioni
Quando un Oggetto occupa più colonne, WebSite X5 mantiene automaticamente la proporzione in larghezza anche nei breakpoint successivi.
Per esempio, se nella Visualizzazione Desktop un Oggetto occupa 3 colonne su 4, utilizza il 75% dello spazio disponibile sulla Riga.
Quando la disposizione cambia nella Visualizzazione successiva, WebSite X5 mantiene questa proporzione per quanto possibile, anche se gli altri Oggetti non sono più affiancati nello stesso modo.
Questo permette di conservare un maggiore equilibrio nella disposizione dei contenuti mentre il layout si adatta alle diverse risoluzioni.
Suggerimenti pratici
Per utilizzare efficacemente le Interruzioni di Riga:
- inseriscile quando vuoi controllare con precisione dove gli Oggetti devono andare a capo;
- evita di aggiungerle quando la disposizione automatica produce già un buon risultato;
- procedi dalla Visualizzazione Desktop verso quelle più strette;
- considera sempre l’effetto combinato delle Interruzioni con gli Oggetti impostati come non visibili;
- usa le Interruzioni per semplificare la disposizione, senza frammentare inutilmente il layout;
- verifica sempre il risultato nelle Visualizzazioni successive e in Anteprima.
In sintesi
Le Interruzioni di Riga rappresentano uno strumento avanzato ma molto utile per perfezionare il comportamento responsive delle pagine.
Con WebSite X5 Pro puoi gestire in modo visuale anche gli aspetti più dettagliati della disposizione dei contenuti, migliorando struttura, leggibilità e controllo del layout senza intervenire manualmente sul codice.
Se utilizzate correttamente, le Interruzioni di Riga ti consentono di ottenere pagine responsive più ordinate, professionali ed efficaci su qualsiasi dispositivo.