Compatibilità:

WebSite X5 Pro

Quando si realizza un Sito Web Responsive particolarmente articolato, può essere necessario intervenire non solo sull’ordine dei contenuti o sulla loro visibilità, ma anche sulla loro disposizione strutturale nei diversi breakpoint.


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.


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.


Questo strumento è particolarmente utile quando il layout automatico non produce il risultato desiderato.


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. 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.

3. Inserisci o rimuovi le interruzioni

  • Clicca su un tratteggio grigio per inserire un’interruzione (diventa rossa).
  • Clicca nuovamente su una linea rossa per rimuoverla.

4. Conferma

  • Clicca nuovamente sul pulsante Interruzione di Riga per salvare e uscire dalla modalità.


Immagine 1. La Griglia in modalità Interruzione di Riga


Come funzionano nei breakpoint

Le Interruzioni di Riga non modificano il layout del breakpoint attualmente selezionato, ma determinano come la pagina si riorganizzerà nel breakpoint immediatamente successivo.


Questo significa che:

  • l’ordinamento degli Oggetti resta invariato;
  • gli Oggetti nascosti restano esclusi;
  • la disposizione viene ridefinita in base alle interruzioni inserite.


Esempio pratico

Per meglio comprendere il meccanismo, considera 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 struttura di Pagina al breakpoint successivo a quello Desktop si presenta come segue:


Immagine 3. Struttura per il breakpoint successivo a quello Desktop


Come vedi 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.


Gestione delle proporzioni

Quando un Oggetto occupa più colonne, WebSite X5 mantiene automaticamente la proporzione in larghezza anche nei breakpoint successivi.


Riprendendo come esempio la configurazione di pagina dell'Immagine 1 abbiamo 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 assa in larghezza non seguono più la disposizione precedente.


Questo permette di conservare equilibrio visivo anche quando il layout cambia.


Suggerimenti pratici

Per utilizzare efficacemente le Interruzioni di Riga:

  • usale per semplificare layout complessi;
  • evita eccessive frammentazioni;
  • verifica sempre la resa nei breakpoint successivi;
  • considera l’effetto combinato con Oggetti nascosti;
  • controlla l’Anteprima locale dopo ogni modifica.


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.