Compatibilità:

WebSite X5 Evo e Pro

Quando un visitatore scorre una pagina verso il basso, l’Header del sito, che spesso contiene logo, menu principale e collegamenti strategici, non è più visibile. Questo può rendere meno immediato orientarsi tra i contenuti, soprattutto nei siti più articolati.


Per migliorare navigazione, accessibilità ed esperienza utente, WebSite X5 permette di utilizzare una Sticky Bar, ovvero una barra superiore sempre visibile durante lo scroll, che mantiene a portata di mano gli elementi principali del sito.


La Sticky Bar rappresenta quindi uno strumento particolarmente utile per rafforzare la navigazione, migliorare l’usabilità e rendere più efficace l’esperienza di consultazione su desktop e dispositivi mobili.


Perché utilizzare una Sticky Bar

Una Sticky Bar ben progettata consente di:

  • mantenere sempre accessibile il menu principale;
  • migliorare l’orientamento dell’utente;
  • facilitare l’accesso rapido alle sezioni più importanti;
  • valorizzare logo, CTA e collegamenti strategici;
  • migliorare la navigazione su dispositivi mobili.


Come attivare e configurare la Sticky Bar

1. Accedi alle impostazioni

  • Vai al Passo 2 - Impostazioni del Modello
  • Clicca su Sticky Bar. 

2. Attiva la barra

  • Nella sezione Generale, attiva l'opzione Visualizza una barra superiore.

3. Definisci l’aspetto grafico

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


#tip - Accessibilità. Per rendere accessibile le tue pagine, valuta se prevedere un contenuto testuale alternativo per le immagini utilizzate nella Sticky Bar. Puoi inserire l'ALT text cliccando sul pulsante  che trovi nel campo in cui importi il file. Per maggiori informazioni vedi Accessibilità delle immagini: l'importanza del testo alternativo.


Come definire i contenuti della Sticky Bar

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

  • Accedi alla sezione Contenuti della finestra Sticky Bar.

Qui trovi un editor grafico simile a quello del 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.
  • Usa le maniglie di selezione o i comandi della Barra Strumenti per agire su posizione, dimensione e allineamenti degli Oggetti. 
  • Fai 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. Per procedere più velocemente puoi fare una selezione multipla di tutti gli Oggetti presenti nell'Header del Modello, copiarli e incollarli direttamente nella sezione 'Contenuti' della Sticky Bar.


Come ottimizzare la Sticky Bar per un 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:

1. Configura la versione Desktop

  • Seleziona sulla Responsive Bar l'intervallo Desktop.
  • Definisci sia l’aspetto grafico sia i contenuti della Sticky Bar seguendo i passi visti al paragrafo precedente.

2. Verifica i breakpoint successivi

  • Seleziona in ordine di progressione ogni intervallo sulla Responsive Bar.
  • Lo spazio a disposizione si riduce: valuta se è ancora possibile mantenere tutti gli Oggetti.

3. Gestisci gli Oggetti nascosti

  • Nascondi elementi secondari nelle visualizzazioni inferiori, mantenendo visibili solo gli elementi essenziali.
  • 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.
  • 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 Modello Responsive. Come adattare il layout del sito ai diversi dispositivi? 


Suggerimenti pratici per una Sticky Bar efficace

Progettare correttamente una Sticky Bar significa bilanciare accessibilità, funzionalità e pulizia visiva.


Per ottenere risultati migliori:

  • inserisci solo contenuti essenziali;
  • privilegia menu, logo e CTA strategiche;
  • evita barre troppo alte;
  • verifica la leggibilità su schermi ridotti;
  • utilizza la Responsive Bar per ottimizzare ogni breakpoint;
  • nascondi contenuti secondari su mobile;
  • testa sempre il comportamento tramite Anteprima locale;
  • controlla che pulsanti e link siano facilmente cliccabili.


In sintesi

La Sticky Bar è uno strumento estremamente utile per migliorare navigazione, accessibilità e continuità di utilizzo del sito.


Con WebSite X5 puoi configurarla in modo visuale, personalizzandone grafica, contenuti e comportamento responsive senza intervenire sul codice.


Se utilizzata correttamente, la Sticky Bar contribuisce a creare siti più professionali, usabili ed efficaci, offrendo agli utenti una navigazione più semplice e immediata su qualsiasi dispositivo.