La sezione Prima e dopo sovrappone due immagini con un divisore. I clienti trascinano il divisore per vedere di più dell'una o dell'altra immagine. Usala per i risultati (prima e dopo), due colori o due finiture di un prodotto.
Aggiungere la sezione
- Apri il builder e vai alla pagina che vuoi. Funziona nelle pagine home, prodotto, landing, collezione e collezioni, fino a 3 per pagina.
- Nella scheda Sezioni, fai clic su Aggiungi nuova sezione e scegli Prima e dopo nel gruppo Contenuto.
- Fai clic sul blocco Prima e dopo al suo interno e scegli le due immagini, poi fai clic su Pubblica.
Il blocco Prima e dopo
Questo blocco contiene le due immagini. È sempre presente nella sezione e non si può rimuovere.
- Immagine prima e Immagine dopo: le due foto. Usa foto scattate dalla stessa angolazione, così combaciano.
- Etichetta prima ed Etichetta dopo: una breve etichetta nell'angolo di ogni immagine, come "Prima" e "Dopo", oppure "Nero" e "Bianco". Lasciala vuota per nasconderla.
- Direzione: Orizzontale usa un divisore che i clienti trascinano a sinistra e a destra. Verticale usa un divisore che i clienti trascinano in alto e in basso.
- Rapporto: la forma della cornice. Automatico segue l'immagine prima, oppure scegli Verticale, Quadrato o Orizzontale. Entrambe le immagini vengono ritagliate nella stessa cornice.
- Posizione del divisore: dove parte il divisore, dal 5% al 95%. Al 50% i clienti vedono metà di ciascuna immagine.
- Mostra un suggerimento quando appare sullo schermo: il divisore si muove un po' da solo, così i clienti capiscono che possono trascinarlo.
- Segui il mouse su computer: sui computer il divisore segue il mouse senza bisogno di clic. Sui telefoni i clienti trascinano sempre.
- Usa lo schema colori del genitore: il divisore, la maniglia e le etichette usano i colori della sezione. Disattivalo per scegliere un altro Schema di colori.
Impostazioni della sezione e titolo
Aggiungi fino a 2 blocchi Testo, 1 Separatore e 1 Gruppo per un titolo e un breve testo.
- Direzione: Verticale mette il titolo sopra le immagini, Orizzontale lo mette accanto.
- Impila verticalmente su mobile: attivo per impostazione predefinita, così le immagini mantengono tutta la larghezza del telefono.
- Posizione e Allineamento, Larghezza sezione, Schema di colori, Spaziatura interna e una scheda CSS personalizzato.
Nella pagina prodotto
Lo stesso blocco Prima e dopo può stare anche dentro le sezioni Informazioni sul prodotto e Informazioni della landing page, e dentro le schede comprimibili, così il confronto si trova accanto al pulsante di acquisto. Vedi Come aggiungo schede comprimibili, date di consegna, una guida alle taglie, badge o immagini prima e dopo alla pagina prodotto?
Da sapere
- Nel negozio online, il confronto compare solo quando sono state scelte entrambe le immagini. Fino ad allora il builder mostra immagini di esempio.
- I clienti possono spostare il divisore anche con la tastiera.
- I clienti che hanno attivato la riduzione del movimento sul dispositivo non vedono il movimento del suggerimento.
- Le immagini sembrano tagliate? Scegli il Rapporto più vicino alle tue foto, oppure usa foto della stessa forma.
- Usa solo foto vere di risultati veri.