Sekce Před a po položí dva obrázky na sebe s dělicí čárou. Zákazníci čáru posouvají a ukážou víc z jednoho nebo druhého obrázku. Použijte ji pro výsledky (před a po), dvě barvy nebo dvě provedení produktu.
Přidání sekce
- Otevřete editor obchodu a přejděte na požadovanou stránku. Funguje na domovské stránce, stránce produktu, vstupní stránce, stránce kolekce a stránce kolekcí, až 3 na stránku.
- Na kartě Sekce klikněte na Přidat novou sekci a ve skupině Obsah vyberte Před a po.
- Klikněte na blok Před a po uvnitř, vyberte své dva obrázky a klikněte na Zveřejnit.
Blok Před a po
Tento blok obsahuje oba obrázky. V sekci je vždy a nelze ho odstranit.
- Obrázek před a Obrázek po: dvě fotky. Použijte fotky pořízené ze stejného úhlu, aby na sebe seděly.
- Popisek před a Popisek po: krátký štítek v rohu každého obrázku, například "Před" a "Po", nebo "Černá" a "Bílá". Pokud ho necháte prázdný, štítek se skryje.
- Směr: Horizontální používá dělicí čáru, kterou zákazníci posouvají doleva a doprava. Vertikální používá dělicí čáru, kterou posouvají nahoru a dolů.
- Poměr: tvar rámečku. Auto se řídí obrázkem před, nebo vyberte Na výšku, Čtverec nebo Na šířku. Oba obrázky se oříznou do stejného rámečku.
- Pozice děliče: kde dělicí čára začíná, od 5 % do 95 %. Při 50 % zákazníci vidí polovinu každého obrázku.
- Zobrazit nápovědu, když se objeví na obrazovce: dělicí čára se sama trochu pohne, aby zákazníci viděli, že s ní mohou hýbat.
- Sledovat myš na počítači: na počítačích dělicí čára sleduje myš bez kliknutí. Na telefonech ji zákazníci vždy posouvají prstem.
- Použít nadřazené barevné schéma: dělicí čára, úchyt a štítky používají barvy sekce. Vypněte ho, pokud chcete vybrat jiné Barevné schéma.
Nastavení sekce a nadpis
Pro nadpis a krátký text přidejte až 2 bloky Text, 1 Oddělovač a 1 Skupina.
- Směr: Vertikální dá nadpis nad obrázky, Horizontální vedle nich.
- Na mobilu skládat vertikálně: ve výchozím stavu zapnuto, takže obrázky si na telefonu ponechají celou šířku.
- Pozice a Zarovnání, Šířka sekce, Barevné schéma, Vnitřní okraj a karta Vlastní CSS.
Na stránce produktu
Stejný blok Před a po můžete vložit i do sekcí Informace o produktu a Informace o vstupní stránce a do rozbalovacích karet, takže porovnání bude hned vedle tlačítka nákupu. Viz Jak na stránku produktu přidat rozbalovací karty, data doručení, tabulku velikostí, odznaky nebo obrázky před a po?
Dobré vědět
- V živém obchodě se porovnání zobrazí, až když jsou vybrané oba obrázky. Do té doby editor ukazuje ukázkové obrázky.
- Zákazníci mohou dělicí čárou pohybovat i klávesnicí.
- Zákazníci, kteří mají v zařízení zapnuté omezení pohybu, pohyb nápovědy neuvidí.
- Obrázky vypadají oříznuté? Vyberte Poměr nejbližší vašim fotkám, nebo použijte fotky stejného tvaru.
- Používejte jen skutečné fotky skutečných výsledků.