Widget del prodotto: design
Tempo di lettura: 4 min.
Utilizza le opzioni seguenti per creare il design perfetto per il tuo widget.
Sfondi e bordi
- Opacità e colore sfondo: clicca la casella del colore per selezionare un colore per lo sfondo. Trascina il cursore per modificare l'opacità.
- Larghezza bordi (px) e colore: clicca la casella del colore per selezionare un colore per il bordo del widget del prodotto e trascina il cursore per modificare la larghezza dei bordi.
- Divisore larghezza (px) e colore: clicca la casella del colore per selezionare un colore per la linea divisoria del widget del prodotto e trascina il cursore per modificare la larghezza del divisore.
- Divisore lunghezza (px): trascina il cursore per modificare la lunghezza del divisore tra il nome e il prezzo.
Testo
Seleziona un colore per il testo e clicca l'icona Testo 
per selezionare un font per gli elementi seguenti:
per selezionare un font per gli elementi seguenti: - Nome prodotto
- Prezzo prodotto
- Prezzo per unità (ad es. 2.50€/ lt.)
- Messaggio esaurito
Tasto
- Stile tasto: clicca per selezionare lo stile del tasto.
- Colore e opacità riempimento: clicca la casella del colore per selezionare un colore per il riempimento del tasto. Trascina il cursore per modificarne l'opacità.
- Larghezza bordi (px) e colore: clicca la casella del colore per selezionare un colore per il bordo del tasto e trascina il cursore per modificare la larghezza dei bordi.
- Raggio angolo (px): trascina il cursore per modificare il raggio dell'angolo del tasto (più è ampio il raggio, più il tasto sarà rotondeggiante).
- Dimensione tasto: trascina il cursore per modificare la dimensione del tasto.
- Carattere e colore del testo: Seleziona il colore per il testo e clicca sull'icona Testo per selezionare un carattere per il tasto.
Al passaggio del mouse
Decidi in che modo il widget del prodotto cambi quando i clienti ci passano sopra il mouse.
- Nulla: il widget non cambia
- Sovrapposizione: un colore in sovrapposizione viene mostrato al passaggio del mouse
- clicca sulla selettore del colore per selezionare un colore di sovrapposizione. Trascina il cursore per cambiare l'opacità
- (Facoltativo) Clicca sulla casella del colore per selezionare il colore del bordo e trascinare il cursore per modificare la larghezza del bordo
- (Facoltativo) Clicca l'interruttore Zoom al passaggio del mouse:
- Abilitato: quando il mouse del cliente passa sopra l'immagine, essa viene ingrandita
- Disabilitato: quando il mouse del cliente passa sopra l'immagine, non c'è alcun effetto zoom
- Zoom: l'immagine viene ingrandita al passaggio del mouse
- (Facoltativo) Clicca sulla casella del colore per selezionare un colore di sovrapposizione. Trascina il cursore per cambiare l'opacità
- (Facoltativo) Clicca sulla casella del colore per selezionare il colore del bordo e trascinare il cursore per modificare la larghezza del bordo
- Interruttore Zoom al passaggio del mouse: assicurati che l'interruttore sia abilitato per mantenere lo zoom
- Bordo: clicca la casella del colore per selezionare il colore dei bordi e trascina il cursore per cambiarne la larghezza
- (Facoltativo) Clicca sulla casella del colore per selezionare un colore di sovrapposizione. Trascina il cursore per modificare l'opacità.
- Clicca sulla casella del colore per selezionare il colore del bordo e trascinare il cursore per modificare la larghezza del bordo.
- (Facoltativo) Clicca sull'interruttore Zoom al passaggio del mouse:
- Abilitato: quando il mouse del cliente passa sopra l'immagine, essa viene ingrandito
- Disabilitato: quando il mouse del cliente passa sopra l'immagine, non c'è lo zoom
Al passaggio del mouse
Decide how the product widget changes when customers moves a mouse over it:
- Nothing: The widget does not change.
- Overlay: A color overlay appears on hover.
- Click the color box to select an overlay color. Drag the slider change the opacity.
- (Optional) Click the color box to select the border color and drag the slider to change the border width.
- (Optional) Click the Hover zoom toggle:
- Enabled: When customer's mouse hovers over image, it is zoomed in on.
- Disabled: When customer's mouse hovers over image, there is no zoom.
- Zoom: Image is zoomed in on when hovered over.
- (Optional) Click the color box to select an overlay color. Drag the slider change the opacity.
- (Optional) Click the color box to select the border color and drag the slider to change the border width.
- Hover zoom toggle: Make sure toggle is enabled to keep zoom.
- Border: A border appears around product info when hovered over.
- (Optional) Click the color box to select an overlay color. Drag the slider change the opacity.
- Click the color box to select the border color and drag the slider to change the border width.
- (Optional) Click the Hover zoom toggle:
- Enabled: When customer's mouse hovers over image, it is zoomed in on.
- Disabled: When customer's mouse hovers over image, there is no zoom.
Etichetta
- Colore e opacità riempimento: clicca la casella del colore per selezionare il colore dell'etichetta. Trascina il cursore per modificare l'opacità dell'etichetta.
- Colore testo: seleziona un colore per il testo dell'etichetta.
Suggerimento: per scoprire come aggiungere un'etichetta, clicca qui.
Hai trovato utile questo articolo?
|