Instrukcja›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.

Miniatura modułu: [im4] ⭐ Rozbudowane zalety⭐

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ładu

W 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ł?

  1. Ustaw unikalną klasę modułu — bez niej Twig nie renderuje sekcji.
  2. Wybierz pozycję głównej grafiki, jej szerokość, wysokość, kadrowanie i zaokrąglenia.
  3. Wpisz tytuł i zdecyduj, czy pod nim ma pojawić się linia oraz kolorowy akcent.
  4. W sekcji Zalety dodaj od 1 do 12 pozycji. Każda może mieć ikonę, ALT, tytuł i treść.
  5. 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.

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.