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.
SIDEPANEL > Testo messaggio
Colore testo etichetta è il colore del testo della etichetta di apertura.
Colore testo è il colore del testo per il contenuto HTML aggiuntivo.
Titolo etichetta
Colore Hover link inserire il colore dei link per il contenuto di testo aggiuntivo.
Contenuto HTML inserire il contenuto di testo da visualizzare.
Font titolo dimensione dei titoli indicata in px.
Colore titolo impostiamo il colore per i titoli solo H1.
Link Immagine evidenza inserire l’url per il link della immagine in evidenza.
Nascondi testo possiamo decidere se nascondere tutto il blocco di contenuto aggiuntivo.
SIDEPANEL > Altro
Colore sfondo etichetta | Bordo etichetta esterna | Colore bordo etichetta esterna | Icona su etichetta esterna | Dimensione bordo etichetta esterna (in px) personalizzazioni etichetta esterna.
Padding generale (in px) distanza tra il bordo del contenitore e il contenuto.
Altezza immagine (in px) imposta la dimensione dell’immagine in evidenza.
Dimensione bordo box (in px) | Colore bordo box imposta lo spessore e il colore del bordo esterno.
Angoli stondati box (in px) configura gli angoli arrotondati del div dove vengono inseriti immagine in evidenza e contenuto.
Colore di sfondo impostiamo il colore di sfondo del contenuto.
Mostra immagine in evidenza possiamo decidere se mostrare o nascondere l’immagine accanto al contenuto di testo.
Immagine in evidenza selezioniamo tramite la media gallery l’immagine da mostrare accanto al contenuto.
Ombra contenitore attiva/disattiva l’ombra esterna del contenuto.
Codice CSS aggiuntivo possiamo inserire codice CSS personalizzato ATTENZIONE inserire codice CSS valido.
Animazione icona etichetta esterna se attivo l’icona ruota su se stessa di 180° ogni volta che la finestra si apre o si chiude.
SIDEPANEL > Posizione e dimensioni
Mostra immagine evidenza da mobile possiamo decidere di nascondere l’immagine in evidenza da mobile.
Margine tra i contenuti impostiamo la distanza tra contenuto di testo, form e rec.
Dimensione massima contenuto impostiamo la larghezza massima (in px) del box dove vengono inseriti form, contenuti e rec.
Sidepanel a tutta altezza se impostato a si, il sidepanel prende tutta l’altezza della viewport.
Angoli stondati etichetta esterna (in px) impostiamo gli angoli arrotondati della etichetta esterna.
Partenza sidepanel top/bottom (in px) impostiamo la distanza del sidepanel dal bordo inferiore o superiore (a seconda della posizione scelta) della viewport.
Immagine evidenza sopra/sotto su mobile forza la posizione della immagine prima o dopo il contenuto per risoluzioni mobile.
Posizione orizzontale sidepanel (si = sinistra | no = destra) | Posizione verticale sidepanel (si = alto | no = basso) impostiamo la posizione rispetto la viewport.
Immagine evidenza posizionata lateralmente (si = sinistra/destra | no = alto/basso) | Immagine evidenza in alto (solo se “Immagine posizionata lateralmente” = no) | Immagine evidenza a sinsitra (solo se “Immagine posizionata lateralmente” = si) configuriamo la posizione della immagine in evidenza.
Alt immagine in evidenza inseriamo il testo alternativo per l’immagine in evidenza.
Z_index Sidepanel impostiamo uno z-index per posizionare il messaggio al di sopra del nostro sito web.
Padding sinistra e destra il testo etichetta esterna (in px) | Padding prima e dopo il testo etichetta esterna (in px) impostiamo il margine interno della label verticale esterna.
SIDEPANEL > Content recommendation
Dimensione nome brand (in px) | Dimensione prezzo originale (in px) | Dimensione prezzo scontato (in px) | Dimensione nome prodotto (in px) | Dimensione descrizione prodotto (in px) imposto le dimensioni dei testi all’interno della card.
Mostrare simbolo valuta prima del prezzo se impostato a “si” la valuta viene mostrata prima del prezzo, altrimenti viene mostrata dopo.
Ordine descrizione breve | Ordine brand | Ordine nome prodotto | Ordine Immagine | Ordine prezzo possiamo decidere l’ordine di ogni elemento, più alto è il valore e prima verrà inserito.
Titolo REC inserire il testo da mostrare nel titolo prima della rec.
Mostra REC prima del contenuto se impostato a “si” verrà visualizzata prima il box con le REC e poi sotto il contenuto.
Testo pulsante REC impostiamo il testo del pulsante sulla card della rec.
Animazione immagine REC possiamo attivare o disattivare l’ingrandimento dell’immagine per lo stato di hover sulle card della rec.
Nascondi REC possiamo nascondere tutto il box delle rec.
Spessore separatore REC (in px) | Colore separatore REC personalizziamo la barra che separa le rec dal contenuto.
Nascondi titolo REC | Nascondi brand REC | Nascondi nome REC | Nascondi descrizione REC | Nascondi immagine REC | Nascondi prezzi REC | Nascondi pulsante REC possiamo decidere di nascondere o mostrare i singoli elementi delle card.
Pulsante a tutta larghezza possiamo impostare il pulsante di acquisto sulle card a tutta larghezza.
Barra inclinata prezzo originale serve ad impostare la barra parallela o obliqua sul prezzo originale.
Colore barra prezzo originale imposta il colore della barra sul prezzo originale.
Altezza massima immagine prodotto (in px) impostiamo l’altezza massima per le immagini delle card.
Colore nome prodotto | Colore descrizione prodotto | Colore prezzo originale | Colore prezzo scontato | Colore nome brand personalizziamo i colori dei testi sulle card.
FORM E PULSANTI > Posizione e dimensioni
Mostra Form possiamo nascondere il form se vogliamo.
Margine tra contenuti del form imposta la distanza tra il form e i contenuti di testo (in px).
Titolo label form in grassetto possiamo impostare il grassetto sulle label del form.
Colore sfondo input form | Colore bordo input form | Colore checkbox/radio form | Colore label form | Colore di sfondo del form impostiamo i colori degli elementi del form.
Angoli arrotondati form (in px) | Padding form (in px se sfondo attivo) si attivano soltanto se lo sfondo del form è visibile.
Mostrare sfondo form possiamo decidere di mostrare oppure no lo sfondo del form.
FORM E PULSANTI > Pulsante
Colore sfondo pulsante | Colore testo pulsati | Colore testo pulsati rollover | Sfondo pulsanti | Sfondo pulsanti rollover | Dimensioni testo pulsanti (in px) \ Angoli arrotondati pulsanti (in px) | Colore bordo pulsanti rollover | Colore bordo pulsanti | Dimensione bordo pulsanti | Padding laterale pulsante (in px) | Padding sopra/sotto pulsante (in px) personalizziamo il pulsante del form.
Thanks for contributing!