Czego dowiesz się z poradnika:

• jakie zastosowanie mają takie kontenery;
• jak ich używać bez znajomości HTML i CSS;
• zobaczysz przykłady użycia z konkretnych sklepów;
• dowiesz się krok po kroku, jak wygląda tworzenie układów kolumnowych, które na telefonach zmienią sposób wyświetlania.

Przykłady wykorzystania kontenerów

Czasem mamy potrzebę wzbogacenia wyglądu sklepu. Dobrze przy tym, aby wszystkie moduły były responsywne – skalowały i wyświetlały się poprawnie na telefonach, tabletach jak i laptopach oraz komputerach. O czym właściwie mowa? Spójrz na przykłady:

Uwaga: Pamiętaj, że podane przykłady to jedynie zrzuty ekranu, nie będą się zmieniały na różnych ekranach. W odsyłaczach do źródeł możesz sprawdzić, jak zachowują się na wskazanych sklepach.

Kliknij obrazek, aby powiększyć. Ikony z podpisami omawiające wyróżniki produktu lub marki. Na telefonie ikony pojawiają się jedna pod drugą. Źródło: MpConcept.pl

Kliknij obrazek, aby powiększyć. Urozmaicenie wizualne karty produktu. W układzie mobilnym elementy układają się odpowiednio jeden pod drugim. Źródło: Glamdog.pl

Kliknij obrazek, aby powiększyć. Responsywne kategorie obrazkowe. Pozwalają urozmaicić stronę główną i szybciej przekierować klienta do promowanych kategorii. Źródło: BieliznaDlaCiebie-sklep.pl

Nawet jeśli edytor wizualny sklepu na coś nie pozwala, nie oznacza to absolutnie, że to niemożliwe. Jeśli tylko wiemy, jaki kod gdzie przekopiować, bez trudu dokonamy ciekawych modyfikacji. Jeśli z kolei mamy chociaż podstawową wiedzę na temat HTML i CSS – uda nam się zmodyfikować jeszcze więcej. W tym poradniku pokażemy, jak dokonać ciekawych zmian bez zrozumienia kodu i za darmo. Musisz jednak przygotować wcześniej ciekawe grafiki lub zdjęcia.

Opisany moduł jest modyfikacją wprowadzaną we własnym zakresie, nieobjętą wsparciem technicznym.

Wariant podstawowy – dwie kolumny

Uwaga: Ze względów bezpieczeństwa w sklepach Shoper domyślnie własny kod HTML jest czyszczony. Przejdź do zakładki Ustawienia > Zaawansowane > Bezpieczeństwo i zaznacz opcję Wyłącz czyszczenie kodu HTML i zapisz zmiany.

Weźmy pod uwagę taki przykład: chcesz, aby obok siebie były dwa kontenery z obrazkami, które po kliknięciu odsyłają w jakieś wskazane miejsce. Finalny efekt ma być taki, jak poniżej, natomiast na mobile obrazki mają się znajdować jeden pod drugim:

Nie są to wymiary obowiązkowe. To przykładowe, optymalne wymiary obrazków, które będą się wyświetlały dobrze w większości sklepów Shoper (większość sklepów posiada środkową kolumnę na szerokość 1080 pikseli).l

Przejdź do Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Moduły > + dodaj moduł. W sekcji tytuł wpisz nazwę, którą później szybko rozpoznasz na liście modułów np. kontenery na stronie głównej. 

W polu edytora wizualnego wgraj pierwszy z obrazków. Pamiętaj, aby była podana tylko szerokość, a wymiar wysokości usuń (nie podawaj obu wymiarów). Dzięki takiemu ustawieniu, bez wymiarów podanych „na sztywno” obrazek będzie się poprawnie wyświetlał na urządzeniach mobilnych.

Zwróć również uwagę na pole opis obrazka – tekst alternatywny (w skrócie alt), który jest wyświetlany, kiedy obrazek się nie załaduje. Ma pewne znaczenie dla optymalizacji pod kątem wyników wyszukiwania (SEO) – ale także nie należy go przeceniać. Tekst alternatywny powinien opisywać obrazek lub miejsce, do którego odsyła np. kategorie). Po wstawieniu obrazka wciśnij strzałkę w prawo i kliknij enter, żeby łatwo i szybko przejść do kolejnej linijki.

Analogicznie dodaj drugi obrazek.

Teraz zaznacz obrazek i dodaj link – wklej adres, do którego klient będzie przekierowany po kliknięciu. Postępuj jak na animacji:

Gdy oba obrazki mają dodane odsyłacze, wciśnij przycisk wyłącz edytor, aby z edytora wizualnego przejść do trybu kodu HTML.

W nowej karcie otwórz stronę: https://developers.shoper.pl/theme-development/rwd 

Przejdź do linijki Flex grid – 12 columns. Zobaczysz tam różne układy kolumnowe. Każdy z nich reprezentuje inny kod. Nas interesuje układ dwukolumnowy:

Z przykładów przejdź do zakładki HTML, aby pobrać kod.

Jak możesz się łatwo domyślić, interesuje cię zaznaczony powyżej fragment. W nim również pojawia się 2.1 oraz 2.2. Bez zagłębiania się w szczegóły, po prostu skopiuj ten fragment kodu.

Teraz wróć do obrazków w panelu sklepu. Zobaczysz mniej więcej taki kod:

Fragment z jednym linkiem i obrazkiem i bardzo podobny fragment z drugą grafiką i odsyłaczem. Oba będą między <p> oraz </p> – akapicie.

U samej góry wklej skopiowany wcześniej kod. Teraz w zależności od tego, czy dany obrazek ma być po lewej, czy po prawej, przeklej kody obrazków, zastępując 2.1 i 2.2. Lepiej zobrazuje to poniższy zrzut ekranu:

Wytnij (ctrl + x lub prawy kliknięcie prawym przyciskiem myszy i opcja wytnij) fragment odpowiedzialny za jeden z obrazków i wstaw w miejsce „2.1”. „2.2” zastąp pozostałym fragmentem kodu. Następnie usuń zbędne linijki odstępów („entery”), jeśli takie zostały.

Wracamy do edytora wizualnego, wybierając przycisk włącz edytor. Kliknij dowolne miejsce i wciśnij ctrl + a, aby zaznaczyć wszystko we właśnie utworzonym moduke. Wybierz ikonę wyśrodkowania, aby całość zgrabnie wyświetlała się na mniejszych ekranach telefonów komórkowych. Pozostaje zapisać zmiany.

Wstawiamy responsywny moduł w sklepie Shoper

Teraz pora zamieścić dopiero co utworzony moduł na stronie głównej. W swoim panelu sklepu przejdź do zakładki Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Moduły > Strona główna.

Z listy dostępnych modułów przemieść nowy moduł do wybranego przez siebie miejsca i zapisz zmiany.

Co z kartą produktu?

Tę samą mechanikę możesz zastosować przy kartach produktów, które najbardziej cię interesują.

1. Najpierw opracuj opis.
2. Użyj w nim nagłówków, pogrubień, dobrego formatowania tekstu.
3. Wstaw obrazek (pamiętaj o usunięciu wymiaru wysokości).
4. Następnie wyłącz edytor wizualny i przejdź do widoku z kodem.
5. U samej góry wklej kod skopiowany ze wskazanej przez nas wcześniej strony.
6. W miejsce „2.1” wklej fragment kodu odpowiedzialny za wyświetlanie obrazka. Poznasz go bardzo łatwo, bo zawiera skrót img (z angielskiego image – obrazek) i tekst alternatywny (alt) taki, jaki wcześniej został wpisany. Jeśli martwisz się, że nie rozpoznasz kodu z obrazkiem, po prostu kilkukrotnie wciśnij enter. Uda ci się łatwiej rozróżnić opis od obrazka.
7. W miejsce „2.2” wklej kod, który pozostał. Jest to treść odpowiedzialna za formatowanie twojego opisu.

• Wyłącz edytor HTML, zaznacz obrazek i kliknij wyśrodkowanie, aby estetycznie wyświetlał się na telefonie (nie wyrównany do lewej strony z marginesem po prawej).

1. Zapisz zmiany i zobacz, jak produkt prezentuje się w sklepie. Po lewej stronie będzie znajdował się obrazek, a po prawej sformatowany tekst. Warto zwrócić uwagę na to, że nie może być dużych dysproporcji między tekstem a wysokością obrazka. Zbyt wysoki obrazek i mało tekstu sprawią, że pod tekstem będzie zbyt wiele pustej przestrzeni. Niewielki obrazek i bardzo dużo tekstu zaowocują nieestetyczną przerwą pod obrazekiem.

Modyfikacje dla bardziej zaawansowanych

Podoba mi się! Chcę więcej kolumn

Wystarczy, że na stronie https://developers.shoper.pl/theme-development/rwd przekopiujesz inny fragment kodu. Doskonałym przykładem są cztery kolumny z kategoriami obrazkowymi. Zobacz nasz poradnik w tym temacie.

Przykład z ikonami obrazującymi wyróżniki marki, z dodanymi nagłówkami i podpisami, opisaliśmy w tym poradniku. To doskonały moduł do wykorzystania na stronie głównej, czy do wstawienia jako moduł na kartach produktów („Szczegóły produktu” w zakładce Styl graficzny & Nawigacja > Aktywny styl graficzny > Moduły).

Do dyspozycji masz różne układy: 

12-kolumnowy „Flex grid – 12 columns” z marginesami dookoła:

• jedna kolumna na 100% szerokości,
• dwie kolumny,
• trzy kolumny,
• cztery kolumny,
• sześć kolumn,
• dwanaście kolumn.

Układ dwunastokolumnowy działa w ten sposób, że liczba kolumn musi być dzielnikiem liczby 12. Dlatego tą metodą nie uzyskasz np. pięciu kolumn.

10-kolumnowy „Flex grid – 10 columns” bez marginesów między kolumnami

Ten układ oferuje różne możliwości, także układy, gdzie kolumny nie mają równej szerokości:

Podoba mi się! Chcę nieco pokombinować

Z reguły bardziej skomplikowane układy stosuje się jednorazowo – na przykład dla stworzenia bardziej rozbudowanej, ciekawej strony głównej. W wypadku produktów, bardziej złożone układy są rzadziej spotykane.

Spotykaną praktyką jest jednak przygotowanie szablonu. Możesz utworzyć szablon dla najważniejszych produktów, następnie podmieniać jedynie treść.

Tutaj warto posiadać większe zrozumienie kodu, jednak spróbujemy uprościć schemat działania. Kontenery można nawzajem w sobie zagnieżdżać. Na stronie możesz skorzystać z dwóch gotowych przykładów, których kod przekopiujesz, po przejściu do zakładki HTML:

To przykłady z gotowym kodem do skopiowania. Jeśli interesuje cię układ z drugiej linijki, porządane rzeczy wklejasz jedynie w miejsca 2.1.1, 2.1.2 itd.

Chcąc zaprojektować własny układ, zacznij od rozrysowania tabel. Załóżmy, że interesuje nas taki podział:

1. Przygotuj zawartość modułu: obrazki, teksty – wszystko co ma się znajdować w poszczególnych miejscach.

2. Przekopiuj kod odpowiedzialny za wyświetlanie dwóch kolumn:

3. Wklej go u samej góry edytora. W miejsce pierwszej kolumny – „2.1” – wklej ten sam kod raz jeszcze. W ten sposób wewnątrz pierwszej kolumny zamieścisz układ dwukolumnowy.

4. Pod całym kodem będzie się znajdował kod obrazków czy treści – zrobionych wcześniej w edytorze wizualnym. Pozostaje przekleić go po kolei w miejsce kolumn: 2.1, 2.2 (które są w pierwszej kolumnie) i 2.2 (szerokiej na połowę strony drugiej kolumny).