iModules — Szablon COSMO
[im4] ⭐ Sekcja sprzedażowa⭐
Trzykolumnowa sekcja sprzedażowa z dwiema grafikami, centralnym boxem treści, ikoną i CTA. Na mobile źródłowy CSS ukrywa boczne grafiki.
Do czego służy moduł?
Sekcja sprzedażowa buduje trzyczęściowy baner: grafikę po lewej, centralny box z nagłówkiem, opisem, ikoną i przyciskiem oraz grafikę po prawej. Moduł nadaje się m.in. do prezentacji konkretnej kategorii, serii produktów, promocji albo wyróżnienia kluczowej oferty.

Szybka konfiguracja
Wgraj lewą i prawą grafikę.
Ustaw Tytuł oraz Treść środkowego boxa.
Opcjonalnie wgraj ikonę treści.
Włącz przycisk, wpisz jego tekst i link.
Dopasuj szerokości kolumn oraz parametr Nachodzenie boxa na grafiki.
Na końcu ustaw kolory, zaokrąglenia, cień i typografię.

Zachowanie na telefonieW aktualnym źródle modułu dla szerokości do 991 px obie boczne grafiki są ukrywane. Na mobile pozostaje sam centralny box z treścią, ikoną i przyciskiem. Tekst i przycisk są wtedy automatycznie wyśrodkowane.

Konfiguracja modułu
Poniższy symulator odwzorowuje formularz modułu z Shopera. Zmiany pól LIVE są nanoszone na prawy podgląd bez przeładowania formularza. Fioletowe S użyłem tylko przy dwóch polach wysokości grafik mobile, ponieważ obecny CSS ukrywa te grafiki na telefonie i nie da się uczciwie pokazać ich efektu.

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.
Jak uzyskać typowy układ sprzedażowy?
Najbardziej charakterystyczny efekt daje układ z bocznymi grafikami po około 25–30% szerokości oraz centralnym boxem nachodzącym na obie strony. Parametr Nachodzenie boxa na grafiki działa przez ujemny margines środkowej karty — zwiększaj go stopniowo, aż karta wejdzie na grafiki w pożądanym stopniu.
Jeżeli zdjęcie jest mocno kadrowane, ustaw Dopasowanie = Wypełnij i skoryguj kadr polem pozycji, np. center top albo 50% 20%.

Przycisk i link
Przycisk może prowadzić do kategorii, produktu, landing page lub dowolnego adresu. Po włączeniu opcji Otwórz przycisk w nowej karcie Twig dodaje target="_blank" oraz zabezpieczenie rel="noopener noreferrer".

Ustawienia zaawansowane
Wysokość lewej/prawej grafiki mobilePola istnieją w konfiguracji i są wpisywane do CSS, ale aktualny moduł jednocześnie ustawia dla .imod-skinfriend__media display:none przy szerokości do 991 px. Z tego powodu wartości wysokości mobile nie są obecnie widoczne na froncie.

Najczęstsze problemy
Box za mocno nachodzi na grafiki — zmniejsz wartość „Nachodzenie boxa na grafiki”.
Zdjęcie ucina ważny fragment — zmień pozycję obrazu albo użyj trybu „Dopasuj”.
Przycisku nie widać — sprawdź, czy opcja „Pokaż przycisk” jest aktywna oraz czy „Tekst przycisku” nie jest pusty.
Brak całej sekcji — sprawdź pole „Włącz moduł”.