Compatibilità:

WebSite X5 Evo e Pro

Come sai, WebSite X5 propone una Griglia, suddivisa in righe e colonne, su cui agire per inserire i contenuti e definirne l'impaginazione. Sia per le singole celle che per le righe di questa Griglia di impaginazione puoi impostare delle proprietà grafiche al fine di ottenere dei layout di pagina belli e funzionali.  


In particolare, lavorando sullo stile delle Righe puoi ottenere delle fasce che, durante lo scroll della pagina, risultano molto efficaci nel mettere in risalto i contenuti più importanti.  


In questo articolo vedremo:


Appresi questi concetti di base potrai lavorare sullo stile delle righe, per esempio, per:


Come si presenta la finestra Stile delle Righe

Per lavorare allo stile delle righe devi andare al Passo 4 - Creazione della Pagina e, dopo aver inserito i contenuti che desideri, cliccare sul pulsante Stile Righe presente nella barra strumenti posta sopra la griglia di impaginazione.


La finestra Stile delle Righe è articolata in due sezioni:

  • Generale: ripropone la griglia che rappresenta la pagina con i contenuti inseriti. Sopra alla griglia è disponibile una barra strumenti e, a fianco, le opzioni necessarie per impostare l'aspetto delle righe selezionate.  
  • Full Height: offre i comandi e le opzioni necessari per impostare la navigazione a schede nella pagina. 

   

Come si imposta l'aspetto di una Riga

Per definire l'aspetto di una una Riga, e creare così una fascia all'interno della pagina, devi procedere in questo modo:

  • In Stile delle Righe > Generale clicca all'interno della Griglia sulla riga su cui vuoi lavorare.
  • Definisci se come Sfondo vuoi usare un colore, una sfumatura, un’immagine, un elenco di immagini, un'animazione, un video o una mappa. 
  • Utilizza le opzioni che ti vengono proposte in base al tipo di sfondo che hai selezionato, per impostare l’aspetto che più ti piace. 


Ricorda che nella finestra Stile delle Righe:

  • le Righe per le quali non è stato ancora definito l'aspetto sono affiancate da un pallino vuoto;
  • le Righe per le quali è già stato definito l'aspetto sono affiancate da un pallino pieno.


#tip - Per approfondire le possibilità di personalizzazione dell'aspetto delle Righe, vedi Come si crea una fascia orizzontale con un colore o un'immagine di sfondo?


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.