3. PASSO: Finestre pop-up

Il terzo passaggio è dedicato alle finestre pop-up. Creale in base all’immagine della tua azienda. I colori devono essere in contrasto con quelli dello sfondo del tuo sito web, solo così i visitatori le noteranno subito. Per saperne di più sul design, visita il nostro blog.

Istruzioni per creare le finestre pop-up

Prima di cominciare a creare le finestre pop-up, devi disporre di determinati campi di inserzione (campi su misura – email, nome, cognome, sesso, …) da inserire nella finestra pop-up. Per creare questi campi vai su Destinatari > Campi su misura.  Per saperne di più su come creare nuovi Campi su destinatari, clicca qui.

Ora puoi cominciare a creare il modulo, mostrato in basso:

1. Nel menu principale in alto scegli Moduli > FINESTRE POP-UP > Finestre pop-up

2. Nel menu funzioni in alto a destra clicca su Crea nuovo per creare una nuova finestra pop-up.

Si apre una maschera di input. Nella colonna a destra modifica le impostazioni e la forma della finestra pop-up, nella colonna a sinistra invece è visibile l’anteprima. Cliccando sull’icona della puntina in alto a destra, l’anteprima ti seguirà durante le modifiche.

 

CAMPI DI INSERZIONE NEL POP-UP

Il modulo predefinito del pop-up contiene già il campo per l’indirizzo email. Per aggiungere altri campi di inserzione (campi su misura), selezionali cliccando sotto l’anteprima. Per saperne di più su come creare un nuovo campo di inserzione, clicca qui.

È possibile modificare l’ordine dei campi nell’anteprima. Posizionando il mouse sul campo, appaiono le frecce per lo spostamento in alto o in basso. Cliccando sul segno X il campo viene rimosso.

Il nome del tag, la scritta nel campo o la descrizione sotto il campo possono essere modificati con un click sul segno per la modifica, posizionando il mouse sul campo.

Appare una nuova finestra pop-up, dove puoi modificare il testo e per confermare le modifiche clicca Salva. In questo modo è anche possibile tradurre il modulo in qualsiasi lingua.

 

Se ad alcuni campi su misura sono state impostate le condizioni di visualizzazione, ovvero il valore predefinito, sui campi di inserzione apparirà un avviso (quando il mouse viene posizionato sul campo di inserzione nel pop-up). Anche i campi di inserzione che vengono visualizzati in base alle condizioni, devono essere inseriti nel pop-up.

Il valore predefinito del campo sarà visibile solo quando il pop-up verrà visualizzato sul sito web. Il valore può essere modificato nelle impostazioni dei campi su misura. Se al campo è stato determinato un valore predefinito, le modifiche della scritta nel campo non saranno visibili.

 

IMPOSTAZIONI DELLA FINESTRA POP-UP

  1. Titolo
    Inserisci il titolo o il nome della finestra pop-up, che servirà soprattutto per la sua identificazione. Questo dato è obbligatorio.
  2. Commento
    Inserisci un commento/descrizione a scelta, che sarà visibile anche nella lista di tutte le finestre pop-up.
  3. Tipo di rinvio e Valore di ritardo della finestra pop-up
    Scegli il tipo di ritardo dopo il quale apparirà il pop-up e inserisci nel campo in basso il valore desiderato:

    • Ritardo temporale – il pop-up appare dopo un determinato periodo di tempo. Nel campo in basso inserisci il numero di secondi, senza unità.
    • Ritardo per pagine – il pop-up appare dopo che l’utente visita un determinato numero di pagine. Inserisci il numero di pagine senza unità.
    • Ritardo pagina – il pop-up appare dopo che l’utente visita una determinata percentuale del sito web (50%). Inserisci nel campo in basso il numero, senza unità.
  4. Posizione del pop-up
    Specifica il tipo di pop-up. La finestra può apparire al centro dello schermo (pop-up) o in modo non pop-up, di lato (pop-out).
  5. N° di giorni all’apparizione
    Determina il numero dei giorni dopo i quali all’utente (se chiude il pop-up o si iscrive) appare nuovamente la finestra pop-up. Se i giorni sono già stati impostati globalmente (nelle impostazione del sito web), questi saranno visibili qui.
  6. Mostra il pop-up anche agli utenti che arrivano sul sito web tramite Newsletter
    Se non desideri che i pop-up appaiano ai tuoi destinatari quando questi visitano il tuo sito web, seleziona l’opzione NO. Questa impostazione ti permette di non richiamare nuovamente i tuoi destinatari ad iscriversi alla mailing list.
  7. Reindirizza dopo l’iscrizione
    Qui puoi scegliere se reindirizzare il destinatario dopo l’iscrizione sulla Pagina di ringraziamento o su un altro indirizzo URL a tua scelta.

    • Se scegli la Pagina di ringraziamento, puoi modificarne anche il testo. Inserisci nei campi il titolo della pagina di ringraziamento, il testo che verrà visualizzato sotto il titolo e il testo del pulsante. Il pulsante contiene il collegamento alla pagina del pop-up. Non è possibile modificare questo collegamento.
    • Se scegli un altro URL inserisci il collegamento desiderato.
  8. All’iscrizione invia una notifica a
    Qui puoi inserire l’indirizzo email sul quale ricevere le notifiche sulle nuove iscrizioni alla lista, quindi sul nuovo destinatario. Se non desideri ricevere le notifiche, lascia il campo vuoto.

 

LA FORMA DELLA FINESTRA POP-UP

  1. Raggio di curvatura della finestra
    Con l’aiuto del casella a discesa scegli il raggio di curvatura desiderato del pop-up.
  2. Larghezza della finestra
    Con l’aiuto della casella a discesa scegli una delle quattro dimensioni del pop-up.
  3. Distanza degli elementi dal bordo della finestra
    Con l’aiuto della casella a discesa scegli la distanza in pixel (px) degli elementi dal bordo interno del pop-up.
  4. Spazio tra gli elementi
    Con l’aiuto della casella a discesa scegli la distanza in pixel (px) tra gli elementi.
  5. Colore dello sfondo
    Inserisci il colore nella casella (in valori esadecimali) o sceglilo nella finestra di dialogo colori, cliccando sul punto desiderato della tavolozza, e clicca OK.
    Trasparenza dello sfondo del modulo
    È possibile impostare anche la trasparenza del colore dello sfondo. Se desideri che la finestra assuma il colore e il motivo dello sfondo del sito web, imposta la trasparenza del colore a zero.
  6. Colore dell’ombra della finestra
    Inserisci il colore nella casella (in valori esadecimali) o sceglilo nella finestra di dialogo colori, cliccando sul punto desiderato della tavolozza, e clicca OK.
    Trasparenza dell’ombra della finestra
    È possibile impostare anche la trasparenza del colore dell’ombra. Se desideri che l’ombra della finestra assuma il colore e il motivo dello sfondo del sito web, imposta la trasparenza del colore a zero.

CARATTERISTICHE DELL’IMMAGINE

L’immagine può essere inserita nel pop-up nello stesso modo dei campi di inserzione. Sotto l’anteprima clicca sulla casella Immagine del pop-up.

  1. URL dell’immagine del modulo
    Scegli l’immagine. Cliccando sul pulsante Scegli si apre il Browser delle immagini, dove puoi caricare un’immagine nuova, sceglierne una delle quelle già caricate o inserire un’immagine come indirizzo URL.
  2. Dimensione dell’immagine
    Con l’aiuto della casella a discesa scegli le dimensioni dell’immagine per poterla rimpicciolire o ingrandire.
  3. Posizione dell’immagine
    Con l’aiuto della casella a discesa scegli la posizione orizzontale dell’immagine (sinistra, centro, destra). Se desideri modificare la posizione verticale dell’immagine, posiziona il mouse sull’immagine nell’anteprima e clicca sulla freccia su o giù, o sulla X per eliminarla.

CARATTERISTICHE DEL CONTENUTO

Al pop-up è possibile aggiungere due scritte. Con la Scritta 1, ad esempio, puoi comunicare lo scopo dell’iscrizione («Iscriviti per ricevere le news settimanali»), con la Scritta 2 invece puoi dare agli utenti la possibilità di annullare l’iscrizione in modo semplice. («Annullare l’iscrizione è facile!»).

Inserisci la scritta nella finestra pop-up nello stesso modo dei campi di inserzione. Sotto l’anteprima clicca sulla casella Scritta 1 o Scritta 2.

Se nella finestra pop-up hai aggiunto la Scritta 1 (o la Scritta 2), modificane ora il contenuto e la forma:

  1. Inserisci il testo
    Nella casella di testo inserisci un testo a tua scelta. Le modifiche sono subito visibili nell’anteprima.
  2. Allineamento
    Con l’aiuto della casella a discesa scegli l’allineamento orizzontale della scritta (a sinistra, centratura, giustificazione). Se desideri modificare la posizione verticale della scritta, posiziona il mouse sulla scritta nell’anteprima e clicca sulla freccia su o giù, o sulla X per eliminarla.
  3. Carattere
    Con l’aiuto della casella a discesa scegli il tipo di carattere della scritta.
  4. Dimensione
    Con l’aiuto della casella a discesa scegli la dimensione dei caratteri della scritta (piccolo, normale, grande, molto grande).
  5. Colore
    Inserisci il colore nella casella (in valori esadecimali) o sceglilo nella finestra di dialogo colori, cliccando sul punto desiderato della tavolozza, e clicca OK.

CARATTERISTICHE DEI CAMPI

Qui puoi modificare l’aspetto dei campi di inserzione, impostando:

  1. Raggio di curvatura dei campi
    Con l’aiuto della casella a discesa scegli il raggio di curvatura del bordo dei campi.
  2. Colore del carattere dei campi su misura
    Questa impostazione vale per i campi su misura speciali, cioè i tipi di campi, come ad esempio i Pulsanti radio, la Casella di conferma e l’Iscrizione alle liste. Così puoi adattare il colore del carattere accanto ai pulsanti per metterli in contrasto con il colore dello sfondo.

CARATTERISTICHE DEI TAG

Qui puoi modificare l’aspetto dei tag dei campi di inserzione, impostando:

  1. Template del modulo
    Con l’aiuto della casella a discesa puoi scegliere il template orizzontale (il tag è accanto al campo), il template verticale (il tag è sopra il campo) o un template senza tag.
  2. Allineamento dei tag
    Con l’aiuto della casella a discesa scegli l’allineamento dei tag.
  3. Tipo di carattere
    Con l’aiuto della casella a discesa scegli il tipo di carattere dei tag.
  4. Dimensione del carattere
    Con l’aiuto della casella a discesa scegli le dimensioni del carattere dei tag.
  5. Colore del carattere
    Inserisci il colore nella casella (in valori esadecimali) o sceglilo nella finestra di dialogo colori, cliccando sul punto desiderato della tavolozza, e clicca OK.

CARATTERISTICHE DEL PULSANTE DI CONFERMA

  1. Testo del pulsante
    Inserisci il testo che comparirà nel pulsante (massimo 32 caratteri).
  2. Tipo di carattere
    Con l’aiuto della casella a discesa scegli il tipo di carattere del pulsante.
  3. Dimensione del carattere
    Con l’aiuto della casella a discesa scegli le dimensioni di carattere del pulsante.
  4. Colore del carattere
    Inserisci il colore nella casella (in valori esadecimali) o sceglilo nella finestra di dialogo colori, cliccando sul punto desiderato della tavolozza, e clicca OK.
  5. Colore dello sfondo
    Inserisci il colore nella casella (in valori esadecimali) o sceglilo nella finestra di dialogo colori, cliccando sul punto desiderato della tavolozza, e clicca OK.
  6. Posizione
    Con l’aiuto della casella a discesa allinea il pulsante al centro, a sinistra o a destra della finestra pop-up.
  7. Raggio di curvatura
    Con l’aiuto della casella a discesa scegli il raggio di curvatura del pulsante in pixel.
  8. Classe di adattamento
    Qui puoi inserire il HTML della classe del pulsante (Class), in quanto desideri dare al tuo pulsante uno stile proprio.

CARATTERISTICHE DEL PULSANTE CHIUDI (X)

  1. Dimensioni del pulsante Chiudi (X)
    Con l’aiuto della casella a discesa scegli le dimensioni del pulsante Chiudi.
  2. Colore del pulsante Chiudi (X)
    Inserisci il colore nella casella (in valori esadecimali) o sceglilo nella finestra di dialogo colori, cliccando sul punto desiderato della tavolozza, e clicca OK.

 

3. Salva la finestra pop-up cliccando su Salva e chiudi nel menu funzioni in alto a destra.

 

Ora che hai creato la finestra pop-up, sei pronto per il prossimo e ultimo passo. Collega la finestra pop-up con la sottopagina. Determina quindi la corretta visualizzazione della finestra pop-up.

4. PASSO: Regole dei pop-up >>>