Zainstaluj motyw w trzech krokach.

Ustaw wejście i podróż przy przewijaniu

W pięciu motywach flagowych (01 Sneaker, 02 Skincare, 03 Jewelry, 04 Drinks, 05 Tech) strona główna zaczyna się od dwóch sekcji: Impact hero, czyli wejścia, oraz Scroll journey, czyli podróży przy przewijaniu. W pozostałych 15 motywach dodasz obie przyciskiem Dodaj sekcję. Obie działają ze zdjęciami i filmami, które dodajesz samodzielnie. W pliku ZIP nie ma żadnych multimediów ze sklepów pokazowych.

Motywy mają wersję angielską i niemiecką. W innych językach edytor motywu pokazuje sekcje i ustawienia po angielsku, dlatego ta instrukcja podaje ich angielskie nazwy, tak jak je widzisz.

Co widać bez własnych multimediów

• Zaraz po przesłaniu nie jest wybrany żaden produkt. Obie sekcje pokazują rysunek zastępczy i przykładowe teksty. Wejście pokazuje też przykładową cenę, a jego przycisk prowadzi do wszystkich produktów.
• Gdy wybierzesz swój produkt w obu sekcjach (ustawienie Product), pokażą jego główne zdjęcie. Wejście dodaje cenę, szybki wybór wariantu i przycisk zakupu. W podróży zdjęcie wędruje od stacji do stacji.
• PNG lub WebP z przezroczystym tłem stoi swobodnie. Zdjęcie JPEG pojawia się jako karta z zaokrąglonymi rogami i mieści się w całości. Bez filmu w wejściu nic się nie odtwarza. Strona jest wtedy kompletna: film, obrazy bez tła i klatki obrotu to dodatki.
• Osoby z włączonym ograniczeniem ruchu widzą spokojną wersję: obraz startowy z tekstem, a potem produkt stojący obok stacji. Obraz startowy zostaje też wtedy, gdy przeglądarka nie pozwala filmowi ruszyć samodzielnie.

Wejście krok po kroku

Kliknij Dostosuj, zostań na stronie głównej i otwórz sekcję Impact hero.

1. 1

   Produkt

   Wybierz swój produkt w polu Product. Daje on cenę, warianty i przycisk zakupu. Jego tytuł się nie wyświetla: Small heading above, Heading, Text i Note below the button piszesz samodzielnie. Na telefonach tekst i notatka są pomijane, żeby obraz miał miejsce.

2. 2

   Film (opcjonalnie)

   Prześlij film produktu w polu Film. W polu Poster ustaw ostatnią klatkę filmu: to pierwszy obraz strony, widoczny podczas ładowania filmu oraz dla osób z włączonym ograniczeniem ruchu. Bez obrazu startowego używany jest podgląd wideo.

3. 3

   Tło

   Ustaw Background color dokładnie na kolor tła w swoim filmie. Potem zwiększaj Soft edges of the film, aż nie będzie widać żadnej krawędzi.

4. 4

   Czasy

   Wszystkie sekundy liczą się od początku filmu. Impact at second i Jolt dają scenie krótki wstrząs. Text appears at second wprowadza nagłówek, cenę i przycisk. Stop at second zatrzymuje film w punkcie kulminacyjnym na czas podany w polu Stop for; podczas zatrzymania na wierzchu leży obraz z pola Sharp picture of the high point. Obraz z pola Still after the film pojawia się płynnie na końcu, a obok widać przycisk ponownego odtwarzania (Show the replay button).

5. 5

   Duże słowo (opcjonalnie)

   Wpisz jedno krótkie słowo w polu Word, w grupie Big word behind the product. Musi przed nim coś stać: przy filmie obraz z pola Cut-out of the product, bez filmu obraz bez tła w polu Poster. Gdy brakuje obu, słowo się nie pojawia.

6. 6

   Układ

   W polu Arrangement wybierz Film fills the stage albo Film as an area beside the text; przy drugiej opcji Side of the text ustala stronę. W polu Framing of the film wybierz Fill the area (crops the film) albo Show the whole film.

7. 7

   Telefony (opcjonalnie)

   Film pionowy trafia do pola Film on mobile, a jego obraz startowy do pola Image on mobile. Bez nich małe ekrany pokazują środek szerokiego filmu. Przy filmie na telefon punkt kulminacyjny, obraz końcowy i obraz bez tła są na telefonach pomijane.

Nie masz filmu? Wstaw obraz w polu Poster: PNG lub WebP bez tła staje przed dużym słowem, JPEG wypełnia obszar.

Gdy wejście wygląda źle

Podróż przy przewijaniu krok po kroku

Otwórz sekcję Scroll journey. Widać ją w sklepie, gdy tylko ma jedną stację.

1. 1

   Produkt

   Wybierz swój produkt w polu Product albo prześlij obraz w polu Product picture: zastąpi on główne zdjęcie. Przyciski na stacjach prowadzą do produktu. PNG lub WebP jest traktowany jak obraz bez tła i unosi się swobodnie, dlatego używaj tych formatów tylko z przezroczystym tłem: bez niego unosi się goły prostokąt. Zdjęcie z własnym tłem dodaj jako JPEG, stanie się kartą.

2. 2

   Stacje

   Bloki Station, najwyżej 6. Każda ma Small heading above, Heading, Text i opcjonalnie Button label. W grupie Product at this station ustaw Place of the product, Size of the product i Tilt; tekst stoi po drugiej stronie. Big word in the background stawia jedno krótkie słowo za produktem.

3. 3

   Etykiety

   W grupie Labels with a line wpisz najwyżej dwie krótkie etykiety na stację. Od każdej biegnie linia do punktu na produkcie: ustawiasz go polami Label 1: point from the left i Label 1: point from the top, w procentach obrazu produktu. Linie widać na szerokich ekranach.

4. 4

   Elementy towarzyszące

   Bloki Companion, najwyżej 8, opcjonalnie. Małe obrazy bez tła pokazujące to, co pasuje do twojego produktu, na przykład owoc, kroplę albo liść. Ustaw Depth, Path (Drifts along, Circles the product, Flies away), Starting place i Size. Blok bez obrazu niczego nie pokazuje. Wąskie ekrany pokazują pierwsze cztery.

5. 5

   Obrót

   Bloki Frame, najwyżej 36, opcjonalnie. Dodaj widoki produktu po kolei, jeden blok na obraz. Zostaw The frames are a full turn włączone dla obrotu; wyłącz je dla ruchu z początkiem i końcem, na przykład dla otwierającej się pokrywki. Na każdej stacji View ustala, który widok pokazuje tam produkt: 0 % to obraz produktu, 50 % to środek sekwencji. Bez klatek obrotu obraz lekko się przechyla i kołysze po drodze.

6. 6

   Ruch

   Polem Scroll length per station ustawiasz, jak daleko trzeba przewinąć od jednej stacji do następnej. Product and companions follow the mouse slightly i Shadow below the product można wyłączyć.

Multimedia do przygotowania