Proprietà e stili del messaggio on site

Stili messaggio on site

Nei messaggi on site, la finestra degli stili sarà organizzata in quattro sezioni:

• Sezione Layout
• Sezione Testo
• Sezione Form
• Sezione Avanzato

Sezione Layout

Configuri le opzioni relative al layout grafico generale dell'oggetto.

• Layout
  • Tipo messaggio:
    definisci il tipo di messaggio on site che desideri creare tra Popup, Pagina intera, Toast, Banner fisso, Barra laterale, Incorporato e HTML Custom;
  • Larghezza:
    modifica la larghezza del messaggio; la scelta è tra S, M, L, XL o larghezza personalizzata.
    Scegliendo l'ultima opzione potrai inserire la larghezza fissa in pixel. In tutti gli altri casi, l'altezza si adatterà automaticamente in base al numero di oggetti presenti nell'area di lavoro.
  • Effetto di ingresso:
    Nessuna, Fade, Zoom o Bounce.

• Overlay
  • Colore overlay:
    Colore applicato all'overlay;
  • Opacità (%):
    Percentuale di opacità applicata all'oggetto.

• Sfondo
  • Colore sfondo:
    modifica il colore di sfondo del messaggio on site;

• Immagini
  Impostazioni relative alle immagini presenti nel messaggio on site. Per visualizzare l'immagine solo su Desktop, deseleziona entrambe le checkbox relative alle impostazioni mobile.
  • Mostra immagine a sinistra (Desktop)
    Su Desktop, mostrerà l'immagine a sinistra del testo;
  • Mostra immagine a destra (Desktop)
    Su Desktop, mostrerà l'immagine a destra del testo;
  • Mostra immagine in alto (Mobile)
    Su Mobile, mostrerà l'immagine prima del testo;
  • Mostra immagine in basso (Mobile)
    Su mobile, mostrerà l'immagine dopo il testo.

• Chiusura
  • Mostra pulsante chiudi:
    aggiunge l'icona di chiusura all'interno del messaggio on site.

• Spaziatura
  • Margine interno laterale:
    Imposta un margine interno laterale a seconda della taglia scelta;
  • Margine interno verticale:
    Imposta un margine interno verticale a seconda della taglia scelta;
  • Altezza minima (non presente in caso di messaggio di tipo "Pagina intera"):
    Campo per definire l'altezza minima in pixel che deve avere il messaggio on site;
  • Allineamento del contenuto:
    Imposta l'allineamento del contenuto in alto o al centro.

• Bordo
  • Spessore bordo:
    al box viene applicato un bordo dello spessore scelto;
  • Raggio angoli:
    arrotonda l'angolo del pop-up a seconda della taglia scelta;
  • Ombra:
    questa opzione aggiunge o rimuove un effetto di ombreggiatura al pop-up;

Sezione Testo

In questa sezione puoi impostare e modificare le opzioni relative ai testi presenti all'interno del messaggio on site.

• Testo principale
  • Dimenzione testo (px):
    Personalizza la dimensione del testo principale, tutte le altre dimensioni e spaziature verranno automaticamente adattate al nuovo formato.
  • Colore testo:
    Imposta il colore del testo;
  • Gestione font:
    Puoi scegliere di ereditare il font dal sito o personalizzarlo utilizzando un font Google; selezionando l'opzione "Personalizza", compariranno le voci "Font Principale" e "Font alternativo".
  • Font Principale:
    Scegli un font Google principale tra quelli disponibili dal menu a tendina;
  • Font alternativo:
    Il font alternativo viene usato se non hai attivato il font di Google o se quest'ultimo impiega troppo tempo a caricarsi o non è corretto.
  • Interlinea:
    Imposta l'interlinea del testo.

• Titoli
  • Font titoli:
    Scegli un font Google principale tra quelli disponibili dal menu a tendina;
  • Font alternativo:
    Il font alternativo viene usato se non hai attivato il font di Google o se quest'ultimo impiega troppo tempo a caricarsi o non è corretto.
  • Interlinea:
    Imposta l'interlinea del titolo.
  • In grassetto:
    Attiva questa opzione se vuoi visualizzare i titoli in grassetto.

• Link
  • Colore diverso dal testo:
    Attivando questa opzione comparirà il campo "Colore link" per definire il colore con il quale compariranno i link;
  • Colore link:
    Imposta il colore dei link del messaggio on site;
  • Sottolinea:
    Attiva questa opzione se vuoi visualizzare i link sottolineati.
  • In grassetto:
    Attiva questa opzione se vuoi visualizzare i link in grassetto.

Sezione Form

In questa sezione puoi configurare le opzioni relative ai campi form del messaggio on site.

• Pulsanti
  • Colore primario:
    Il colore primario viene usato come sfondo e bordo per il pulsante standard, mentre viene usato per il testo e il bordo del pulsante secondario.
  • Colore secondario:
    Il colore secondario viene usato come testo per il pulsante standard, mentre viene usato come sfondo del pulsante secondario.
  • Forma:
    Squadrato, Arrotondato o Pillola
  • Spessore carattere:
    Normale, Medio o Grassetto
  • Bordo pulsanti secondario:
    Definisce la dimensione del bordo visibile sui pulsanti di tipo secondario con colori intervertiti.

• Campi
  • Aspetto:
    Standard, Sfondo trasparente o Moderno.
  • Dimensione campi:
    XS, S, M o L.
  • Testo domanda:
    colore del testo della domanda.
  • Testo campo:
    Colore del testo dei campi.
  • Sfondo campo:
    Colore dello sfondo dei campi.
  • Bordo:
    Colore del bordo dei campi.
  • Focus:
    Colore del campo quando si fa focus su di esso.

• Validazione
  • Asterisco (*) campi obbligatori:
    Checkbox che attiva la comparsa dell'asterisco nei campi del form definiti come obbligatori.
  • Colore errori:
    Colore del testo degli errori.

Sezione Avanzato

Questa sezione è pensata per gli utenti più esperti che vogliono modificare il codice del messaggio on site.

• CSS personalizzato:
  Quest'area permette di aggiungere codice CSS personalizzato. Attenzione: aggiungere codice CSS può danneggiarne il design, ti consigliamo di prestare la massima attenzione.
• Codice personalizzato:
  Quest'area ti permette di aggiungere codice HTML personalizzato. Non è ammesso l'uso di codice Giotto.
  Nota: il codice non viene eseguito in modalità design e anteprima.
• Sblocca scroll designer:
  Attiva lo scroll manuale all’interno del popup nel designer. Potrebbe causare problemi nella visualizzazione di alcuni menu contestuali.