Passo 2 - Modello > Sticky Bar

Quando si fa scorrere una Pagina verso il basso, da un certo punto in poi l'Header non è più visibile. Tipicamente l'Header contiene elementi importanti come per esempio il Logo, il Titolo del Sito ma, soprattutto, il Menu di navigazione principale. Per permettere ai chi visita il Sito di orientarsi sempre al meglio, è possibile fare in modo che questi elementi vengano ripresi in una barra che, durante lo scroll della Pagina, rimane sempre visibile, ancorata alla parte superiore della finestra del Browser. Questa barra prende il nome di Sticky Bar e può essere personalizzata sia nei contenuti che nello stile grafico attraverso le apposite opzioni presenti nelle seguenti sezioni:

▪

Generale

▪

Contenuti

Se si sta lavorando alla realizzazione di un Sito responsive, è possibile lavorare sulla Sticky Bar per le Visualizzazioni corrispondenti ai diversi breakpoint impostati. In questi casi, infatti, la finestra presenta una Responsive Bar che riprende quella già proposta nella finestra Risoluzioni e Responsive Design. La Responsive Bar ripropone tutti i breakpoint impostati e, in base a questi, identifica degli intervalli: è sufficiente cliccare su un intervallo per selezionarlo e procedere alla definizione delle impostazioni grafiche o dei contenuti della Sticky Bar.

Per procedere alla creazione di un Sito responsive occorre scegliere l'opzione Sito Responsive presente nella finestra Risoluzioni e Responsive Design.

Per fare in modo che, anche quando l'header non è più visibile, continui ad essere proposta una barra superiore è sufficiente attivare l'opzione Visualizza una barra superiore.

Una volta attivata, l'aspetto della Sticky Bar può essere personalizzato attraverso le opzioni presenti nella sezione Stile:

▪	Colore Sfondo: specifica il colore da utilizzare come riempimento dello sfondo.

▪

File Immagine: seleziona il file grafico (.JPG, .GIF, .PNG.) relativo all'immagine da utilizzare come sfondo. L'immagine può essere ricercata o tra i file salvati in locale (cliccando sul pulsante

File Locale) o tra le risorse messe a disposizione dalle Librerie online collegate (cliccando sul pulsante

Libreria Online). Attraverso la finestra Accessibilità richiamata dal pulsante

è poi possibile specificare se il contenuto importato deve essere considerato un Elemento decorativo o, in caso contrario, associargli un Titolo e un Testo alternativo.

▪

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: in questo caso, possono non venir rispettate le proporzioni originali.

▪	Allineamento: definisce come deve essere allineata l'immagine inserita rispetto alla Sticky Bar.

▪	Altezza: riporta il valore espresso in pixel dell'altezza della Sticky Bar.

▪	Opacità: imposta il grado di opacità del colore dello sfondo della Sticky Bar. Per valori tendenti allo 0 diminuisce l'opacità e il filtro diventa più trasparente lasciando vedere i contenuti della Pagina.

▪	Estendi alla larghezza della finestra del Browser: se attiva, fa in modo che la Sticky Bar si estenda per tutta la larghezza della finestra del Browser e non solo per la larghezza dei Contenuti di Pagina.

Definito l'aspetto grafico, occorre occuparsi dei contenuti della Sticky Bar.

Per comporre la Sticky Bar è possibile utilizzare un editor grafico uguale a quello disponibile per il Template (finestra Contenuto del Modello). Questo editor presenta una Barra Strumenti e, sotto ad essa, un'area di lavoro in cui viene automaticamente ripresa l'immagine utilizzata come sfondo: l'immagine viene visualizzata in scala 1:1 e, se necessario, può essere fatta scorrere attraverso l'apposita barra di scroll orizzontale. Su questa immagine vengono visualizzate in tempo reale tutte le modifiche apportate attraverso i comandi disponibili.

Subito sotto l'immagine caricata è presente una Barra di Stato in cui vengono riportate:

▪	Posizione: visualizza le coordinate x e y che identificano la posizione dell'angolo superiore destro dell'Oggetto selezionato, rispetto all'area occupata dalla Sticky Bar.

▪	Dimensione: visualizza il valore espresso in pixel della larghezza e dell'altezza dell'Oggetto selezionato.

Infine, sotto alla Barra di Stato è riportato l'elenco di tutti gli Oggetti che è possibile utilizzare per comporre la Sticky Bar.

Gli Oggetti sono gli stessi utilizzati per comporre le Pagine (vedi, Passo 4 - Pagine): per poter essere identificati più facilmente sono organizzati tramite dei filtri e per ciascuno di essi è disponibile un'anteprima.

All'interno della Sticky Bar conviene riportare gli elementi principali presenti nell'Header e, primi fra tutti, il logo aziendale o il titolo del sito e il menu di navigazione principale.

Leggi le Guide:

-	Come si crea una barra menu sempre visibile durante lo scroll?
-	Accessibilità delle immagini: l'importanza del testo alternativo