Andremo a spiegare il funzionamento di ogni singola chiave di questo template.
Per la configurazione Iniziali della Recommendations si rimanda all’articolo dedicato come creare una recommendation.
L’unica differenza tra il “Vertical” e l’”Orizontal” è la direzione di scorrimento delle REC, per il resto a livello di chiavi ed impostazioni sono uguali.
CAROUSEL > Altro
Freccia sinistra carousel | Freccia destra carousel possiamo selezionare le icone per le frecce del carousel.
Carousel _ padding tra gli elementi (in px) è la distanza tra gli elementi del carosello, più alto è il valore maggiore sarà la spaziatura.
Carousel _ timeout animazione è l’intervallo tra una animazione automatica e l’altra.
Carousel _ autoplay pausa rollover possiamo attivare la pausa del carosello quando il cursore si trova sopra di esso.
Carousel _ autoplay attiva e disattiva l’animazione automatica del carosello.
Carousel _ velocità animazione (in millisecondi) più alto è il valore e più lenta sarà l’animazione
Controlli carousel raggruppati a sinistra (solo se centrali impostati a no) mette tutti i controlli raggruppati a sinistra.
Controlli carousel centrali mette pulsanti e bullet tutti centrali.
Nascondi controlli carousel nasconde le frecce destra e sinistra.
Nascondi nav carousel nasconde i bullet di paginazione.
Attivare drag mouse carousel possiamo attivare o disattivare il drag del carosello con il mouse.
Carousel numero di elementi visibili desktop | Carousel numero di elementi visibili tablet | Carousel numero di elementi visibili mobile per ogni dispositivo, possiamo decidere quanti elementi saranno visibili in ogni pagina del carosello.
CAROUSEL > Posizione e dimensioni
Spessore bordo carousel | Colore bordo carousel | Sfondo carousel | Angoli arrotondati carousel | Margine prima e dopo il carousel (in px) | Larghezza massima carosello (in px) personalizzazioni contenitore del carosello.
Colore bordo bullet carousel rollover | Colore di sfondo bullet carousel rollover | Colore bordo bullet carousel | Colore bordo bullet carousel attivo | Spessore bordo bullet carousel (in px) | Colore sfondo bullet carousel attivo | Dimensioni bullet carousel (in px) | Colore di sfondo bullet carousel personalizzazione dei bullet (pallini) per la paginazione del carosello.
Colore sfondo controlli carousel rollover | Colore icona controlli carousel rollover | Colore bordo controlli carousel rollover | Padding orizzontale controlli carousel (in px) | Colore bordo controlli carousel | Dimensione icona controlli carousel (in px) | Padding verticale controlli carousel (in px) | Spessore bordo controlli carousel (in px) | Colore icona controlli carousel | Angoli arrotondati controlli carousel (in px) | Colore sfondo controlli carousel personalizzazioni dei pulsanti per lo scorrimento degli elementi del carosello.
Controlli carousel ai lati inserisce le frecce ai lati del carosello una a sinistra e una a destra, centrate verticalmente al contenuto.
LAYOUT > Contenuto recommendation
Ordine nome prodotto | Ordine brand | Ordine immagine | Ordine descrizione breve | Ordine prezzo possiamo decidere l’ordine di ogni elemento, più alto sarà il valore e prima verrà inserito.
Prezzo originale sopra il prezzo scontato impostiamo se il prezzo scontato deve stare a fianco al prezzo oppure sopra.
Mostrare simbolo valuta prima del prezzo se impostato a “si” mostra la valuta prima del prezzo, altrimenti la inserisce dopo.
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.
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.
Barra inclinata prezzo originale se impostata a “si” la barra sul prezzo scontato sarà obliqua altrimenti sarà dritta.
Colore pulsante rollover card | Bordo pulsante rollover card | Sfondo pulsante rollover card |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 destro card (in px) | Dimensione bordo laterale sinistro card (in px) | Dimensione bordo inferiore card (in px) | Dimensione bordo superiore card (in px) personalizzazioni delle singole card.
Animazione immagine card attiva o disattiva lo zoom dell’immagine quando il mouse passa sopra la card.
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.
LAYOUT > Testo messaggio
Spessore bordo contenuto aggiuntivo | Colore bordo contenuto aggiuntivo | Sfondo contenuto aggiuntivo | Angoli arrotondati contenuto aggiuntivo | Margine prima e dopo il contenuto aggiuntivo (in px) personalizzazioni del box per il contenuto aggiuntivo.
Nascondi contenuto aggiuntivo se impostato a “si” tutto il contenuto di testo e immagini prima del carosello sarà nascosto.
Larghezza massima contenuto aggiuntivo (in px) possiamo impostare una larghezza massima per il box del contenuto aggiuntivo.
HTML contenuto aggiuntivo inseriamo e personalizziamo il contenuto di testo aggiuntivo da inserire.
Immagine laterale a sinistra se impostato a “si” l’immagine sarà posizionata a sinistra, altrimenti sarà posizionata a destra.
Immagine laterale | Larghezza massima immagine laterale (in px) selezioniamo l’immagine dalla media gallery e impostiamo le dimensioni.
Colore link contenuto aggiuntivo | Colore testo contenuto aggiuntivo | Colore titoli contenuto aggiuntivo | Dimensione titoli contenuto aggiuntivo (in px) | Dimensione testo contenuto aggiuntivo (in px) dimensioni e colori per il testo aggiuntivo.
Nascondi immagine laterale se impostato a “si” l’immagine non sarà visibile.
LAYOUT > Altro
Codice CSS aggiuntivo possiamo inserire del codice CSS al nostro carosello.
PULSANTI > Pulsante
Angoli arrotondati pulsante (in px) impostiamo gli angoli arrotondati dei pulsanti.
Pulsante a tutta larghezza il pulsante della card prenderà tutta la larghezza disponibile.
Colore sfondo pulsante rollover | Colore testo pulsante rollover | Colore bordo pulsante rollover | Colore bordo pulsante | Colore testo pulsante | Colore di sfondo pulsante configuriamo il colore dei pulsanti anche per lo stato di rollover.
Dimensione testo pulsante (in px) | Padding sopra/sotto pulsante (in px) | Padding laterale pulsante (in px) | Dimensione bordo pulsante (in px) impostiamo dimensioni dei pulsanti e del testo.
Testo pulsante inseriamo il testo da visualizzare all’interno del pulsante.
Thanks for contributing!