iModules — Szablon COSMO
[im4] ⭐ Rozbudowane zalety⭐
Rozbudowany moduł zalet: główna grafika po lewej lub prawej stronie, tytuł z linią i akcentem, repeater zalet z ikonami i treścią oraz opcjonalny przycisk CTA. Ustawienia obejmują układ, grafikę, typografię, odstępy, kolory i pełny styl przycisku.
Do czego służy moduł?
Moduł tworzy rozbudowaną sekcję prezentującą najważniejsze zalety, przewagi lub etapy. Składa się z dużej grafiki, tytułu, listy zalet z ikonami oraz opcjonalnego przycisku.
Grafikę możesz ustawić po lewej albo prawej stronie. Każda zaleta ma własną ikonę, tytuł i treść WYSIWYG, a wygląd całej sekcji można dopasować bez dodatkowego CSS.

Układ z dostarczonego przykładuW realnym wdrożeniu COSMO moduł jest użyty w dwóch sąsiadujących kolumnach strony. W podglądzie tylko aktualnie dokumentowany moduł jest kolorowy i interaktywny; sąsiedni fragment strony jest pokazany jako neutralny skeleton.

Jak skonfigurować moduł?
Ustaw unikalną klasę modułu — bez niej Twig nie renderuje sekcji.
Wybierz pozycję głównej grafiki, jej szerokość, wysokość, kadrowanie i zaokrąglenia.
Wpisz tytuł i zdecyduj, czy pod nim ma pojawić się linia oraz kolorowy akcent.
W sekcji Zalety dodaj od 1 do 12 pozycji. Każda może mieć ikonę, ALT, tytuł i treść.
Na końcu skonfiguruj typografię i opcjonalny przycisk CTA.

Konfiguracja modułu
Symulator odwzorowuje kolejność i typy pól z edytora Shoper. Zmiana wartości nie resetuje stanu lewego panelu: otwarte zakładki, pozycja scrolla, tryb Desktop/Mobile i fokus pozostają bez zmian. Dodanie lub usunięcie zalety przebudowuje wyłącznie repeater i również odtwarza jego stan.

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.
Responsywność
Przy szerokości poniżej 992 px układ przechodzi do jednej kolumny: grafika znajduje się nad treścią i korzysta z osobnej wartości Wysokość grafiki mobile.
Poniżej 576 px każda zaleta układa ikonę nad tekstem, a tytuł, opis oraz przycisk są wyśrodkowane. To zachowanie wynika bezpośrednio z kodu Twig/CSS modułu.

Szybki test przed publikacją
Sprawdź, czy unikalna klasa jest uzupełniona.
Przetestuj pozycję grafiki po lewej i prawej stronie.
Zweryfikuj kadrowanie grafiki na Desktop i Mobile.
Sprawdź, czy wszystkie zalety mają poprawne ikony, ALT-y, tytuły i treści.
Jeśli używasz przycisku, sprawdź link i ustawienie otwierania w nowej karcie.
Przełącz preview na Mobile i upewnij się, że teksty nie są zbyt długie dla układu jednokolumnowego.