Przewodnik krok po kroku dotyczący dodawania banera wideo z motywem Dawn Shopify

Jeśli użyłeś Shopify, znasz motyw Świtu. Jest to jeden z najczęściej wybieranych darmowych motywów dostępnych dla nowych przedsiębiorców i dający duże możliwości dostosowania wybór do zaprojektowania unikalnej witryny sklepowej.

Motyw Dawn zawiera wiele modułów, takich jak standardowy blok przesyłania wideo i baner graficzny.

W tym przewodniku pokażemy, jak zbudować plik Motyw świtu baner wideo, który przyciągnie uwagę na Twojej stronie głównej!

Omówienie motywu Świtu

Motyw Dawn jest darmowy Shopify motyw z którego powszechnie korzystają sprzedawcy e-commerce. Dzięki prostemu projektowi i prostym ustawieniom pozostaje popularnym wyborem przy tworzeniu atrakcyjnego wizualnie i elegancko wyglądającego sklepu.

Co to jest tło/baner wideo i dlaczego warto go używać w swojej witrynie?

Baner wideo to obszar strony internetowej, który przedstawia wideo jako tło o pełnej szerokości wraz z innymi elementami na pierwszym planie, takimi jak przyciski i tekst.

Moduł taki jak baner wideo z motywem Dawn oferuje wiele korzyści poprawiających ogólne wrażenia odwiedzających witrynę. Oto kilka kluczowych zalet:

1. Wzbogacone elementy wizualne: Dzięki włączeniu urzekających filmów, witryna staje się bardziej atrakcyjna wizualnie, przyciągając uwagę odwiedzających.
2. Dynamiczna i angażująca treść: Filmy skutecznie przekazują informacje. Mogą prezentować funkcje produktu, demonstrować instrukcje lub opowiadać wciągającą historię marki, utrzymując zainteresowanie odwiedzających.
3. Zwiększone zaangażowanie użytkowników: Filmy mają moc wywierania trwałego wrażenia na odwiedzających. Połączenie grafiki, dźwięku i ruchu przyciąga uwagę i zachęca użytkowników do dalszej eksploracji.
4. Skuteczna komunikacja marki: Tło wideo lub baner mogą przekazać klientom przesłanie marki. Pozwala firmom podkreślić swoją wyjątkową propozycję wartości, zaprezentować produkty lub usługi oraz stworzyć silną tożsamość marki.

Wykorzystując moc wideo w projekcie swojej witryny internetowej, możesz uczynić ją bardziej ekscytującą i zwiększyć liczbę konwersji.

Przewodnik krok po kroku dotyczący dodawania tła/banera wideo do motywu Dawn

Z technicznego punktu widzenia istnieją cztery sposoby dodania banera wideo z motywem Dawn (nie wszystkie są idealne):

1. Konwersja wideo do formatu wideo/obrazu WebP.
2. Regulacja Shopify kod zwykłego banera graficznego, tak aby obsługiwał wideo.
3. Konwersja wideo do formatu GIF.
4. Po prostu prześlij film do bloku wideo w Shopify, pomijając pomysł posiadania elementów na pierwszym planie (aby nie był to prawdziwy baner).

Modyfikowanie pliku nie jest zbyt trudne Shopify kod dla standardowego baneru graficznego, ale proces jest niepotrzebnie długi, biorąc pod uwagę, że masz dostęp do formatu pliku, takiego jak WebP. GIF-y znacznie obniżają jakość wideo, a opcja 4 nie daje nam prawdziwego baneru wideo.

Dlatego zalecamy konwersję dowolnego formatu wideo (.mp4, .mov, .wmv) do formatu WebP. WebP łączy zalety obrazów JPEG o wysokiej rozdzielczości, filmów i GIF-ów, dzięki czemu możesz tworzyć piękne ruchome filmy bez dużej objętości i bez utraty dużej rozdzielczości. Możesz także przesyłać filmy/obrazy WebP do Shopify baner obrazu.

Oto jak to zrobić:

Krok 1: Weź swój film i przekonwertuj go na plik WebP Format

W Internecie dostępnych jest wiele bezpłatnych konwerterów „wideo na WebP”. Spróbuj wyszukać w Internecie lub skorzystaj z jednego z przetestowanych przez nas konwerterów:

• Ezgif
• Konwerter MC
• MP4.do

Prześlij swój film do bezpłatnego narzędzia konwertującego, a następnie wybierz konwersję do formatu WebP. Zapisz nowy plik na swoim komputerze.

Krok 2: Znajdź motyw Świtu w Shopify

Wybierz „Sklep internetowy” > „Motywy”.

Jeśli jeszcze go nie masz, zainstaluj motyw Dawn. W przeciwnym razie powinieneś znaleźć motyw Dawn oznaczony jako Shopify„Aktualny motyw”. Kliknij przycisk „Dostosuj”, aby kontynuować.

Krok 3: Dodaj i wybierz blok banera obrazu

Blok „Baner obrazu” jest domyślnie dodawany w motywie Dawn. Powinieneś więc móc kliknąć ten moduł, aby otworzyć jego ustawienia w lewym panelu. Można także kliknąć sam baner obrazu w podglądzie wizualnym po prawej stronie. Użyj linku „Dodaj blok”, jeśli chcesz wstawić „baner graficzny” od zera.

Krok 4: Prześlij plik wideo WebP

Kliknij przycisk „Wybierz obraz” w sekcji „Pierwszy obraz”.

Spowoduje to załadowanie obszaru do przesyłania obrazów do biblioteki multimediów sklepu. Możliwe jest również wklejenie adresów URL filmów, ale my skorzystamy z funkcji przesyłania. Wybierz przycisk „Dodaj obrazy” i wybierz utworzony wcześniej plik WebP. Zaznacz nowo przesłany plik znacznikiem wyboru, a następnie kliknij przycisk „Gotowe”.

Spowoduje to upuszczenie pliku wideo WebP na baner obrazu, umożliwiając edycję dowolnej zawartości również na pierwszym planie. Kliknij „Zapisz”.

Gratulacje, pomyślnie dodałeś baner wideo z motywem Dawn!

Krok 5: Obejrzyj wideo

Ale czekaj, rozsądnie jest obejrzeć podgląd wideo w interfejsie użytkownika, aby upewnić się, że wygląda prawidłowo, działa płynnie i ma odpowiednią rozdzielczość.

Wróć na główny ekran panelu kontrolnego i kliknij ikonę gałki ocznej, aby wyświetlić opcję „Wyświetl swój sklep internetowy”. Znajduje się obok „Sklepu internetowego” pod sekcją „Kanały sprzedaży”.

Sukces!

Dostosowywanie banera wideo z motywem Dawn: uczynienie go wyjątkowym

Dzięki personalizacji Twój film będzie idealnie pasował do Twojej marki i estetyki sklepu. Zatem zakasujmy rękawy i nurkujmy, dobrze?

Musisz zawsze wybrać baner obrazu, aby zobaczyć jego ustawienia. Po przejściu tam możesz zmodyfikować krycie nakładki obrazu i zmienić wysokość banera. Następnie możesz zmodyfikować położenie zawartości pulpitu, zmieniając miejsce, w którym znajduje się tekst nakładki.

Przesuwanie zawartości i pozycji przycisków polega na wyświetlaniu tekstu i przycisku nad obszarem wideo, gdzie są najbardziej widoczne.

W celu dalszej personalizacji masz dostęp do sekcji „Niestandardowy CSS”.

I oczywiście można wybrać tekst treści lub przycisk, aby zmienić treść i sposób ich wyświetlania.

Wskazówki dotyczące optymalizacji pliku wideo pod kątem maksymalnej szybkości i zgodności

Posiadanie imponującego filmu nie będzie miało znaczenia, jeśli spowalnia indeksowanie witryny lub nie wyświetla się poprawnie na niektórych urządzeniach.

Dlatego optymalizacja pliku wideo pod kątem maksymalnej szybkości i zgodności jest zadaniem niepodlegającym negocjacjom. W tej sekcji udostępnimy kilka przydatnych wskazówek, które pomogą usprawnić zawartość wideo pod kątem wydajnego ładowania i uniwersalnego odtwarzania.

• Używaj formatów plików wideo (takich jak WebP), które są kompatybilne z większością przeglądarek internetowych.
• Staraj się, aby rozmiar pliku wideo był jak najmniejszy. WebP wykonuje wspaniałą robotę, kompresując wideo bez utraty jakości.
• Ustaw proporcje filmu tak, aby dobrze pasowały do ​​rozmiaru ekranu.
• Wybierz film o zrównoważonych kolorach i kontraście, który odzwierciedla osobowość sklepu.

Rozwiązywanie typowych problemów z dodawaniem tła/banera wideo do motywu Dawn

Czasami, niezależnie od tego, jak bardzo zachowałeś ostrożność, podczas dodawania banera wideo z motywem Dawn mogą pojawić się problemy. Oto kilka wskazówek dotyczących rozwiązywania problemów w przypadku wystąpienia problemów:

Problemy z niekompatybilnością

Spróbuj przekonwertować wideo do kompatybilnego formatu pliku, takiego jak WebP, lub skorzystaj z łącza do osadzenia wideo.

Rozmiar filmu jest za duży

Przytnij wideo lub skompresuj je, aby zmniejszyć rozmiar pliku przy jednoczesnym zachowaniu jakości.

Film nie odtwarza się automatycznie

Sprawdź, czy w ustawieniach motywu włączyłeś opcję „Autoodtwarzanie”.

Nasze wnioski dotyczące dodania banera wideo z motywem Dawn

Postępując zgodnie z naszym przewodnikiem krok po kroku i wskazówkami dotyczącymi rozwiązywania problemów, dodanie banera wideo z motywem Dawn powinno być możliwe Shopify z łatwością.

Jakie są Twoje myśli? Daj nam znać w komentarzach, jeśli udało Ci się dodać baner wideo z motywem Dawn!