Secțiunea Before and after pune două imagini una peste alta, cu un separator. Cumpărătorii trag separatorul ca să vadă mai mult dintr-o imagine sau din cealaltă. Folosește-o pentru rezultate (înainte și după), două culori sau două finisaje ale unui produs.
Adaugă secțiunea
- Deschide the builder și mergi la pagina dorită. Funcționează pe pagina principală și pe paginile de produs, landing, de colecție și de colecții, până la 3 pe pagină.
- În fila Sections, apasă Add new section și alege Before and after din grupul Content.
- Dă clic pe blocul Before and after din interiorul ei, alege cele două imagini, apoi apasă Publish.
Blocul Before and after
Acest bloc conține cele două imagini. Este mereu în secțiune și nu poate fi eliminat.
- Before image și After image: cele două fotografii. Folosește fotografii făcute din același unghi, ca să se alinieze.
- Before label și After label: o etichetă scurtă în colțul fiecărei imagini, cum ar fi „Înainte” și „După” sau „Negru” și „Alb”. Las-o goală ca să ascunzi eticheta.
- Direction: Horizontal folosește un separator pe care cumpărătorii îl trag la stânga și la dreapta. Vertical folosește un separator pe care îl trag în sus și în jos.
- Ratio: forma cadrului. Auto urmează imaginea dinainte, sau alege Portrait, Square ori Landscape. Ambele imagini sunt decupate în același cadru.
- Divider position: unde pornește separatorul, de la 5% la 95%. La 50%, cumpărătorii văd jumătate din fiecare imagine.
- Show a hint when it comes into view: separatorul se mișcă puțin singur, ca cumpărătorii să vadă că îl pot trage.
- Follow the mouse on desktop: pe calculatoare, separatorul urmează mouse-ul fără clic. Pe telefoane, cumpărătorii trag mereu.
- Use parent color scheme: separatorul, mânerul și etichetele folosesc culorile secțiunii. Oprește-l ca să alegi altă Color scheme.
Setările secțiunii și titlul
Adaugă până la 2 blocuri Text, 1 Divider și 1 Group pentru un titlu și un text scurt.
- Direction: Vertical pune titlul deasupra imaginilor, Horizontal îl pune lângă ele.
- Stack vertically on mobile: pornit implicit, ca imaginile să păstreze toată lățimea telefonului.
- Position și Alignment, Section width, Color scheme, Padding și fila Custom CSS.
Pe pagina de produs
Același bloc Before and after poate fi pus și în secțiunile Product info și Landing info, precum și în filele pliabile, ca să stea comparația lângă butonul de cumpărare. Vezi Cum adaug pe pagina de produs file pliabile, date de livrare, un ghid de mărimi, insigne sau imagini înainte și după?
Bine de știut
- În magazinul live, comparația apare doar după ce alegi ambele imagini. Până atunci, constructorul arată imagini de exemplu.
- Cumpărătorii pot muta separatorul și cu tastatura.
- Cumpărătorii care au activat reducerea mișcării pe dispozitiv nu văd mișcarea indiciului.
- Imaginile par tăiate? Alege Ratio cel mai apropiat de fotografiile tale sau folosește fotografii cu aceeași formă.
- Folosește doar fotografii reale cu rezultate reale.