Compatibilità:

WebSite X5 Evo e Pro

Quando si fa scorrere una pagina web 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 a chi visita il sito di orientarsi sempre al meglio, puoi 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 in nome di Sticky Bar e puoi personalizzarla sia nei contenuti che nella grafica.


Attivare e impostare la grafica di una Sticky Bar

Per creare una Sticky Bar sul tuo sito devi fare in questo modo:

  • Vai al Passo 2 - Impostazioni del Modello e clicca su Sticky Bar. 
  • Rimani nella sezione Generale e attiva l'opzione Visualizza una barra superiore.
  • Utilizza le opzioni disponibili per definire il colore o l'immagine di sfondo, in modo da dare alla barra l'aspetto che desideri.
  • Se vuoi che la Sticky Bar sia larga quanto tutta la finestra del Browser e non solo quanto i contenuti della pagina, attiva l'opzione Estendi alla larghezza della finestra del Browser.


Definire i contenuti di una Sticky Bar

Definito l'aspetto grafico, devi occuparti dei contenuti della Sticky Bar:

  • Accedi alla sezione Contenuti della finestra Sticky Bar.

Come vedi hai a disposizione un editor grafico uguale a quello disponibile per il Template (nella finestra Contenuto del Modello). Questo editor presenta una Barra Strumenti e, sotto ad essa, un'area di lavoro in cui viene automaticamente ripresa in scala 1:1 l'immagine utilizzata come sfondo. Su questa immagine vengono visualizzate in tempo reale tutte le modifiche che fai.

  • Seleziona dall'elenco degli Oggetti disponibili quelli che ti interessa utilizzare per comporre la Sticky Bar e trascinali all'interno dell'area di lavoro.
  • Come al solito, utilizza le maniglie di selezione o i comandi della Barra Strumenti per agire su posizione, dimensione e allineamenti degli Oggetti. Fai, invece, doppio click su un Oggetto inserito per accedere alla finestra con le relative impostazioni.   


#tip - All'interno della Sticky Bar ti 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.


In caso di sito responsive

Se stai lavorando alla creazione di un sito responsive (hai attivato l'opzione Sito Responsive presente in Passo 2 - Impostazioni Modello > Risoluzioni e Responsive Design), nelle sezioni in cui lavori alla definizione della grafica e dei contenuti della Sticky Bar hai a disposizione la Responsive Bar che ripropone tutti i breakpoint impostati e, in base a questi, identifica degli intervalli.


Per gestire la visualizzazione della Sticky Bar per ogni breakpoint devi procedere in questo modo:

  • Quando accedi la prima volta alla finestra Sticky Bar, sulla Responsive Bar è selezionato l'intervallo relativo alla visualizzazione Desktop. Senza cambiare intervallo, definisci sia l'aspetto che il contenuto della Sticky Bar seguendo i passi visti al paragrafo precedente.
  • Una volta soddisfatto del risultato raggiunto per la visualizzazione Desktop, clicca sulla Responsive Bar in modo da selezionare l'intervallo successivo.
  • Lo spazio a disposizione si riduce: valuta se è ancora possibile mantenere tutti gli Oggetti. Per fare in modo che un Oggetto non venga più visualizzato, selezionalo e clicca sul pulsante Gestione Oggetti nascosti: puoi scegliere che l'Oggetto venga nascosto solo nella visualizzazione corrente, oppure che venga nascosto anche in tutte le visualizzazioni inferiori.
  • Utilizza la Responsive Bar per selezionare, in ordine uno dopo l'altro, tutti gli intervalli e gestire la visualizzazione degli Oggetti nei diversi casi.  
  • Per rendere nuovamente visibile un Oggetto che avevi nascosto, seleziona sulla Responsive Bar l'intervallo su cui vuoi agire, clicca sul pulsante e seleziona il comando Gestione Oggetti nascosti per questa visualizzazione: dall'elenco degli Oggetti nascosti seleziona quello che ti interessa e clicca per renderlo di nuovo visibile. 


#tip - Per maggiori informazioni vedi Come si imposta il Modello di un sito responsive?