zaloguj się

Zobacz także

Samodzielna edycja wyglądu sklepu internetowego - ilustrowana instrukcja.

Skorzystaj z edytora maski graficznej Twojego sklepu. Łatwa, bezpieczna i darmowa edycja wyglądu sklepu internetowego, aby szybko, bezpłatnie, o dowolnej porze zmienić swoją hurtownię lub sklep internetowy.

Wszystkie funkcje edycji maski są umieszczone w panelu administracyjnym sklepu. Utrzymane są w tej samej konwencji co inne moduły. Dzięki temu praca nad wyglądem sklepu nie wymaga instalacji dodatkowych narzędzi na komputerze i może ją wykonać każda osoba, której przydzielisz konto w panelu administracyjnym.

Narzędzia do edycji wyglądu sklepu pozwolą Ci zmieniać kolorystykę, tła, przyciski, teksty. Do zmian w zakresie wyglądu wymagana jest znajomość CSS. Zmiany w zakresie kodu HTML i Javascript - a więc zmiany polegające na dodawaniu, usuwaniu komponentów i funkcji - nie są możliwe do wykonania za pomocą edytora wyglądu sklepu. Takie zmiany prosimy zlecać do działu graficznego IAI za pomocą komunikatów.

Zapraszamy do zapoznania się z ilustrowaną instrukcją edycji wyglądu sklepu (dostępna tylko dla zalogowanych):

1 - Obecny wygląd sklepu - przyjmijmy, że Twoim zamiarem jest wyróżnienie listy kategorii oraz formularza kontaktu.2 - Zaloguj się do swojego panelu administracyjnego sklepu i przejdź do działu <b>MODERACJA > Zmiana, aktualizacja, edycja i tłumaczenie maski</b>.3 - Dalej znajdziesz sekcję <b>Edycja maski</b> - kliknij link [wybierz].4 - Spośród dostępnych masek graficznych wybierz tę, którą chcesz zmienić i kliknij <b>[stwórz wersję do edycji]</b>.5 - Na liście pojawiła się nowa maska. Każda maska możliwa do edycji jest odpowiednio oznaczona. Kliknij na <b>[edytuj]</b>, aby rozpocząć zmiany.6 - W nowej karcie przeglądarki otworzy się strona Twojego sklepu. W lewym górnym rogu znajdują się opcje związane z nanoszeniem zmian. Jeżeli chcesz zmienić coś na obecnie oglądanej stronie, upewnij się, że edycja jest włączona. Jeżeli chcesz przejść na inną podstronę - wyłącz edycję.7 - Zmiana wyglądu elementu odbywa się poprzez kliknięcie na niego kursorem przy włączonym trybie edycji. W przykładzie kliknięto na jedną z kategorii w menu.8 - Otworzy się dodatkowe okno zawierające listę klas CSS i odpowiadających im stylów. Lista obejmuje wszystkie klasy występujące w całym komponencie, czyli w tym przypadku w całym boksie bocznego menu kategorii. Dla ułatwienia style dotyczące klikniętego przed chwilą elementu zostały wyróżnione zielonym tłem. Jeżeli element składa się z zagnieżdżonych znaczników, na przykład A jest wewnątrz DIV, wtedy wyróżnione zostaną style obu elementów.9 - W naszym przykładzie chcesz zmienić kolor czcionki. Wprowadź nowy kolor w dowolnej notacji dopuszczalnej dla CSS.10 - Po wpisaniu wszystkich zmian zatwierdź je klikając na <b>Zapisz zmiany</b>. Zmiany w stylach będą widoczne od razu.11 - Niektóre przeglądarki inaczej interpretują te same style. W zakładce <b>Wyjątki CSS</b> znajdziesz możliwość wprowadzenia odmiennych ustawień przeznaczonych dla niektórych przeglądarek.12 - Masz dostęp nie tylko do CSS. Możesz zmienić również teksty zaszyte w masce sklepu. W tym celu przejdź do zakładki <b>Literały</b> i wprowadź zmiany. Jeżeli brakuje którejś z zakładek u góry okna, oznacza to, że w tym komponencie nie występują teksty lub grafiki. Zauważ, że masz dostęp do tekstów i grafik w każdej z wersji językowych włączonych w tej masce.13 - Zmiany w tekstach widoczne są w podglądzie strony od razu po zapisaniu.14 - Oprócz tekstów i kolorów można oczywiscie wymieniać użyte przy budowie maski pliki graficzne. Dla przyciągnięcia większej uwagi klienta wymień szary przycisk na niebieski. Tak jak wcześniej, zacznij od kliknięcia na zmienianym przycisku.15 - Kliknięcie na przycisk wywołało znane Ci już okienko ze stylami. Oprócz automatycznego wyróżnienia klikniętego elementu możesz sprawdzić czego dotyczą inne klasy najeżdżając na nie kursorem i obserwując podgląd strony w tle. Przy klasie dotyczącej Twojego przycisku pojawił się nowy element - grupa CSS. Niektóre elementy mają wspólnie ustalone style po to, aby można było jedną operacją zmienić wiele powtarzających się w wielu miejscach sklepu elementów. Przycisk nie ma zdefiniowanych żadnych stylów w swojej klasie, a więc wszystkie ustawienia są zebrane w grupie. Kliknij <b>[edytuj grupę CSS]</b>.16 - W nowym okienku dotyczącym grupy CSS znajdziesz style i w drugiej zakładce plik graficzny przycisku. Grafika zawiera dwie wersje przycisku - podstawowy wygląd i wygląd po najechaniu kursorem. Zapisz grafikę i przygotuj własną jej wersję.17 - Wgraj własną grafikę do formularza i zapisz zmiany. Ponieważ przeglądarka zachowała poprzedni wygląd grafiki w pamięci podręcznej, prawdopodobnie nie zobaczysz zmiany od razu w podglądzie strony. Odśwież stronę Ctrl+F5, aby załadować nową wersję grafiki.18 - Zmiany stylów zebranych w grupy są możliwe nie tylko z poziomu pojedynczego komponentu. Opcja ta widnieje również w boksie w rogu strony. Użyj tej metody jeżeli planujesz masowe zmiany w wyglądzie strony. Dzięki temu z jednego miejsca zmienisz wiele elementów obecnych na różnych podstronach jedną operacją. Możesz w ten sposób szybko zmienić na przykład kolor cen w całym sklepie lub kolor i wyrównanie wszystkich nagłówków podstron sklepu.19 - Edycja grup CSS to rownież szybki dostęp do większości grafik użytych w masce. W ten sposób łatwo pobierzesz i wymienisz wszystkie przyciski we wszystkich wersjach językowych.20 - Oprócz zmian w poszczególnych wskazanych przez kliknięcie komponentach, które stanowią fragmenty całego kodu danej podstrony, masz też dostęp do ogólnych stylów związanych z układem całej strony, tłem oraz domyślnymi stylami dla elementów takich jak listy, formularze, tabele, linki.21 - Po zakończeniu zmian <b>[opuść tryb edycji]</b>. Strona przeładuje się i zobaczysz aktualną maskę swojego sklepu, taką jaką obecnie widzą klienci. Pamiętaj, że wprowadzone przez Ciebie zmiany trzeba jeszcze świadomie opublikować.22 - Żeby opublikować zmienioną przez siebie maskę w sklepie przejdź z powrotem do swojego panelu i <b>Powróć do listy operacji</b>.23 - W głównym menu tego działu wybierz <b>Zmiana i aktualizacja maski</b>.24 - Oznacz na liście nową wersję maski i opublikuj ją przyciskiem. Sprawdź nowy wygląd otwierając stronę swojego sklepu. </br>Uwaga: Raz opublikowana w sklepie maska nie może być dalej zmieniana. Wprowadzenie dalszych zmian wymaga stworzenia kolejnej wersji do edycji.25 - Gratulujemy! Możesz cieszyć się nowym, samodzielnie zmienionym wyglądem sklepu!