Finestra Stile delle Righe

Passo 4 - Pagine > Comandi Barra Strumenti e Griglia >

Finestra Stile delle Righe

Previous pageReturn to chapter overviewNext page

Attraverso i comandi di questa finestra, richiamata dal pulsante Stile Righe presente nella barra di strumenti della Griglia di impaginazione proposta nella finestra Creazione della Pagina, si può definire l'aspetto grafico di una Riga, ovvero di una fascia orizzontale occupata da un gruppo di Oggetti posizionati in una Pagina.

La finestra Stile delle Righe propone:

una Griglia che riprende la configurazione della Pagina così come è stata definita nella finestra Creazione della Pagina;
l'elenco delle opzioni disponibili.

E' sufficiente selezionare la Riga sulla quale si intende lavorare e utilizzare le opzioni disponibili per definirne l'aspetto. La Riga selezionata viene colorata di blu e il numero che la contraddistingue viene evidenziato in grassetto.

A fianco di ciascuna Riga viene visualizzato un pallino che può essere pieno o vuoto a seconda del fatto che l'aspetto della Riga sia già stato definito o meno.

E' possibile collegare fra loro più Righe consecutive in modo che siano accomunate dallo stesso aspetto grafico. Può anche accadere che, in conseguenza a come vengono disposti gli Oggetti sulla Griglia o a come vengono ordinati in caso di Sito Responsive, alcune Righe vengano automaticamente unite. Per maggiori informazioni, vedere Come lavorare sull'Aspetto Riga.

Selezionata la Riga o il gruppo di Righe su cui si intende lavorare si può procedere definendo, per prima cosa, il tipo di Sfondo che si vuole impostare scegliendo tra:

Colorato: lo sfondo della Riga viene colorato in tinta unita.

Sfumato: lo sfondo della Riga viene riempito con un gradiente di cui si possono definire i colori di partenza e di fine e la direzione della sfumatura.

Immagine: lo sfondo della Riga viene creato attraverso l'importazione di un'immagine.

Elenco immagini: come sfondo della Riga viene impostato uno SlideShow in cui le immagini scorrono una dopo l'altra.

Video: come sfondo della Riga viene utilizzato un video.

Mappa: come sfondo della Riga viene inserita una Mappa.

A seconda del tipo di Sfondo, è possibile agire su diverse opzioni del riquadro Impostazioni. Le opzioni che possono essere disponibili sono:

Colore: specifica il colore da utilizzare come riempimento dello sfondo.
Colore iniziale / Colore finale: specificano i colori di partenza e di arrivo da utilizzare per comporre una sfumatura.
Diffusione: stabilisce se nella sfumatura deve essere predominante il colore iniziale o il colore finale, definendo lo spazio (in %) entro il quale deve avvenire la transizione dal primo al secondo.
Direzione: imposta l'ampiezza dell'angolo in base al quale viene orientata la sfumatura.
File locale su PC: seleziona il file grafico (.JPG, .GIF, .PNG.) relativo all'immagine da utilizzare come sfondo. L'immagine può essere ricercata o all'interno della Libreria online richiamabile attraverso il pulsante o nelle cartelle locali attraverso il pulsante Selezione file.
Disposizione: specifica se l'immagine inserita come sfondo deve essere ripetuta o meno. L'Immagine può essere ripetuta solo in senso orizzontale, solo in senso verticale o in entrambe i sensi, in modo da giungere ad occupare l'intero spazio a disposizione. In più, è possibile fare in modo che l'immagine venga adattata, ovvero ridimensionata in modo da coprire tutto lo sfondo.
Allineamento: specifica come deve essere allineata l'immagine inserita come sfondo rispetto all'area occupata dalla Riga.
Aggiungi... / Rimuovi: consentono di creare l'elenco di immagini da utilizzare come sfondo della Riga, aggiungendo nuovi file (in formato .JPG, .GIF, .PNG) o rimuovendo i file selezionati fra quelli già inseriti.

Cliccando sul triangolino presente sul pulsante Aggiungi... è possibile visualizzare un sotto-menu con le seguenti voci: Aggiungi Immagine... e Immagine da Libreria Online....

Tramite la finestra richiamata dal comando Immagine da Libreria Online... viene visualizzata una collezione di oltre 900.000 immagini royalty-free fra cui è semplice scegliere quelle da importare.

Sposta sopra / Sposta sotto: agiscono sull'ordine di visualizzazione delle immagini già inserite nella lista, spostando verso l'alto o verso il basso quella selezionata.
Visualizzazione: specifica in che modo deve avvenire il passaggio tra le immagini inserite come sfondo della Riga. E' possibile scegliere tra le seguenti alternative:
Immagini in sequenza a tempo: le immagini vengono visualizzate una di seguito all'altra con un effetto di dissolvenza. Il passaggio avviene dopo un intervallo predefinito di 3 secondi.
Immagini in sequenza in base allo scroll: le immagini vengono visualizzate una alla volta, senza alcun effetto di transizione. L’immagine visualizzata dipende dalla posizione dello scroll della pagina.
Immagini sovrapposte tra loro: le immagini vengono visualizzate tutte contemporaneamente, una sopra all'altra. In questo caso è indicato l'utilizzo di immagini salvate in formato .PNG con trasparenza e l'impiego di un effetto di parallasse.
Tipo di video: definisce se per il video da impostare come sfondo della Riga deve essere utilizzato un File locale su PC, un File su Internet o un Video di Youtube.
File locale su PC / File su Internet / URL Video Youtube: proposte in base al Tipo di video selezionato, queste voci consentono di selezionare il file video da importare o di digitare l'indirizzo URL presso il quale il file del video è già disponibile online.
Copertina: specifica un'immagine di anteprima da associare al Video. Anche in questo caso l'immagine può essere ricercata o all'interno della Libreria online richiamabile attraverso il pulsante o nelle cartelle locali attraverso il pulsante Selezione file.

L'immagine di anteprima viene visualizzata prima del video e scompare con effetto di dissolvenza solo dopo che questo è stato avviato. Impostare l'immagine di anteprima è, dunque, particolarmente utile per gestire la visualizzazione su dispositivi mobile dove il video non viene mai avviato automaticamente.

Indirizzo: è l'indirizzo che deve essere visualizzato sulla Mappa impostata come sfondo della Riga.
Stile: specifica come deve essere visualizzata la Mappa, scegliendo tra Stradale, Satellite, Ibrida e Terreno.
Fattore zoom: definisce il fattore di ingrandimento con cui visualizzare la cartina.
Opacità: imposta il grado di opacità del colore/della sfumatura/dell'immagine/del video/della mappa di sfondo applicato. Per valori tendenti allo 0 diminuisce l'opacità e lo sfondo della Riga diventa più trasparente lasciando vedere lo sfondo della Pagina.

Indipendentemente dal tipo di Sfondo scelto, è possibile applicare un Overlay, ovvero un filtro colorato, definendo i seguenti parametri:

Colore: specifica il colore da utilizzare per creare il filtro da applicare sullo sfondo.
Opacità: imposta il grado di opacità del colore del filtro da applicare. Per valori tendenti allo 0 diminuisce l'opacità e il filtro diventa più trasparente lasciando vedere lo sfondo della Riga.
Attiva transizione di colore: attivando questa opzione, l'Overlay applicato allo sfondo viene animato. L'animazione prevede la transizione in loop dal colore iniziale al Colore finale passando, se previsto, dal Colore Intermedio.

Infine, è possibile attivare le seguenti Opzioni:

Estendi alla larghezza della finestra del Browser: l'aspetto definito per la Riga non viene applicato solo per la larghezza corrispondente al contenuto della Pagina ma si estende per tutta la larghezza della finestra del Browser.
Effetto: attiva l'effetto parallasse sulla Riga selezionata. Il parallasse è una tecnica visuale che, attraverso il movimento di immagini a diverse velocità e prospettive, conferisce profondità e ricchezza al design di una Pagina Web, creando un'illusione 3D. Questo effetto rende lo scrolling delle Pagine un'esperienza più coinvolgente per il Visitatore. E' possibile scegliere tra diversi tipi di parallasse: Parallasse, Parallasse inverso e Parallasse fisso.

Basandosi sul movimento di immagini a diverse velocità, l'effetto parallasse non può essere attivato se come sfondo della Riga viene impostato un colore in tinta unita.

 


Best practice:

-

Come lavorare sull'Stile delle Righe


Approfondimenti:

-

Il Box Model in WebSite X5