Compatibilità:

WebSite X5 Evo e Pro

Partiamo con un esempio: hai un negozio di ricambi d'auto e per te è essenziale che nella Home Page del tuo sito web sia ben visibile il numero di telefono a cui contattarti per ordini e informazioni. Facciamo un esempio diverso: hai un sito di e-commerce e nella pagina di ricerca vorresti mettere in risalto una promozione attiva. In entrambi i casi ciò che serve è un pulsante che si distingua dal resto della pagina, sia sempre disponibile ed anche facilmente cliccabile.


In queste ed altre situazioni, puoi ricorrere all'Oggetto Sticky Button. Con questo oggetto, infatti, puoi creare dei pulsanti che rimangono visibili sui margini della pagina anche durante lo scorrimento e che consentono agli utenti di compiere rapidamente azioni per te importanti come: chiamarti, iscriversi a una newsletter o acquistare. Puoi vedere alcuni esempi di ciò che puoi realizzare nella pagina Anteprima.



In questa guida parleremo di:


Cos'è e cosa puoi fare con uno Sticky Button

Iniziamo con il definire cosa sono gli Sticky Button. Gli Sticky Button (o "pulsanti adesivi") sono pulsanti che si distinguono per 3 caratteristiche principali:

  1. Posizione fissa: questi pulsanti rimangono in una posizione fissa rispetto alla finestra del browser, indipendentemente dallo scorrimento della pagina.
  2. Visibilità costante: sono sempre visibili, ancorati sui margini della pagina, ed è evidente che non fanno parte dei contenuti. In questo modo facilitano l'accesso rapido alle azioni principali che l'utente può voler compiere.
  3. Funzionalità specifiche: sono spesso associati a funzioni specifiche come la condivisione sui social media, l'avvio di una chat, l'iscrizione a servizi, ecc.

Per queste loro caratteristiche, gli Sticky Button sono perfetti come pulsanti di condivisione sul Social Media, come pulsanti di contatto o di assistenza o come Call-To-Action (iscrizione a newsletter, scaricamento di app, acquisto, ecc.).


Come si inserisce uno Sticky Button nelle pagine del sito

In WebSite X5 puoi inserire uno Sticky Button:

  • in una una pagina specifica: così facendo i visitatori del sito lo vedranno solo nella pagina scelta (per esempio, la Home Page).
  • nell'Header o nel Footer del template: in questo modo, lo stesso identico pulsante sarà presente in tutte le pagine del sito.


Ecco come devi procedere:

  • Se vuoi avere uno Sticky Button in una pagina specifica, vai al Passo 3 - Mappa e fai doppio click sulla pagina che ti interessa in modo da aprirla: inserisci l'Oggetto Sticky Button in una cella della griglia di impaginazione. 
  • Se, invece, vuoi avere lo stesso Sticky Button in tutte le pagine del sito, vai al Passo 2 - Contenuto del Modello, posizionati nella sezione Header o nella sezione Footer e inserisci l'Oggetto Sticky Button.
#tip - Non è importante in quale cella della griglia di impaginazione o in quale punto dell'Header/Footer inserisci l'Oggetto: lo Sticky Button verrà comunque visualizzato in sovraimpressione rispetto alla pagina. 
  • In qualsiasi caso, dopo averlo inserito, fai doppio click sull'Oggetto Sticky Button per accedere alla finestra delle impostazioni e procedere con la sua definizione.

 

Come si imposta il contenuto di uno Sticky Button

A questo punto puoi occuparti del Contenuto dello Sticky Button: puoi utilizzare sia un testo che un'immagine.

  • Nella finestra delle impostazioni, digita il Testo che vuoi che compaia nello Sticky Button. Naturalmente sul testo puoi apportare tutte le consuete formattazioni e deciderne il Colore.
  • Se vuoi, puoi importare anche un'Immagine scegliendola dai file salvati in locale o dalle Librerie Online. Per l'immagine devi definire le Dimensioni in pixel e l'Allineamento a destra o a sinistra rispetto al testo.     


Come si definisce lo stile di uno Sticky Button

Passiamo all'aspetto dello Sticky Button lavorando con le voci del riquadro Stile:

  • Inizia con lo scegliere il Colore di Sfondo del pulsante, decidi se vuoi che abbia un'Ombra e gli angoli arrotondati (Smusso).
  • Imposta i Margini, ovvero lo spazio tra il contenuto e il bordo del pulsante.
  • Stabilisci la Posizione del pulsante. In sostanza puoi decidere a quale lato della finestra del browser ancorare il pulsante: al lato superiore, inferiore, destro o sinistro.
  • Infine, scegli l'Allineamento per determinare se il pulsante dovrà essere allineato a destra/in alto, al centro o a sinistra/in basso sul lato dello schermo a cui è ancorato.
#tip - Se lo Sticky Button è posizionato sul lato desto o sinistro della finestra del Browser, in automatico i contenuti vengono allineati verticalmente. 
  • Puoi fare in modo che lo Sticky Button venga visualizzato sulla pagina con un'Animazione e dopo un Ritardo iniziale di cui puoi stabilire la durata: trovi queste voci nel riquadro Opzioni. 


Come abbiamo detto, in genere gli Sticky Button invitano gli utenti di compiere un'azione.

  • Sempre nel riquadro Opzioni trovi la voce Collegamento: clicca sul pulsante  e usa la finestra richiamata per scegliere l'Azione da associare allo Sticky Button che stai costruendo.   


Impaziente di usarlo nelle pagine del tuo sito? Installa subito l’Oggetto Sticky Button


Non hai Crediti a sufficienza per acquistare questo Oggetto? Vedi tutti i pacchetti di Crediti