[im3] ⭐ Zalety ⭐

Prosty moduł zalet z kafelkami zawierającymi ikonę, nagłówek i opis; na mobile automatycznie działa jako poziomo przewijana lista.

Do czego służy moduł?

Moduł Zalety wyświetla rząd prostych kafelków z ikoną, nagłówkiem i opisem. Sprawdza się do pokazania najważniejszych przewag sklepu, np. dostawy, płatności, zwrotów albo wsparcia.

Najprostsza konfiguracja

Dodaj 3–5 najważniejszych zalet, przypisz każdej krótką ikonę, nagłówek i jednozdaniowy opis. Na mobile kafelki automatycznie zmieniają się w poziomo przewijaną listę.

Jak skonfigurować moduł?

W sekcji Ustawienie zalet ustaw odstępy, padding kafelków, maksymalną szerokość oraz rozmiary tekstu.
W sekcji Lista zalet rozwiń każdą pozycję i uzupełnij nagłówek, opis oraz ikonę.
Dodaj kolejne pozycje przyciskiem Dodaj. Moduł obsługuje maksymalnie 10 zalet.
Sprawdź efekt w widoku Desktop i Mobile.

Konfigurator i podgląd na żywo

Konfigurator poniżej odwzorowuje pola modułu ze źródłowego config.json. Zielone pola LIVE zmieniają prawy podgląd natychmiast. Fioletowe S oznaczają pola, które istnieją w konfiguracji, ale aktualny kod modułu ich nie wykorzystuje.

Responsywność

Na desktopie zalety są ułożone obok siebie i wykorzystują ustawiony odstęp oraz rozmiary fontów. Poniżej 768 px źródło przełącza moduł w poziomo przewijany pasek: każdy kafelek ma około 64% szerokości, odstęp jest ustawiony na 10 px, tytuł ma 17 px, a opis 14 px. Ikony są na mobile delikatnie pomniejszone.

Ważne: pola koloru

Aktualny kod nie używa dwóch ustawień

Pola Kolor czcionki w tytule oraz Kolor czcionki opisu są zdefiniowane w formularzu modułu, ale nie występują w aktualnym module.twig. Zmiana tych pól nie ma obecnie wpływu na front sklepu.

Szybki test przed publikacją

Każda zaleta ma ikonę, krótki nagłówek i zwięzły opis.
Na desktopie kafelki mieszczą się bez niepotrzebnego ścisku.
Na mobile można wygodnie przesuwać zalety poziomo.
Teksty nie są zbyt długie — szczególnie przy 4–6 zaletach.

Szczegóły techniczne

Moduł nie korzysta z dodatkowego JavaScriptu. Układ i responsywność są realizowane przez CSS osadzony w Twig. Na hoverze desktopowym dolna krawędź kafelka przyjmuje kolor var(--primaryColor), a ikona skaluje się do 110%.