Compatibilità:

WebSite X5 Evo e Pro

Vuoi mettere in evidenza una parte della Pagina, separare visivamente contenuti diversi o creare una grande fascia grafica che accompagni il visitatore durante lo scroll?


Dopo aver organizzato la Pagina in Sezioni, con WebSite X5 puoi personalizzarne facilmente l'aspetto: puoi applicare uno sfondo, aggiungere un Overlay, aumentare lo spazio sopra e sotto i contenuti, definire un bordo o creare una separazione sagomata tra due Sezioni.


Puoi anche collegare graficamente più Sezioni adiacenti: continueranno ad avere strutture di righe e colonne indipendenti ma, agli occhi del visitatore, appariranno come un unico blocco continuo.


#tip - Le Sezioni vengono definite direttamente nella Griglia di impaginazione. Se non sai ancora come crearle e gestirle, vedi Sezioni di pagina. Come creare layout con strutture diverse?


Come impostare lo stile di una Sezione

Per creare una fascia e personalizzare graficamente una Sezione:

  • Vai al Passo 4 - Pagine e apri la Pagina su cui vuoi lavorare.
  • Dopo aver organizzato i contenuti e definito le Sezioni necessarie, clicca sul pulsante Stile sezioni presente nella Barra Strumenti.
  • Nella Griglia visualizzata nella finestra Stile sezioni, seleziona la Sezione che vuoi personalizzare.
  • Definisci se come Sfondo vuoi utilizzare:
    • un colore;
    • una sfumatura;
    • un'immagine;
    • un elenco di immagini;
    • un'animazione
    • un video;
    • una mappa.
  • Utilizza le opzioni disponibili per il tipo di sfondo scelto per importare i file necessari e definirne l'aspetto.
#tip - Accessibilità. Per rendere accessibili le pagine del tuo sito, valuta se prevedere un testo alternativo per le immagini e i video utilizzati. Puoi impostare un elemento come "decorativo" o inserire un ALT text cliccando sul pulsante  disponibile nel campo in cui importi il file. Per maggiori informazioni vedi Accessibilità delle immagini: l'importanza del testo alternativo.

  • Se vuoi caratterizzare ulteriormente la fascia, puoi applicare un Bordo alla Sezione definendone:

    • il colore;
    • lo spessore;
    • lo smusso;
    • l'ombra.
#tip - Se applichi un'Ombra, verifica che intorno alla Sezione ci sia spazio sufficiente perché l'effetto sia completamente visibile. Se necessario, aumenta i Margini superiore e inferiore.



Nella finestra Stile sezioni puoi facilmente distinguere le Sezioni sulle quali hai già applicato uno stile:

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


Come creare una separazione sagomata tra due Sezioni

Se vuoi rendere più originale il passaggio tra una Sezione e quella successiva, puoi sostituire la normale linea di separazione con una Forma.


La Forma viene applicata alla parte inferiore della Sezione selezionata e crea una transizione grafica con quella successiva. Puoi utilizzarla indipendentemente dal tipo di sfondo applicato alla Sezione, per esempio un colore, una sfumatura o un’immagine.


Per procedere:

  • Seleziona la Sezione nella finestra Stile sezioni.
  • Clicca sul comando Forma.
  • Nella finestra Forma sezione scegli una delle forme disponibili.
  • Imposta l’Altezza per definire quanto deve essere pronunciata la forma.
  • Se vuoi ribaltare la forma orizzontalmente, attiva Inverti orizzontale.
  • Conferma con OK.


Per ripristinare una separazione rettilinea tra le Sezioni, seleziona Nessuna.


La Forma modifica solo l’aspetto grafico del passaggio tra le due Sezioni: non crea nuove Sezioni e non cambia la struttura della Pagina.


Come applicare lo stesso stile a più Sezioni

Due o più Sezioni adiacenti possono avere strutture di colonne diverse ma far parte, dal punto di vista grafico, della stessa fascia.


Per applicare loro lo stesso stile:

  • Nella Griglia della finestra Stile sezioni, individua le Sezioni che vuoi collegare.
  • Passa con il mouse sulla linea che le separa.
  • Clicca sul lucchetto visualizzato per collegarle.
  • Ripeti l'operazione se vuoi collegare altre Sezioni adiacenti.


Due o più Sezioni collegate fra loro rimangono indipendenti nella Griglia di impaginazione e possono quindi continuare ad avere un numero e una larghezza delle colonne differenti, ma condividono lo stesso aspetto grafico.


In questo modo puoi, per esempio, creare una fascia continua composta da una Sezione con 2 colonne e da una successiva con 3 colonne.


Come aumentare lo spazio sopra e sotto una Sezione

Se vuoi separare maggiormente una Sezione da quella precedente o successiva, non è necessario aggiungere un Oggetto Separatore o intervenire sui margini dei singoli Oggetti.


Puoi utilizzare direttamente i Margini della Sezione:

  • Seleziona la Sezione nella finestra Stile sezioni.
  • Clicca sul comando Margini.
  • Nella finestra Margini sezione imposta:
    • Superiore, per definire lo spazio sopra la Sezione;
    • Inferiore, per definire lo spazio sotto la Sezione.
  • Conferma con OK.


Se hai unito graficamente due o più Sezioni, nella finestra compare anche il valore Sezioni intermedie, che permette di definire lo spazio da mantenere tra le Sezioni che fanno parte dello stesso gruppo.


Per impostazione predefinita questo valore è 0, così le Sezioni unite formano visivamente un unico blocco continuo. Se vuoi mantenere una maggiore separazione tra le Sezioni del gruppo, puoi aumentarlo.


I Margini aumentano lo spazio prima e dopo la Sezione e aiutano a distinguere visivamente blocchi di contenuto diversi.


In questo modo lo spazio rimane associato alla Sezione e non a un singolo Oggetto: se in seguito modifichi o riorganizzi i contenuti, non devi reimpostare i margini.


Come copiare lo stile di una Sezione

Se hai impostato uno stile che vuoi riutilizzare, non devi ricrearlo da zero. Puoi tagliarlo, copiarlo e incollarlo su un'altra Sezione della stessa Pagina o di una Pagina diversa.


Per farlo puoi:

  • selezionare la Sezione e utilizzare i pulsanti Taglia, Copia e Incolla presenti nella Barra Strumenti;
  • oppure, cliccare con il tasto destro del mouse sulla Sezione e utilizzare i comandi Taglia, Copia e Incolla disponibili nel menu contestuale.


In questo caso viene copiato solo lo stile grafico della Sezione, non gli Oggetti e la struttura di righe e colonne che contiene.


#tip - Se vuoi copiare anche la struttura e i contenuti di una Sezione, devi utilizzare i comandi per copiare e incollare l'intera Sezione direttamente nella Griglia di impaginazione. Vedi Sezioni di pagina. Come creare layout con strutture diverse?


Come creare fasce con effetti più avanzati

Indipendentemente dal tipo di sfondo scelto, puoi applicare alla Sezione anche un effetto di Overlay, ovvero un filtro colorato sovrapposto allo sfondo:

  • Seleziona la Sezione nella finestra Stile sezioni.
  • Clicca sul pulsante Overlay presente nella barra degli strumenti.
  • Attraverso le impostazioni presenti nella finestra richiamata, definisci i colori e l'opacità e, se vuoi, attiva una transizione in loop tra i colori impostati.
  • Conferma le impostazioni.


L'Overlay non è l'unico effetto grafico che puoi utilizzare per rendere più accattivanti le fasce delle tue pagine.


In particolare puoi anche:


In sintesi

Con Stile sezioni puoi trasformare le parti strutturali della Pagina in vere e proprie fasce grafiche. Puoi definire lo sfondo, utilizzare un Overlay, aggiungere Margini e Bordi, creare separazioni sagomate con le Forme, collegare più Sezioni per ottenere un unico blocco visivo oppure copiare uno stile già impostato e riutilizzarlo altrove.


La struttura delle Sezioni rimane comunque indipendente dal loro aspetto: anche Sezioni con un numero diverso di colonne possono quindi condividere lo stesso stile grafico.