Sezioni di pagina. Come creare layout con strutture diverse?

Compatibilità:

WebSite X5 Evo e Pro

Vuoi creare una pagina in cui una parte abbia 2 colonne, quella successiva 3 e un'altra ancora 4? Se tutta la pagina utilizza un'unica struttura di righe e colonne, combinare layout diversi può diventare complicato e costringerti ad aggiungere molte colonne solo per riuscire a disporre correttamente gli Oggetti.

Con le Sezioni di pagina puoi suddividere la Griglia di impaginazione in più aree indipendenti e assegnare a ciascuna una propria struttura. In questo modo puoi organizzare anche pagine complesse mantenendo la Griglia più semplice e leggibile.

In breve, una Sezione è un gruppo formato da una o più Righe. Ogni Sezione può avere un proprio numero di colonne e colonne di larghezza diversa, senza modificare la struttura delle altre Sezioni presenti nella stessa Pagina.

Come creare una nuova Sezione

Puoi creare una Sezione direttamente dalla Griglia di impaginazione:

1. Vai al Passo 4 - Pagine e apri la Pagina su cui vuoi lavorare.
2. Seleziona una Cella o un Oggetto nella Riga dopo la quale vuoi iniziare la nuova Sezione.
3. Clicca sul pulsante Nuova sezione presente nella barra degli strumenti.
4. Nella Griglia compare una linea di interruzione: le Righe sopra e sotto la linea appartengono ora a due Sezioni indipendenti.

Puoi aggiungere una nuova Sezione anche direttamente dalla Griglia: passando con il mouse sulla linea tra due Righe viene visualizzato il comando  che permette di creare la Sezione proprio in quel punto.

Una Sezione non aggiunge un contenuto visibile nella Pagina: serve a organizzare la struttura della Griglia. Il visitatore del sito non vede quindi la linea che separa le Sezioni.

Come usare un numero diverso di colonne nelle Sezioni

Il vantaggio principale delle Sezioni è che puoi modificare il numero e la larghezza delle colonne senza intervenire sull'intera Pagina.

Per esempio, puoi creare:

• una prima Sezione con 2 colonne;
• una seconda Sezione con 3 colonne;
• una terza Sezione con 4 colonne.

Per modificare la struttura di una Sezione:

1. Seleziona una Cella o un Oggetto appartenente alla Sezione su cui vuoi lavorare.
2. Utilizza i comandi della Griglia per aggiungere o rimuovere le colonne.
3. Se necessario, modifica anche la larghezza delle colonne attraverso gli appositi cursori.

Le modifiche vengono applicate solo alla Sezione selezionata: le altre Sezioni mantengono la propria struttura.

Questo permette, per esempio, di creare facilmente una Pagina con Righe a 2, 3 e 4 colonne senza dover impostare una Griglia unica con 12 colonne e calcolare ogni volta quanto spazio assegnare agli Oggetti.

Come spostare una Sezione

Se hai già completato una parte della Pagina ma decidi di cambiarne la posizione, non devi spostare gli Oggetti uno alla volta.

Passa con il mouse all'interno della Sezione e utilizza i comandi contestuali per:

• spostare la Sezione sopra quella precedente;
• spostare la Sezione sotto quella successiva.

Viene spostata l'intera Sezione, mantenendo al suo interno la disposizione degli Oggetti.

Questa possibilità è particolarmente utile nelle Pagine lunghe, dove una Sezione può corrispondere a un intero blocco di contenuti che vuoi riposizionare.

Come eliminare una Sezione

Se una divisione non ti serve più, puoi eliminare la Sezione e riunire le due parti della Griglia.

1. Passa con il mouse sulla linea che separa le due Sezioni.
2. Clicca sul comando Elimina sezione.
3. Le due Sezioni vengono unite in un'unica struttura.

Se le Sezioni utilizzano un numero o una larghezza delle colonne diversi, WebSite X5 adatta la struttura cercando di mantenere l'impaginazione originale degli Oggetti. In alcuni casi, però, potrebbe essere necessario controllare e sistemare nuovamente la loro disposizione.

Se elimini una Riga che è l'unica presente in una Sezione, insieme alla Riga viene eliminata anche la Sezione.

Come copiare o riutilizzare una Sezione

Se hai creato un blocco di contenuti che vuoi riutilizzare, puoi copiare l'intera Sezione invece di ricrearla Oggetto per Oggetto.

1. Apri il menu contestuale cliccando con il tasto destro del mouse su una Cella o su un Oggetto della Sezione.
2. Utilizza i comandi Taglia o Copia relativi alla Sezione.
3. Spostati nel punto della stessa Pagina, oppure in un'altra Pagina, in cui vuoi riutilizzarla.
4. Utilizza il comando Incolla relativo alla Sezione.

La Sezione viene aggiunta mantenendo la disposizione degli Oggetti e la propria struttura di righe e colonne.

Puoi utilizzare nello stesso modo anche i comandi per copiare e incollare una singola Riga.

Se la Riga che vuoi copiare contiene un Oggetto disposto su più Righe, il comando di copia della Riga non è disponibile.

#tip - Annulla e Ripristina. Se durante il lavoro sulla Griglia crei, elimini, sposti o incolli una Sezione per errore, puoi utilizzare Annulla (CTRL+Z) per tornare indietro e Ripristina (CTRL+Y) per riapplicare le operazioni annullate. WebSite X5 mantiene la cronologia delle modifiche finché continui a lavorare nella stessa finestra. Se apri una finestra diversa, la cronologia viene azzerata.

Cosa fare se non puoi creare una nuova Sezione

Una nuova Sezione può essere inserita solo in un punto in cui la Griglia può essere effettivamente interrotta.

Se un Oggetto occupa Celle appartenenti a più Righe e attraversa il punto in cui vuoi creare la Sezione, WebSite X5 non può dividere la struttura.

In questo caso:

1. controlla quali Oggetti occupano più Righe;
2. modifica la loro posizione o le loro dimensioni nella Griglia;
3. prova nuovamente a inserire la Nuova sezione.

In questo modo ogni Oggetto rimane interamente contenuto all'interno di una sola Sezione.

#tip - Sezioni di pagina e Interruzioni di Riga non sono la stessa cosa. Le Sezioni dividono la struttura della Griglia e permettono di utilizzare configurazioni di colonne indipendenti. Le Interruzioni di Riga, invece, servono a controllare come gli Oggetti si dispongono nelle diverse visualizzazioni di un sito Responsive. Per approfondire, vedi Responsive Design. Come usare le Interruzioni di Riga per organizzare gli Oggetti?

Come personalizzare l'aspetto delle Sezioni

Creare le Sezioni serve prima di tutto a organizzare la struttura della Pagina. Una volta definito il layout, puoi anche decidere di caratterizzare graficamente una o più Sezioni, per esempio applicando uno sfondo o creando una fascia visivamente distinta.

Per farlo utilizza il comando Stile sezioni.

Puoi anche collegare graficamente più Sezioni adiacenti: in questo modo continueranno ad avere strutture di colonne indipendenti, ma per il visitatore potranno apparire come un unico blocco continuo.

Per approfondire, vedi Stile sezioni. Come creare fasce con sfondo, margini e bordi?

Suggerimenti pratici

• Crea una nuova Sezione quando una parte della Pagina richiede una struttura di colonne diversa da quella precedente.
• Usa le Sezioni anche per organizzare meglio Pagine molto lunghe: blocchi distinti sono più semplici da individuare e spostare nella Griglia.
• Evita di creare Sezioni senza una reale necessità: se più Righe devono utilizzare la stessa struttura, possono rimanere all'interno della stessa Sezione.
• Prima di eliminare una Sezione con una struttura molto diversa da quella adiacente, controlla l'impaginazione: l'unione può richiedere un successivo riposizionamento degli Oggetti.