Szablon "Nordic" został wyposażony w predefiniowane style dla wybranych modułów które umożliwią stworzenie treści podobnych do modułów aktywowanych na tej stronie. Strona opisu szablonu pozwoli Ci poznać wszystkie dodatkowe moduły zastosowane w szablonie i umożliwi Ci zastosowanie ich w swoim sklepie.

W razie dodatkowych pytań prosimy o kontakt droga mailową.

Ważne! - prosimy pamiętać, iż zakup szablonu nie wiąże się z zakupem treści zawartych w sklepie demonstracyjnym. Ustawienia modułów, treści oraz produkty dodane są tu jedynie jako prezentacja możliwości systemu. Zarządzanie szablonem umożliwia dodanie większej ilości treści oraz modułów. Zapraszamy do zapoznania się z możliwościami oprogramowania na stronie shoper.pl.

Dodając treści HTML do modułów prosimy zawsze wyłączyć edytor tekstu przez kliknięcie na przycisk w prawym górnym rogu edytora.

Moduł typu slajder/suwak jest podstawowym elementem systemu Shoper. Standardowo wyświetla się on jedynie w obrębie głównej części sklepu (max szerokość to 1180px). W szablonie "Nordic" górną sekcję z modułami przygotowaliśmy tak by każdy dodany moduł typu Slajder przyjmował szerokość 100% szerokości przeglądarki.

Aby osiągnąć podobny efekt jak w szablonie demonstracyjnym proszę stworzyć moduł typu slajder. Następnie dodać wszystkie potrzebne slajdy pamiętając by wielkość banerów była odpowiednio duża (polecamy użyć szerokości 1920px). Następnie proszę umieścić moduł w górnej sekcji z modułami (zaznaczona na podglądzie).

Ważne! - zdjęcia banerów najlepiej dodawać jako tło slajdów.

Moduł nr 1 to standardowy moduł typu HTML gdzie możemy dodać dowolną treść oraz zdjęcia. Został on wyposażony w efekt delikatnego powiększenia każdego zdjęcia jakie zostało w nim umieszczone.

Aby wasz moduł zadziałał jako Moduł nr 1 proszę wpisać w polu HTML ID wartość: nordic-box1

Ważne! - dodając zdjęcia do modułów typu HTML proszę pamiętać by nie wypełniać pola określającego jego wysokość. Ustawieni wysokości wyłączy responsywność tego zdjęcia

Moduł nr 2 to standardowy moduł typu HTML gdzie możemy dodać dowolną treść oraz zdjęcia. Został on wyposażony w efekt umożliwiający wyświetlenie dodatkowego opisu do zdjęcia.

Sam moduł został również podzielony na dwie równe części. W lewej zaplanowano miejsce na zdjęcia a z prawej na opis główny. Opis dodatkowy pojawi się automatycznie po najechaniu na ikonę plusa umieszczoną na środku modułu.

Aby wasz moduł zadziałał jako Moduł nr 2 proszę wpisać w polu HTML ID wartość: nordic-box2

Ważne! - dodając zdjęcia do modułów typu HTML proszę pamiętać by nie wypełniać pola określającego jego wysokość. Ustawieni wysokości wyłączy responsywność tego zdjęcia. Moduł został zoptymalizowany dla zdjęć o wielkości 990x740px. Aby moduł działał poprawnie muszą się w nim znaleźć wszystkie klasy zaprezentowane na zrzucie ekranu.
Treść modułu można skopiować > z tego miejsca <

Dodatkowy opis musi się znajdować w bloku o klasie "label".

Do stworzenia strony z galerią taką jak w w przykładowym sklepie musimy użyć tzw. GRID'a HTML by poszczególne sekcje odpowiednio zachowywały się w wersjach mobilnych sklepu. Dla ułatwienia, całą treść użytą w szablonie demonstracyjnym można pobrać z tej strony:

link do treści

Aby dodać galerię przejdź do działu Zawartość/Strony informacyjne i dodaj nową stronę informacyjną.
Następnie wyłącz edytor HTML (przycisk w prawym górnym rogu edytora) i wklej treść HTML z przykładu. Teraz ponownie kliknij na przycisk tak by włączyć edytor. Zauważysz że zdjęcia nie będą się wyświetlały poprawnie. Aby podmienić je na właściwe wystarczy że klikniesz na dane zdjęcie i użyjesz funkcji dodania zdjęcia dostępnej w edytorze. Pamiętaj by przy podmienianiu zdjęć nie ustalić wartości dla ich wysokości.

Możesz też wymienić zdjęcia poprawiając ich nazwy na właściwe bezpośrednio w kodzie HTML.

Ważne! - wykonując jakiekolwiek zmiany uważaj by nie usunąć zapisów HTML z nazwami klas poszczególnych elementów. Jeżeli chcesz wstawić na stronę główną moduł ze zdjęciem na całą szerokość przeglądarki wstaw w polu HTML ID wartość: nordic-film

Do stworzenia Modułu nr 3 (ten z czterema sekcjami z ikonami) musimy użyć tzw. GRID'a HTML by poszczególne sekcje odpowiednio zachowywały się w wersjach mobilnych sklepu. Dla ułatwienia, całą treść użytą w szablonie demonstracyjnym można pobrać z tej strony:

link do treści

Aby wasz moduł zadziałał jako Moduł nr 3 proszę wpisać w polu HTML ID wartość: nordic-box3.

Aby dodać treść modułu wyłącz edytor HTML (przycisk w prawym górnym rogu edytora) i wklej treść HTML z przykładu. Teraz ponownie kliknij na przycisk tak by włączyć edytor. Teraz możesz wymienić treść tekstową na odpowiednią.

Ważne! - wykonując jakiekolwiek zmiany uważaj by nie usunąć zapisów HTML z nazwami klas poszczególnych elementów.

Kolor tła nagłówka oraz menu jest ustalony na stałe w kodzie więc do jego zmiany trzeba dodać kawałek kodu CSS na zakładce "Własny styl CSS".

Np. chcąc zmienić kolor nagłówka i menu na biały trzeba wstawić taki kawałek kodu:

Ikony social media dodane są w Stopce użytkownika. Jeżeli chcesz użyć podobnego efektu animacji na Twoich ikonach jedyne co musisz dodać to klasę "social" do kontenera w którym znajdują się ikony.

Jak to zrobić?

Przejdź co zarządzania wyglądem Twojego szablon a następnie wejdź na zakładkę "Stopka". Korzystając z edytora dodaj takie zdjęcia ikonek jak potrzebujesz i podepnij do nich linki (jeżeli chcesz użyć tych co są na stronie demo to znajdziesz je wśród plików graficznych szablonu). Po zapisaniu zmian wyłącz edytor HTML przyciskiem w prawym górnym rogu a następnie dodaj klasę do znacznika "p" tak by wyglądał jako kod poniżej.

<p> zamień na <p class="social">