iModules — Szablon COSMO
[im4] ⭐ CODZIENNA PIELĘGNACJA 
W STYLU COSMO⭐
Trzykolumnowa sekcja contentowa do Storefront: lewa treść WYSIWYG, pionowe zdjęcie pośrodku oraz prawa treść z opcjonalnym zdjęciem. Moduł pozwala ustawić szerokość sekcji, odstępy i osobne zaokrąglenia każdego narożnika obu grafik.
Do czego służy moduł?
Moduł buduje responsywną sekcję contentową z trzema częściami: treścią po lewej, dużym zdjęciem pośrodku oraz treścią z opcjonalnym zdjęciem po prawej.
Najlepiej sprawdza się jako rozbudowana sekcja wizerunkowa lub informacyjna, w której tekst jest przeplatany dużymi zdjęciami. Treści po lewej i po prawej edytujesz przez WYSIWYG, a kształt obu grafik możesz dopasować niezależnymi promieniami narożników.

Układ zgodny z realnym frontemNa dostarczonym przykładzie lewa kolumna zawiera dwa bloki tekstowe, środkowa wysokie zdjęcie, a prawa blok tekstowy i niższe zdjęcie. Podgląd poniżej odtwarza właśnie ten układ i jego proporcje.

Jak skonfigurować sekcję?
W Ustawieniach ogólnych ustaw maksymalną szerokość sekcji oraz odstępy.
W sekcji Lewa kolumna wpisz treść przez edytor WYSIWYG.
Dodaj wymagane Zdjęcie środkowe i ustaw jego tekst ALT.
W Prawej kolumnie uzupełnij treść i — jeśli potrzebujesz — dodaj drugie zdjęcie.
Dla obu zdjęć możesz osobno ustawić zaokrąglenie każdego z czterech narożników.

Konfiguracja modułu
Panel po lewej odwzorowuje kolejność i typy pól z edytora Shoper. Wszystkie ustawienia tego modułu są oznaczone jako Live, ponieważ zmieniają renderowaną sekcję albo jej właściwości bezpośrednio w podglądzie.

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.
Zachowanie na urządzeniach mobilnych
Na dużym ekranie moduł korzysta z trzech kolumn. Przy mniejszej szerokości układ przechodzi najpierw w dwie kolumny, a na telefonie w jedną kolumnę.
Na mobile kolejność wynika bezpośrednio ze struktury modułu: lewa treść → zdjęcie środkowe → prawa treść → zdjęcie prawe. Obrazy nie są sztucznie kadrowane — źródło używa width: 100% i height: auto, więc zachowują własne proporcje.

Szybki test po konfiguracji
Sprawdź, czy oba bloki tekstowe nie są zbyt długie względem grafik.
Przełącz podgląd na Mobile i zweryfikuj kolejność elementów oraz odstępy.
Sprawdź zaokrąglenia każdego narożnika obu zdjęć.
Uzupełnij sensowne teksty ALT dla używanych grafik.
Jeżeli prawe zdjęcie nie jest potrzebne, pozostaw je puste — prawa treść nadal będzie działać.