Andremo a spiegare il funzionamento di ogni singola chiave di questo template.
Per la configurazione iniziale 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.
OPZIONI > Pulsante
Dimensione testo pulsante apri messaggio (in px) | Colore testo rollover pulsante apri messaggio | Colore sfondo rollover pulsante apri messaggio | Colore bordo rollover pulsante apri messaggio | Colore bordo pulsante apri messaggio | Colore testo pulsante apri messaggio | Dimensione bordo pulsante apri messaggio (in px) | Colore di sfondo pulsante apri messaggio personalizziamo colori e dimensioni del pulsante apri messaggio che compare quando è chiudo il warning principale.
LAYOUT > Contenuto recommendation
(solo nel template “NEXT FLASH SALES RECOMMENDATIONS”)
Mostra REC possiamo decidere se nascondere oppure no il carosello con le raccomandazioni
Mostra REC prima del contenuto se impostato a “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 a 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 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.
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.
Posizione pulsante apri messaggio impostiamo la posizione del pulsante “apri messaggio” quando il warning è chiuso.
Distanza dal bordo pulsante apri messaggio (in px) è la distanza del pulsante apri messaggio dal bordo della schermata.
Testo pulsante apri messaggio inseriamo il testo che vogliamo visualizzare sul pulsante apri messaggio.
Nascondi icona pulsante apri messaggio possiamo mostrare o nascondere l’icona sul pulsante apri messaggio.
Icona pulsante apri messaggio selezioniamo l’icona da mostrare sul pulsante apri messaggio.
FORM E PULSANTI > Pulsante
Dimensione bordo pulsanti | Colore bordo pulsanti colore e spessore bordo 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
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 formimpostiamo 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 FLASH SALES RECOMMENDATIONS”
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 la paginazione del carosello.
Padding orizzontale controlli carousel (in px) distanza laterale tra l’icona e il bordo delle frecce sinistra destra.
Dimensione icona controlli carousel (in px) dimensione icone frecce destra sinistra.
Padding verticale controlli carousel (in px) distanza tra l’icona e il bordo superiore ed inferiore delle frecce sinistra destra.
Spessore bordo controlli carousel (in px) spessore del bordo dei pulsanti frecce destra e sinistra.
Angoli arrotondati controlli carousel (in px) angoli arrotondati dei 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.
Nascondi titolo prima della REC possiamo mostrare o nascondere il titolo prima del carosello
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.
COUNTDOWN E COUPON > Altro
Attesa per reset scadenza coupon dopo se la scadenza del coupon e impostata a si, questo è il tempo in cui la scadenza forzata del coupon riparte.
Tempo di scadenza forzato coupon è il tempo di scadenza forzato che viene mostrato quando l’utente visualizza il messaggio.
Data Scadenza coupon viene mostrata la data di scadenza (alla mezzanotte del giorno indicato), quando la scadenza del coupon non è forzata.
Forza scadenza coupon se impostata a si, la scadenza del coupon viene impostata con i parametri configurati prima, esempio se impostiamo questo parametro a “si” e “Tempo di scadenza forzato coupon” a 15 minuti, l’utente appena visualizzerà il countdown vedrà 15:00:00 ed una volta arrivato a zero il countdown ripartirà dopo il tempo indicato nella chiave “Attesa per reset scadenza coupon dopo se la scadenza”.
Coupon inseriamo qui il codice coupon da visualizzare.
Nascondere blocco countdown | Nascondere pulsante copia coupon | Nascondere Countdown possiamo personalizzare gli elementi da visualizzare.
Mostra countdown su pulsante apri messaggio possiamo decidere di mostrare il countdown anche nel pulsante apri messaggio.
COUNTDOWN E COUPON > Posizione e dimensioni
Label Countdown Secondi | Label Countdown Minuti | Label Countdown Ore | Label Countdown Giorni impostiamo il testo scritto sopra ogni elemento del countdown.
Dimensione numeri countdown (in px) | Dimensione linea separazione numeri countdown (in px) | Colore linea separazione numeri countdown | Colore numeri countdown | Colore sfondo numeri countdown | Colore separatore ora | Dimensioni numeri countdown mobile (in px) personalizziamo i riquadri dei numeri, dimensioni e colori.
Colore di sfondo box countdown impostiamo un colore di sfondo per il box del countdown.
Dimensione testo pulsante coupon (in px) | Testo pulsante copia coupon | Icona pulsante copia coupon | Nascondi icona su pulsante copia coupon personalizziamo il pulsante copia coupon, dimensioni testo, icona mentre i colori verranno utilizzati quelli dei pulsanti configurati nelle altre chiavi.
Testo prima del Countdown possiamo inserire un testo da visualizzare prima del countdown.
Margine interno box countdown (in px) è la distanza del contenuto dal margine esterno del box countdown.
Thanks for contributing!