iModules — Szablon COSMO
[UPDATE] ⭐ Grafiki kafelki v2 [09.2026] ⭐
Grafiki kafelki v2 — instrukcja z kreatorem układu, pełną pomocą LIVE/S, breakpointem Laptop i ustawieniami wyglądu. v07 naprawia obsługę pomocy w statycznej sekcji po lewej: odstępy, ustawienia responsywne, unikalne ID oraz wszystkie pozostałe stałe kontrolki otwierają teraz tooltip i pełny opis.
Do czego służy moduł?
Grafiki kafelki v2 - GEAR pozwala budować elastyczne siatki banerów / kafelków graficznych. Aktualizacja rozszerza generator o osobny widok Laptop, responsywne odstępy, nowe opcje wyglądu i pozycjonowania oraz dodatkowe ustawienia pojedynczego kafelka.
Kreator nadal obsługuje przeciąganie kafelków, zmianę ich szerokości i wysokości oraz bibliotekę gotowych układów 2–8 banerów. Presety zachowują dotychczasowy kierunek, a układ laptopowy jest automatycznie budowany na bazie wariantu desktopowego i można go później dopracować osobno.

Formularz modułu 1:1 z Shoper / SVE + kreator układu
Interaktywny podgląd
Interaktywny symulator jest dostępny w pełnym widoku instrukcji. Wersja dla czytników AI pomija kod i dane symulatora, aby dokument pozostał lekki.
Najważniejsze zasady działania
Podgląd ma teraz cztery widoki: Desktop / Laptop / Tablet / Telefon.
Kliknięcie koła zębatego na kafelku ustawia szerokość i wysokość osobno dla aktywnego urządzenia.
Możesz włączyć osobny odstęp między kafelkami dla każdego urządzenia.
Sekcja Wygląd i interakcje steruje zoomem hover, zaokrągleniem, pozycją grafiki oraz boxem z treścią.
Każdy kafelek może mieć własny ALT, własny kolor ramki hover, link na całym kafelku oraz otwieranie w nowej karcie.
Gotowe układy 2–8 pozostają dostępne i po załadowaniu generują także kod laptopowy.

Responsywność układuLaptop ma osobny breakpoint do 1440 px. Jeżeli w realnym module kod laptopa pozostanie pusty, front dziedziczy układ desktopowy. Tablet działa do 1024 px, a telefon do 768 px. W generatorze możesz przygotować osobny układ dla każdego z tych widoków.

Jak pracować z tą instrukcją?
Ustaw podstawowe opcje modułu i wgraj grafiki po lewej stronie.
Jeżeli chcesz szybki start, użyj przycisku Gotowe układy i załaduj preset dla wybranej liczby banerów.
Doprecyzuj układ przeciągając kafelki na wizualizacji albo zmieniając szerokość / wysokość w dymku ustawień.
Na końcu skopiuj układ lub przepisz kody grida z lewej strony do docelowego modułu w Shoperze.

Historia aktualizacji
18.09.2026 — Rozbudowa responsywności i konfiguracji kafelkówRozszerzyliśmy moduł o dodatkowe ustawienia responsywne oraz większą kontrolę nad wyglądem i zachowaniem pojedynczych kafelków.
dodano osobny układ Laptop pomiędzy Desktopem a Tabletem,
dodano możliwość ustawienia osobnego odstępu między kafelkami dla Desktopu, Laptopa, Tabletu i Telefonu,
rozbudowano generator układu o osobne kody grida dla Desktop / Laptop / Tablet / Telefon,
dodano powiększenie grafiki po najechaniu wraz z regulacją skali efektu,
dodano ustawienie zaokrąglenia kafelków oraz pozycjonowania grafiki w pionie i poziomie,
rozbudowano box z treścią o wybór pozycji, odstępu od krawędzi, koloru tła i zaokrąglenia,
dla pojedynczego kafelka dodano tekst ALT grafiki, możliwość użycia własnego koloru ramki hover, ustawienie całego kafelka jako linku oraz otwieranie linku w nowej karcie,
gotowe układy 2–8 banerów zostały rozszerzone o konfigurację dla widoku laptopowego.