Stili di messaggi on site e moduli di iscrizione

Nel designer di messaggi on site e moduli di iscrizione, la finestra degli stili è organizzata in quattro sezioni:

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

Sezione Layout

In questa sezione configuri l'aspetto generale del messaggio on site o del modulo di iscrizione, scegliendo il modello di partenza e personalizzandone layout, dimensioni e comportamento.

• Layout
  • Tipo messaggio:
    definisci il tipo di messaggio on site o modulo di iscrizione scegliendo tra Popup, Pagina intera, Toast, Banner fisso, Barra laterale, Incorporato e HTML Custom; Leggi il paragrafo dedicato per saperne di più.
  • Larghezza:
    modifica la larghezza del messaggio/modulo; 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/modulo;

• Immagini
  Impostazioni relative alle immagini presenti nel messaggio/modulo. 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/modulo.

• 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/modulo "Pagina intera"):
    Campo per definire l'altezza minima in pixel che deve avere il messaggio/modulo;
  • 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;

Tipi di messaggio o modulo

I tipi di messaggio corrispondono ai modelli disponibili durante la creazione di un messaggio on site o di un modulo di iscrizione. Definiscono come il contenuto viene mostrato sul sito e puoi cambiarli in qualsiasi momento dal campo Tipo messaggio nella sezione Stili > Layout.

Popup

Mostra il contenuto in una finestra che si sovrappone alla pagina del sito. È il modello più adatto per attirare l'attenzione su promozioni, iscrizioni, avvisi e call to action.

Pagina intera

Mostra il contenuto a schermo intero, oscurando la pagina sottostante. Può essere composto da una o più pagine ed è indicato quando vuoi concentrare tutta l'attenzione del visitatore sul messaggio.

Toast

Visualizza un riquadro laterale che rimane visibile durante la navigazione, senza interrompere l'esperienza del visitatore.

Banner fisso

Mostra un banner in una posizione fissa della pagina. È ideale per comunicazioni persistenti, come promozioni, avvisi o informazioni di servizio.

Barra laterale

Visualizza il contenuto all'interno di una barra laterale del sito, mantenendolo sempre accessibile durante la navigazione.

Form incorporato

Inserisce il contenuto direttamente all'interno della pagina del sito. È utile per integrare un form o una call to action nel normale flusso della pagina.

HTML Custom

Permette di creare un layout completamente personalizzato utilizzando codice HTML. È consigliato agli utenti esperti che hanno familiarità con lo sviluppo web.

Sezione Testo

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

• 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/modulo;
  • 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 o modulo di iscrizione.

• 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 o modulo di iscrizione.

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