Finestra Stile delle Righe

Passo 4 - Pagine > Comandi Barra Strumenti e Griglia >

Finestra Stile delle Righe

Previous pageReturn to chapter overviewNext page
Mostra/Nascondi testo nascosto 

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.

Questa finestra è articolata nelle seguenti sezioni:

Generale
Full Height
Clicca per espandere/ridurreReference: I comandi della Sezione Generale

Questa sezione propone:

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

È 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.

È 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.

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 Libreria Online con milioni di Immagini Premium e di Immagini 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. È 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 mappa.
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. È 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.

Clicca per espandere/ridurreReference: I comandi della Sezione Full Height

Attraverso i comandi presenti in questa sezione è possibile fare in modo che ciascuna Riga (o gruppo di Righe unite fra loro) assuma sempre almeno l'altezza della finestra del Browser, a prescindere dall'altezza dei contenuti in essa presenti. Il risultato che si ottiene è che la navigazione della Pagina avviene visualizzando le Righe come se fossero delle slide che si susseguono o, a seconda della transizione impostata, che si sovrappongono una all'altra.

Per fare in modo che ogni Riga assuma sempre l'esatta altezza della finestra del Browser, occorre innanzitutto attivare l'opzione Abilita la visualizzazione Full Height per tutte le righe di questa Pagina.

Fatto questo, è possibile specificare come deve avvenire il passaggio da una Riga all'altra:

Scorrimento automatico: attivando questa opzione, quando scrollando la Pagina inizia ad essere visibile una nuova Riga, la Pagina viene fatta scorrere in automatico in modo da visualizzare completamente la Riga stessa.

Infine è possibile prevedere anche dei Comandi di navigazione:

Mostra Pulsanti di scroll verso il basso: consente di visualizzare, sovrapposto in basso sulla Riga, un pulsante che permette di far scorrere automaticamente la pagina per visualizzare la Riga successiva.
Visualizzazione pulsanti: disponibile se è stata attivata l'opzione Mostra Pulsanti di scroll verso il basso, consente di scegliere se i pulsanti di scroll devono essere Sempre visibile oppure Visibile su passaggio del mouse.
Stile pulsanti: disponibile se è stata attivata l'opzione Mostra Pulsanti di scroll verso il basso, consente di importare l'immagine da utilizzare per definire l'aspetto del pulsante o di sceglierla da una libreria predefinita.
Mostra Indicatore di posizione: fa in modo che venga visualizzato un indicatore grafico che informa l'Utente sul numero e/o la posizione delle Righe in cui è suddivisa la Pagina. L'Utente può cliccare direttamente sugli indicatori di posizione per far scorrere la Pagina e portare in primo piano la Riga che gli interessa.
Stile pulsanti: disponibile se è stata attivata l'opzione Mostra Indicatore di posizione, consente di scegliere fra set grafici diversi per determinare l'aspetto dell'Indicatore stesso.
Allineamento: disponibile se è stata attivata l'opzione Mostra Indicatore di posizione, consente di scegliere come allineare l'Indicatore rispetto alla Pagina.

 


Leggi le Guide:

-

Come si lavora sullo Stile delle Righe per creare delle fasce orizzontali?

-

Come si imposta l’effetto parallasse?

-

Come si utilizza la proprietà Full Height per creare uno scorrimento a schede della pagina?