Pokaz slajdów – generowanie banerów rotacyjnych

Moduł Pokaz slajdów umożliwia tworzenie dynamicznych, przewijanych banerów, które możesz łatwo zarządzać i umieszczać w dowolnym miejscu sklepu. To doskonałe narzędzie do prezentowania promocji, nowości, komunikatów lub wyróżnionych produktów.

W zakładce Wygląd i treści → Pokaz slajdów możesz szybko wygenerować znacznik z wybraną grupą slajdów i umieścić go w dowolnym miejscu sklepu — na przykład w opisie kategorii, stronie informacyjnej lub bloku HTML.

Specyfikacja banerów

Moduł Pokaz slajdów  ma możliwość dodawania bannerów oddzielnie dla mobile (smartfony, tablety) i desktop (komputery klasy PC).

Dobrą praktyką jest, aby banery desktop i mobile miały te same rozdzielczości:

• banery desktop: 1320x450px,
• bannery mobile: 800x450px

Unikaj spacji w nazwach folderów i plików graficznych (szczególnie dla wersji mobile)

Aby zdjęcia (np. w sliderze lub banerach) ładowały się prawidłowo, nigdy nie używaj spacji w nazwach folderów ani plików. Spacje mogą powodować błędy w ścieżce lub sprawiać, że obraz nie załaduje się poprawnie.

Zamiast spacji używaj znaków:

podkreślenia ( _ ), np. kwiecien_2024

myślnika ( – ), np. kwiecien-2024

• Błędna ścieżka: /img/bannery/zyczenia/kwiecien 2024/zyczenia_800_1900.jpg 
• Poprawna ścieżka: /img/bannery/zyczenia/kwiecien_2024/zyczenia_800_1900.jpg

Banery wideo

Techniczne wskazówki:

• Optymalizacja: plik wideo powinien być odpowiednio skompresowany, aby nie spowalniał ładowania strony głównej na urządzeniach mobilnych. Pamiętaj, że dodając duży plik wideo wzrośnie też transfer sklepu.
• Długość: najlepiej sprawdzają się krótkie, kilkusekundowe ujęcia (loopy), które tworzą płynne tło dla komunikatów sprzedażowych.

Konfiguracja:

Baner wideo dodajemy standardowo w pokazie slajdów, zamiast przycisku „wybierz obraz”, użyj przykładowego kodu html:

<div style="max-width: 1320px">
    <a href="/nowosci.html" style="display: block; line-height: 0;">
        <video autoplay loop muted playsinline style="width: 100%; height: auto;">
            <source src="/img/banner-video2.mp4" type="video/mp4">
            Twoja przeglądarka nie obsługuje elementu wideo.
        </video>
    </a>
</div>

Adres docelowy (Link): w miejsce href=”/nowosci.html” wpisz ścieżkę lub pełny adres URL, na który ma zostać przekierowany użytkownik po kliknięciu w baner.

Źródło pliku wideo: w sekcji <source src=”/img/banner-video2.mp4” podaj ścieżkę do Twojego pliku wideo.

Wgrywanie plików: pamiętaj, że w pierwszej kolejności należy dodać