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.
LAYOUT > Altro
Zindex box impostiamo uno z-index per posizionare il messaggio al di sopra del nostro sito web.
Posizione box possiamo impostare una posizione di partenza del box message.
Nascondi icona su box titolo possiamo nascondere l’icona all’interno del testo sul pulsante di apertura.
Animazione testo sul box titolo possiamo attivare o disattivare l’animazione sul testo iniziale (effetto sul testo alla visualizzazione del pulsante).
Box movibile se impostato a “si” il box sarà trascinabile, se impostato a no il box sarà fisso nella sua posizione di paertenza.
Velocità animazione (in millisecondi) è la velocità con cui anima la scritta alla visualizzazione del box, più alto sarà il valore e più lentamente sarà eseguita l’animazione.
Codice CSS aggiuntivo possiamo inserire codice CSS personalizzato ATTENZIONE inserire codice CSS valido.
LAYOUT > Posizione e dimensioni
Colore ombra esterna impostiamo il colore della ombra esterna.
Larghezza immagine laterale (in px) | Altezza minima immagine laterale (in px) impostiamo le dimensioni della immagine laterale.
Distanza dai lati (in px) la distanza di partenza del box sinistro o destro (a seconda della posizione) rispetto i limiti della viewport.
Padding interno (in px) è il margine tra il bordo del box e i contenuti.
Colore sfondo box titolo | Colore icona titolo rollover | Colore sfondo box titolo rollover | Colore icona chiusura impostiamo i colori del pulsante di apertura (i colori e la dimensione del testo saranno configurati nel gruppo di opzioni successivo).
Colore di sfondo | Colore bordo esterno | Angoli arrotondati (in px) | Dimensione bordo (in px) impostiamo colori bordo del box contenuti.
Destinazione link immagine laterale possiamo impostare la destinazione per il link sulla immagine laterale.
Distanza sopra/sotto la distanza di partenza del box sopra o sotto (a seconda della posizione) rispetto ai limiti della viewport.
Larghezza minima del contenuto (in px) possiamo impostare una larghezza minima del box contenuti, questa comunque non supererà mai la larghezza della viewport.
Icona chiusura selezioniamo l’icona che vogliamo per il pulsante di chiusura del messaggio.
Mostrare ombra esterna possiamo decidere se mostrare o nascondere l’ombra esterna.
LAYOUT > Testo messaggio
Colore link impostiamo i colori dei link sul testo interno.
Colore testo box titolo | Colore testo box titolo rollover | Dimensione testo box titolo (in px) | Colore icona titolo impostiamo colori e dimensioni test pulsante di apertura messaggio.
Immagine laterale a sinistra possiamo posizionare l’immagine a sinistra (opzione si) oppure a destra (opzione no).
Link immagine laterale inserire l’URL per l’immagine laterale.
Mostra immagine laterale possiamo nascondere l’immagine laterale.
Immagine laterale selezioniamo tramite la media gallery l’immagine da mostrare accanto al contenuto.
Icona titolo selezioniamo l’icona da mostrare accanto al titolo nel pulsante di apertura.
Colore testo interno | Colore titoli interni | Dimensione testo interno (in px) | Dimensione titoli interni (in px) configuriamo colore e dimensioni del contenuto di testo.
Titoli interni maiuscoli possiamo forzare lo stile “UPPERCASE” per i titoli interni al contenuto.
Titolo box inseriamo il testo da visualizzare nel pulsante di apertura.
Nascondi immagine laterale nel responsive se impostato a “si” l’immagine laterale per risoluzioni mobile non sarà visualizzata.
Testo interno al box inseriamo il contenuto di testo da visualizzare.
Nascondi contenuto HTML possiamo decidere di nascondere il contenuto di testo.
LAYOUT > Content recommendation
REC dimensione prezzo originale (in px _ se in offerta) | REC colore prezzo originale (se in offerta) | REC colore barra prezzo originale (se in offerta) | REC colore testo prezzo | REC dimensione testo prezzo (in px) configuriamo colore e dimensioni del testo con i prezzi.
REC altezza immagine (in px) impostiamo l’altezza della immagine sulla card prodotto.
REC testo pulsante inseriamo il testo da inserire nel pulsante della card.
REC colore testo descrizione prodotto | REC colore testo nome prodotto | REC dimensione testo descrizione prodotto (in px) | REC dimensione testo nome prodotto (in px) configuriamo colore e dimensioni per il testo sulla card prodotto.
REC nome prodotto maiuscolo possiamo forzare lo stile “UPPERCASE” per il nome del prodotto.
REC spessore linea separazione | REC colore linea separazione configuriamo spessore (in px) e colore della linea di separazione tra la rec e il contenuto di testo.
Nascondi nome REC | Nascondi descrizione REC | Nascondi img REC | Nascondi prezzi REC | Nascondi pulsante REC possiamo decidere di nascondere o mostrare i singoli elementi delle card.
Ordine prezzo REC | Ordine descrizione REC | Ordine immagine REC | Ordine nome REC possiamo decidere l’ordine di ogni elemento, più alto sarà il valore e prima verrà inserito.
FORM > Posizione e dimensioni
Mostra form nascondi REC possiamo decidere se mostrare il form o la rec.
Colore sfondo input form | Colore bordo input form | Colore checkbox/radio form | Colore label form | Colore sfondo form impostiamo i colori per label input e sfondo.
Angoli stondati form (in px) se lo sfondo del form è attivo possiamo impostare gli angoli arrotondati.
Padding interno form (in px se attivo il colore di sfondo) impostiamo la distanza dei contenuti del form dal suo margine esterno.
Mostra sfondo form se impostato a “si” lo sfondo sarà visibile, altrimenti non sarà visibile.
Form dimensione testo label (in px) impostiamo la dimensione del testo sulle label del form.
PULSANTI > Pulsante
Angoli stondati pulsanti (in px) | Colore testo pulsanti rollover | Colore sfondo pulsanti rollover | Colore sfondo pulsanti | Dimensione testo pulsanti (in px) | Colore testo pulsanti | Colore bordo pulsanti rollover | Colore bordo pulsanti | Dimensione bordo pulsanti (in px) impostiamo colori e dimensioni testo per tutti i pulsanti.
Testo pulsanti maiuscolo possiamo forzare lo stile “UPPERCASE” per tutti i pulsanti.
Thanks for contributing!