Andremo a spiegare il funzionamento di ogni singola chiave di questo template.
Per la configurazione Iniziali del Behavioural Message si rimanda all’articolo dedicato come configurare un behavioural message.

OPZIONI > Altro
Mostra al caricamento messaggio subito visibile al caricamento.
Mostra dopo lo scroll (in px) indica di quanti px dobbiamo scrollare dall’inizio della pagina per vedere il messaggio.
Tempo di inattività dalla chiusura mostra per quanto tempo non devo mostrare nuovamente il messaggio se questo viene chiuso.
Mostra solo dopo x secondi impostiamo un ritardo nella visualizzazione.
Animazione iniziale (fadein/fadeout) possiamo decidere se applicare un effetto all’apertura e alla chiusura del messaggio.
Durata warning (in secondi) possiamo impostare un tempo massimo per cui il messaggio rimarrà visibile (solo se la chiave Warning visibile fino alla chiusura impostato a no).
Warning visibile fino la chiusura possiamo fare in modo che il messaggio rimanga visibile fino a che l’utente non lo chiude.

LAYOUT > Contenuto recommendation
(presente solo nel template “Next Warning Carousel”)
Mostra REC possiamo decidere se nascondere oppure no il carosello con le raccomandazioni
Mostra REC prima del contenuto se impostato su “si” il carosello viene inserito prima del contenuto, altrimenti viene inserito dopo.
Titolo REC possiamo inserire il testo del titolo visualizzato prima del carosello.
LAYOUT > Testo messaggio
Dimensione testo (in px) | Dimensione titoli (in px) | Colore del testo | Colore titolo possiamo impostare colore e dimensione per titoli e testo.
Contenuto di testo piccolo editor visuale dal quale possiamo inserire il testo da visualizzare nel messaggio.
Immagine laterale possiamo inserire una immagine laterale tramite la media gallery di Blendee.
Visualizza immagine laterale possiamo decidere se visualizzare oppure no l’immagine laterale.
Immagine laterale a sinistra se impostato su “si” l’immagine sarà inserita a sinistra, altrimenti andrà a destra.
Larghezza immagine laterale (in px) possiamo impostare la larghezza massima dell’immagine laterale.
Colore link possiamo impostare un colore per i link all’interno del contenuto di testo.
Target pulsante aggiuntivo impostiamo il target (dove viene aperto il link) del pulsante aggiuntivo.
Testo pulsante aggiuntivo possiamo inserire il testo interno del pulsante (colori e altro vengono presi da quelli che impostiamo nelle altre chiavi).
Link pulsante aggiuntivo inseriamo l’URL al quale deve rimandare il pulsante.
Nascondi pulsante aggiuntivo possiamo decidere se nascondere il pulsante aggiuntivo.
Video Iframe nel caso del warning con video possiamo inserire l’iframe del video da visualizzare.
LAYOUT > Altro
Larghezza massima box (in px) possiamo impostare una larghezza massima del messaggio.
Forma sfondo animato possiamo inserire una forma CSS, vi rimandiamo al sito, per poter generare le vostre forme personalizzate.
Mostrare overlay esterno possiamo decidere se mostrare oppure no l’overlay esterno.
Overlay esterno animato possiamo decidere se visualizzare le forme animate.
Opacità overlay esterno (in %) accetta valori compresi tra 1 e 100 e imposta l’opcità dell’overlay esterno.
Opacità forma sfondo animato (in %) imposta l’opacità delle forme esterne animate.
Icona chiusura box possiamo selezionare l’icona da utilizzare per il pulsante di chiusura del messaggio.
zindex impostiamo lo z-index per posizionare il messaggio sopra gli elementi del sito.
LAYOUT > Posizione e dimensione
Distanza del box dai lati (in px) impostare una distanza dai bordi minima che il messaggio deve rispettare.
Posizione box compare un select dove possiamo impostare la posizione del nostro messaggio.
Mostra ombra esterna possiamo attivare o disattivare l’ombra esterna.
Colore overlay esterno imposta il colore di sfondo dell’overlay esterno.
Colore forma sfondo animato imposta il colore delle forme esterne animate.
Mostra ombra esterna possiamo attivare o disattivare l’ombra esterna.
Colore icona chiusura per impostare il colore icona di chiusura del messaggio.
Colore bordo esterno colore bordo esterno del messaggio.
Larghezza bordo (in px) spessore bordo esterno del messaggio.
Colore di sfondo per impostare il colore di sfondo di tutto il messaggio.
Posizione right icona chiusura (in px) | Posizione top icona chiusura (in px) possiamo posizionare l’icona di chiusura, possiamo inserire anche valori negativi.
Padding contenuto (in px) distanza del contenuto dai bordi del messaggio.
Angoli stondati (in px) per impostare gli angoli arrotondati del messaggio.

FORM E PULSANTI > Pulsante
Dimensione bordo pulsanti | Colore bordo pulsanti colore e spessore del bordo dei pulsanti.
Colore bordo pulsanti rollover imposta il colore dei bordi al passaggio del mouse.
Angoli arrotondati pulsanti (in px) distanza tra il contenuto e il bordo del pulsante.
Dimensioni testo pulsanti (in px)
Sfondo pulsanti rollover colore di sfondo al passaggio del mouse.
Sfondo pulsanti colore di sfondo dei pulsanti.
Colore testo pulsati rollover colore del testo al passaggio del mouse.
Colore testo pulsati colore testo pulsanti.
FORM E PULSANTI > posizione e dimensioni
(non presente nel template con video)
Nascondi form possiamo decidere se nascondere oppure no il form.
Colore sfondo input form imposta il colore degli input del form.
Colore bordo input form imposta il colore del bordo per gli input del form.
Colore checkbox/radio form imposta il colore con cui evidenziamo checkbox e radio selezionati.
Colore label form colore del testo sulle label del form.
Colore di sfondo del form impostiamo il colore di sfondo del form.
Angoli arrotondati form (in px) se lo sfondo del form è attivo possiamo anche impostare gli angoli arrotondati.
Padding form (in px se sfondo attivo) se lo sfondo è attivo, possiamo impostare un margine tra il bordo del form e i contenuti.
Mostrare sfondo form possiamo attivare o disattivare lo sfondo del form (se disattivato il padding sarà 0).
Chiavi presenti solo nel template “Next Warning Carousel”

CAROUSEL > Posizione e dimensioni

Colore sfondo bullet carousel attivo | Colore bordo bullet carousel attivo | Colore bordo bullet carousel | Colore di sfondo bullet carousel rollover | Colore bordo bullet carousel rollover personalizziamo i colori dei bullet usati per la paginazione del carosello.
Margine prima e dopo il carousel (in px) impostiamo un margine prima e dopo il carosello.
Controlli carousel centrali mette pulsanti e bullet tutti centrali.
Controlli carousel raggruppati a sinistra (solo se centrali impostati a no) mette tutti i controlli raggruppati a sinistra.
Carousel padding tra gli elementi (in px) distanza tra una card e l’altra.
Freccia destra carousel icona per la freccia sinistra.
Freccia sinistra carousel icona per la freccia destra.
Colore di sfondo bullet carousel personalizziamo i colori dei bullet usati per l’impaginazione del carosello.
Padding orizzontale controlli carousel (in px) distanza laterale tra l’icona e il bordo delle frecce “sinistra” e “destra”.
Dimensione icona controlli carousel (in px) dimensione icone frecce destra e sinistra.
Padding verticale controlli carousel (in px) distanza tra l’icona e il bordo superiore ed inferiore delle frecce sinistra e destra.
Spessore bordo controlli carousel (in px) spessore bordo pulsanti frecce destra e sinistra.
Angoli arrotondati controlli carousel (in px) angoli arrotondati pulsanti frecce destra e sinistra.
Controlli carousel ai lati inserisce le frecce ai lati del carosello una a sinistra e una a destra, centrate verticalmente al contenuto.
Dimensioni bullet carousel (in px) impostiamo la dimensione dei bullet di paginazione.
Dimensione bordo inferiore card (in px) | Dimensione bordo superiore card (in px) | Colore bordo card rollover | Colore sfondo card rollover | Colore bordo card | Colore sfondo card | Padding verticale card (in px) | Padding orizzontale card (in px) | Dimensione bordo laterale sinistro card (in px) | Dimensione bordo laterale sinistro card (in px) personalizzazioni delle singole card.
CAROUSEL > Altro
Attivare drag mouse carousel possiamo attivare o disattivare il drag del carosello con il mouse.
Nascondi nav carousel nasconde i bullet di paginazione.
Nascondi controlli carousel nasconde le frecce destra sinistra.
Carousel autoplay imposta l’autoplay del carosello.
Carousel autoplay pausa rollover se impostato a “si”, quando il mouse sosta nell’area del carosello, questo non scorre più automaticamente.
Carousel timeout animazione imposta il tempo di animazione per l’autoplay.
Animazione immagine card attiva o disattiva lo zoom dell’immagine quando il mouse passa sopra la card.
CAROUSEL > Contenuto recommendation
Ordine nome prodotto | Ordine brand | Ordine immagine | Ordine descrizione breve | Ordine prezzo possiamo decidere l’ordine di ogni elemento più alto è il valore e prima verrà inserito.
Mostrare simbolo valuta prima del prezzo se impostato a “si” mostra la valuta prima del prezzo, altrimenti la inserisce dopo.
Dimensione nome brand (in px) | Colore nome brand | Colore prezzo scontato | Colore prezzo originale | Colore descrizione prodotto | Colore nome prodotto | Dimensione descrizione prodotto (in px) | Dimensione nome prodotto (in px) | Altezza massima immagine carosello (in px) | Dimensione barra prezzo originale (in px) | Colore barra prezzo originale | Dimensione prezzo scontato (in px) | Dimensione prezzo originale (in px) impostiamo colori e dimensioni del contenuto di testo delle card.

Nascondi testo aggiuntivo label sconto | Label sconto a sinistra | Label sconto in alto | Angoli arrotondati label sconto | Dimensione testo label sconto (in px) | Colore label sconto | Label sconto distanza verticale (in px) | Label sconto distanza orizzontale (in px) | Label sconto padding interno (in px) | Testo aggiuntivo label sconto | Sfondo label sconto questi parametri vanno a personalizzare la label sconto.
Nascondi label sconto immagine | Nascondi pulsante REC | Nascondi prezzi REC | Nascondi immagine REC | Nascondi descrizione REC | Nascondi nome REC | Nascondi brand REC possiamo nascondere gli elementi della card che vogliamo.
Barra inclinata prezzo originale se impostata a “si” la barra sul prezzo scontato sarà obliqua altrimenti sarà dritta.
CAROUSEL > Pulsante
Pulsante a tutta larghezza imposta il pulsante della card per tutta la larghezza della card.
Testo pulsante inserire il testo per i pulsanti delle card.
Padding sopra/sotto pulsante (in px) imposta il margine superiore/inferiore tra il contenuto e il bordo del pulsante.
Padding laterale pulsante (in px) imposta il margine sinistra/destra tra il contenuto e il bordo del pulsante.
Thanks for contributing!