Compatibilità:

WebSite X5 Evo e Pro dalla versione 13


Le pagine che presentano delle grandi fasce orizzontali sono ormai molto diffuse, non solo nei siti one page, ma anche in quelli più “tradizionali”. Queste fasce, che spesso vanno oltre la larghezza dei contenuti per occupare tutta la larghezza della finestra del browser, abbelliscono la pagina e catturano l’attenzione dei visitatori: usale anche tu nei tuoi progetti per mettere in primo piano i contenuti più importanti.  


In questo articolo vedremo:


Come si crea una fascia

Per creare una fascia devi lavorare sullo stile delle righe. La procedura è veramente molto semplice:

  • Al Passo 4 - Creazione della Pagina, dopo aver inserito i contenuti che desideri presentare, clicca sul pulsante in modo da accedere alla finestra Stile delle Righe.
  • Seleziona la riga o il gruppo di righe su cui vuoi agire e definisci se come Sfondo vuoi usare un colore, una sfumatura, un’immagine, un elenco di immagini, un video o una mappa. In base al tipo di sfondo, potrai sfruttare opzioni diverse per impostare l’aspetto che più ti piace. 
  • Se vuoi che la tua fascia occupi sempre tutto lo spazio disponibile in larghezza nella finestra del browser, attiva l’opzione Estendi alla larghezza della finestra del Browser.

#tip - Dimensioni della riga.  Una fascia può essere larga quanto la pagina (la cui larghezza è a sua volta determinata dal Modello applicato) o quanto l'intera finestra del Browser. L'altezza di una fascia, invece, è determinata dagli Oggetti contenuti ma può anche essere impostata in modo che sia sempre uguale a quella della finestra del Browser (vedi, Come si utilizza la proprietà Full Height per creare uno scorrimento a schede della pagina?).


Ricorda che nella finestra Stile delle Righe:

  • le Righe per le quali non è stato ancora definito l'aspetto hanno sfondo bianco e sono affiancate da un pallino vuoto;
  • le Righe per le quali è già stato definito l'aspetto hanno sfondo azzurro e sono affiancate da un pallino pieno;
  • cliccando con il tasto destro del mouse su una Riga, richiami un menu contestuale con i comandi necessari per copiare e incollare l'Aspetto Riga definito.


Come si uniscono più Righe per dare loro lo stesso aspetto

Puoi fare in modo che l'aspetto di una Riga sia automaticamente applicato anche a una o più Righe successive unendo fra loro le Righe stesse:

  • Nella Griglia riproposta nella finestra Stile delle Righe, sposta il mouse al centro della linea che idealmente unisce i pallini delle due Righe che vuoi unire: compare l'icona di un lucchetto.
  • Clicca sul lucchetto: le due Righe vengono unite e l'icona del lucchetto cambia.
  • A questo punto le due Righe sono unite e, visivamente, questo è rappresentato dalla linea che ora unisce i pallini che le affiancano. Tutte le impostazioni attivate per definire l'aspetto della prima Riga vengono applicate identiche anche alla seconda.
  • Ripeti questa procedura per unire fra loro tutte le Righe necessarie.


Come si dividono più Righe unite tra loro

Così come puoi unire due o più Righe in modo da poter dare loro lo stesso aspetto grafico,  puoi anche dividerle per renderle autonome:

  • Sposta il mouse in corrispondenza della linea che unisce i pallini relativi alle due Righe che vuoi separare, sopra l'icona del lucchetto.
  • Clicca sul lucchetto: le due Righe vengono separate. 


Se, per esempio, avevi unito le Righe 1 e 2 e per entrambe avevi definito un aspetto grafico particolare, separandole vedrai che la Riga 2 torna ad assumere il suo aspetto originario.


La separazione agisce esattamente nel punto corrispondente a dove è posizionata l'icona del lucchetto. Per esempio, se le Righe 1, 2, 3 e 4 sono unite fra loro e clicchi sul lucchetto posizionato fra la Riga 2 e la Riga 3, ottieni una situazione in cui la Riga 1 è unita alla 2 e la Riga 3 è unita alla 4.


Quando non è possibile separare più Righe unite tra loro

In base a come impagini gli Oggetti nella Griglia e a come li ordini nelle diverse Visualizzazioni in caso di Sito Responsive, è possibile che due o più Righe vengono automaticamente unite e che tu non possa intervenire per separarle.


Caso 1. Impaginazione

Se inserisci un Oggetto sulla Griglia in modo che occupi più Celle di Righe diverse, tutte le Righe coinvolte vengono automaticamente unite fra loro. Il lucchetto che compare sulla linea che unisce i pallini relativi alle Righe in questione è colorato diversamente proprio per indicare che non può essere rimosso. In questo caso, l'unico modo per modificare la situazione è intervenire sull'impaginazione degli Oggetti.


Nell'immagine d'esempio, l'Oggetto nella colonna 1 occupa le righe 1, 2 e 3: queste vengono automaticamente unite e non possono essere separate.


Caso 2. Sito Responsive

Se realizzi un Sito Responsive, ordinando gli Oggetti per definire come devono disporsi nelle diverse Visualizzazioni determinate dai breakpoint, puoi creare delle combinazioni che portano all'unione automatica di due o più Righe. In genere questo accade quando, come nell'esempio seguente, durante l'ordinamento ad un Oggetto viene fatto seguire non quello alla sua destra (appartenente alla stessa Riga) ma quello subito sotto (appartenente a una Riga diversa): in questo modo, infatti, si creano dei gruppi in cui gli Oggetti sono disposti su più Righe.


Nel definire la Visualizzazione corrispondente ad un breakpoint, l'ordinamento porta a formare gruppi in cui gli Oggetti sono disposti su Righe diverse.


Situazione finale: a causa dell'ordinamento impostato le Righe 1 e 2 sono state unite ed avranno lo stesso aspetto.