Sekcja Przed i po nakłada na siebie dwa obrazy z separatorem. Klienci przeciągają separator, aby zobaczyć więcej jednego lub drugiego obrazu. Używaj jej do pokazania efektów (przed i po), dwóch kolorów lub dwóch wykończeń produktu.
Dodaj sekcję
- Otwórz kreator i przejdź do wybranej strony. Działa na stronie głównej, stronie produktu, stronie docelowej, stronie kolekcji i stronie Kolekcje, do 3 na stronę.
- Na karcie Sekcje kliknij Dodaj nową sekcję i wybierz Przed i po z grupy Treść.
- Kliknij blok Przed i po w jej wnętrzu i wybierz dwa obrazy, a potem kliknij Opublikuj.
Blok Przed i po
Ten blok zawiera dwa obrazy. Jest zawsze w sekcji i nie można go usunąć.
- Obraz przed i Obraz po: dwa zdjęcia. Używaj zdjęć zrobionych z tego samego kąta, żeby do siebie pasowały.
- Etykieta przed i Etykieta po: krótki napis w rogu każdego obrazu, na przykład "Przed" i "Po" albo "Czarny" i "Biały". Zostaw puste, aby ukryć napis.
- Kierunek: Poziomy używa separatora, który klienci przeciągają w lewo i w prawo. Pionowy używa separatora przeciąganego w górę i w dół.
- Proporcje: kształt ramki. Automatycznie dopasowuje się do obrazu przed, możesz też wybrać Pionowy, Kwadrat lub Poziomy. Oba obrazy są przycinane do tej samej ramki.
- Pozycja separatora: gdzie zaczyna się separator, od 5% do 95%. Przy 50% klienci widzą połowę każdego obrazu.
- Pokaż podpowiedź, gdy pojawi się na ekranie: separator sam lekko się porusza, żeby klienci zobaczyli, że mogą go przeciągać.
- Podążaj za myszą na komputerze: na komputerach separator podąża za myszą bez klikania. Na telefonach klienci zawsze przeciągają.
- Użyj schematu kolorów rodzica: separator, uchwyt i napisy używają kolorów sekcji. Wyłącz to, aby wybrać inny Schemat kolorów.
Ustawienia sekcji i tytuł
Dodaj do 2 bloków Tekst, 1 Separator i 1 Grupa na nagłówek i krótki tekst.
- Kierunek: Pionowy umieszcza nagłówek nad obrazami, Poziomy obok nich.
- Ułóż pionowo na urządzeniach mobilnych: domyślnie włączone, więc obrazy zachowują pełną szerokość telefonu.
- Pozycja i Wyrównanie, Szerokość sekcji, Schemat kolorów, Wypełnienie i karta Niestandardowy CSS.
Na stronie produktu
Ten sam blok Przed i po może też trafić do sekcji Informacje o produkcie i Informacje strony docelowej oraz do zwijanych zakładek, dzięki czemu porównanie stoi obok przycisku zakupu. Zobacz Jak dodać zwijane zakładki, daty dostawy, tabelę rozmiarów, plakietki lub zdjęcia przed i po na stronie produktu?
Warto wiedzieć
- W Twoim sklepie porównanie pojawia się dopiero, gdy wybierzesz oba obrazy. Do tego czasu kreator pokazuje przykładowe obrazy.
- Klienci mogą też przesuwać separator klawiaturą.
- Klienci, którzy włączyli na urządzeniu ograniczenie ruchu, nie widzą ruchu podpowiedzi.
- Obrazy wyglądają na przycięte? Wybierz Proporcje najbliższe Twoim zdjęciom albo użyj zdjęć o tym samym kształcie.
- Używaj tylko prawdziwych zdjęć prawdziwych efektów.