W tym kursie nauczysz się tworzyć niesamowite nawigacje na sklepie internetowym, dzięki świetnemu rozszerzeniu DC Menu.
Czym jest DC Menu?
To rodzaj nawigacji typu „Mig Menu”, dzięki rozszerzeniu możemy budować rozwijane nawigacje składające się z wielu kolumn, a nawet obrazów. Dodatek pozwala na dodawanie pozycji w menu, łatwe ich powiązanie z produktami, stronami informacyjnymi oraz kategoriami. Możemy dodać pozycję jako zwykły tekst lub jako obraz. Dodatkowym atutem rozszerzenia jest możliwość pełnej personalizacji wyglądu. Mamy wpływ na wielkość czcionki, kolor, oraz tła.
Poniżej znajdziesz kilka przykładów zastosowania nawigacji DC Menu, w sklepach internetowych wymagających różnych stylów.
DC pozwala na dodawanie ikon do nawigacji oraz tworzenia nawigacji dwu warstwowych, czyli kliknięcie pozycji głównej odsłania linię nawigacji podrzędnej.
DC Menu pozwoli Ci na stworzenie rozwijanej nawigacji używającej nagłówki oraz zdjęć.
Jak działa DC Menu?
Rozszerzenie posługuje się trzema warstwami logicznymi, które stanowią: nawigacje, pozycje menu oraz kolumny.
Nawigacje to kompletne kompozycje menu, które możemy wyświetlić na sklepie internetowym.
Pozycje menu to zakładki, wchodzące w skład nawigacji, które możemy kliknąć.
Kolumny to elementy, które rozwijają się po najechaniu odpowiedniej pozycji.
Miksowanie tych elementów pozwala nam na stworzenie praktycznie dowolnego menu na sklepie internetowym.
Jak stworzyć nowe menu na sklepie internetowym?
By dodać menu w naszym sklepie internetowym, musimy zalogować się do panelu administracyjnego. W lewym menu znajduje się pozycja DC Menu.
Kliknięcie jej spowoduje że zostaniemy przeniesieni do konfiguracji rozszerzenia. Na początek musimy stworzyć nową nawigację. W tym celu w bloku „Nawigacje”, klikamy przycisk „Zarządzaj”.
System przeniesie nas do listy nawigacji, w której zawsze możemy edytować już istniejące nawigacje, stworzone wcześniej. Aby dodać nową klikamy przycisk w prawym, górnym rogu „Dodaj”.
System przekieruje nas do formularza dodawania nawigacji dla sklepu internetowego. Formularz składa się z dwóch części. Pierwsza „Ogólne”, zawiera podstawowe informacje oraz „Wygląd”, która pozwala na personalizację nawigacji pod względem kolorystycznym.
Ustawienia ogólne nawigacji
Nazwa administracyjna – nazwa nawigacji, którą będziemy się posługiwać w panelu administratora. Nazwa ta powinna pozwolić szybką identyfikację nawigacji.
Nazwa nawigacji – nazwa nawigacji, która będzie wyświetlana na urządzeniach mobilnych.
Kolejność – kolejność nawigacji. Jeżeli używamy kilka nawigacji jedna pod drugą to w tym polu możemy określić ich kolejność względem siebie.
Przy "skrolowaniu" strony przyklej nawigację na samej górze – opcja pozwala zachować nawigację widoczną przy przewijaniu strony sklepu internetowego. Gdy wczytujemy stronę sklepu internetowego, nawigacja zawsze jest umieszczona w okolicach nagłówka, obok loga, ikon interfejsu koszyka. Gdy przewijamy stronę sklepu i tracimy widok nagłówka, nawigacja przykleja się do górnej części ekranu, dzięki czemu zawsze możemy niej korzystać.
Status – włącza lub wyłącza nawigację
Ustawienia wyglądu nawigacji
W rozszerzeniu DC Menu mamy możliwość ustawienia wyglądu praktyczni każdej struktury. Formularz personalizacji wyglądu dzieli się na trzy przestrzenie:
Poziom pierwszy – czyli pozycje menu nadrzędne, zawsze widoczne
Poziom drugi – czyli pozycje menu widoczne w linii, po kliknięciu którejś z pozycji nadrzędnych
Styl kolumny – czyli wygląd pozycji rozwijanych, pokazujących się po najechaniu na link nadrzędnych
Wyjaśnienie poszczególnych pól
Wielkość czcionki – wielkość czcionki wyrażona w pikselach
Grubość czcionki – grubość czcionki, często zależna też od użytej czcionki na sklepie internetowym. Nie wszystkie czcionki używają np. średnie pogrubienie wyrażone wartościami 500, 600. Czcionka standardowa ma wartość 400, tradycyjne pogrubienie ma wartość 700.
Duże litery – włączenie tej opcji pozwala na zastosowanie efektu caps lock’a
Wyśrodkuj nawigację – domyślnie nawigacja jest zorientowana do lewej strony, zaznaczenie tej opcji wyśrodkuje wszystkie nadrzędne pozycje menu.
Kolor tła menu – kolor tła głównej belki nawigacji, widzianej od razu po załadowaniu się strony startowej sklepu internetowego
Tło linka – tło przycisku w nawigacji
Tło linka :hover – tło przycisku w nawigacji po najechaniu na niego kursorem myszki
Kolor czcionki linka – kolor tekstu na przycisku w nawigacji
Kolor czcionki linka :hover -kolor tekstu na przycisku w nawigacji po najechaniu na niego kursorem myszki
Tło kolumny – kolor tła menu, które jest rozwijane
Gdy już ustalimy jak ma wyglądać nawigacja na naszym sklepie internetowym możemy formularz zapisać korzystając z interfejsu zlokalizowanym na górze po prawej stronie.
Następnie wróć do panelu głównego nawigacji korzystając z przycisku „DC Menu”.
Pozycje menu w sklepie internetowym
Kolejnym naszym zadaniem jest utworzenie pozycji, które będą wyświetlały się w menu. W tym pomoże nam przestrzeń rozszerzenia nazwana „Pozycje Menu”. Aby przejść do listy pozycji menu i możliwości zarządzania nimi, kliknij przy bloku „Pozycje Menu”, przycisk „Zarządzaj”
System przekieruje nas do listy pozycji już dodanych do sklepu internetowego. W tym miejscu możemy również dodać nowe pozycje, w tym celu korzystamy z przycisku „Dodaj”, który zlokalizowany jest w górnej części strony po prawej stronie ekranu. Po kliknięciu system przeniesie nas do formularza dodawania nowej pozycji do sklepu internetowego. Poniżej znajdziesz opis poszczególnych pól, które są dostępne w formularzu.
Nazwa – Anchor, tekst widoczny na przycisku
Wybierz język – język, w którym przycisk ma być widoczny. DC Menu pozwala tworzyć wielojęzyczne nawigacje
Wybierz nawigacje – tutaj wybieramy nawigację, w które pozycja menu ma być widoczna
Wybierz link nadrzędny – jeżeli chcemy by nowa pozycja była wyświetlana w drugiej linii nawigacji to wybieramy pozycję nadrzędną, po kliknięciu której zostanie wyświetlona właśnie ta
Rodzaj treści – DC Menu pozwala na linkowanie do czterech rodzajów treści: link do kategorii, link do produktu, link do strony informacyjnej oraz dowolny link. Pierwsze trzy są zautomatyzowane i możemy w łatwy sposób wybrać treść do której chcemy stworzyć linka.
Wybierz kategorię – Jeżeli wybierzemy rodzaj treści „link do kategorii” to pokaże się nam lista z dostępnymi na sklepie internetowym kategoriami. Lista działa na zasadzie wyszukiwarki. Wpisywanie pierwszych liter z nazwy zawęża listę.
Wybierz produkt - Jeżeli wybierzemy rodzaj treści „link do produktu” to pokaże się nam lista z dostępnymi na sklepie internetowym produktami. Podobnie jak wyżej lista działa na zasadzie wyszukiwarki.
Wybierz stronę informacyjną - Jeżeli wybierzemy rodzaj treści „link do strony informacyjnej” to pokaże się nam lista z dostępnymi na sklepie internetowym stronami informacyjnymi. Podobnie jak wyżej lista działa na zasadzie wyszukiwarki.
Podaj dowolny link - Jeżeli wybierzemy rodzaj treści „dowolny adres url” to pokaże nam się pole w którym będziemy mogli ten adres wpisać.
Ikona dla linka – W tym miejscu możemy wybrać obraz, który będzie wyświetlany przed treścią linka jako ikona.
Obraz dla linka – Opcja pozwala dodać link obrazkowy do naszej nawigacji w sklepie internetowym. Przykłady takiego rozwiązania, możecie zobaczyć na początku tego kursu.
Kolejność – W tym miejscu możemy ustalić kolejność pozycji względem innych.
Ilość kolumn w rzędzie – Opcja pozwala określi jak będzie wyglądało rozwijane menu dla tej pozycji, pod względem ilości kolumn. Cofnij się do początku kursu i odszukaj print screen nawigacji wykonanej dla sklepu internetowego Fit Store. Na screen’ie widać najechanie kursorem myszki na pozycję „Tops”, pod nią wyświetlają się właśnie kolumny. Jest ich pięć. Pierwsza to lista łączy tekstowych kolejne to łącza obrazkowe. Jeżeli chcesz wybrać podobny układ z listy musisz wybrać „5”.
Ustawienie atrybutu fallow – Atrybut pomaga nam zadecydować czy roboty wyszukiwarek mają podążać za linkiem i np. indeksować zawartość, która się znajduje w miejscu do którego kierują użytkownika. Domyślnie „dofallow” zezwala na swobodne przemieszczanie się robotów.
Sposób otwierania celu – Domyślnie system otwiera łącze w tym samym oknie przeglądarki. Jeżeli chcesz by użytkownik został przeniesiony do nowego okna zaznacz tę opcję.
Pokaż w nawigacji – Ustawienie pozwala na ustalenie czy pozycja menu ma wyświetlać się w nawigacji. Jeżeli tworzysz pozycję która ma wyświetlać się jako główna lub w drugiej linii jako podrzędna to powinieneś zaznaczyć tę opcję. Jeżeli chcesz by twoja nawigacja wyświetlała się w rozwijanym menu ustaw tę opcję na „nie pokazuj”.
Status – Włączanie, wyłączanie pozycji menu.
Rozwijana nawigacja w sklepie internetowym
DC Menu pozwala na tworzenie rozwijanych nawigacji w sklepie internetowym o złożonej budowie. W poprzednich krokach stworzyliśmy nową nawigację oraz dodaliśmy do niej wszystkie pozycje. Teraz możemy stworzyć kolumny, które będą pokazywały się gdy użytkownik najedzie kursorem myszki na pozycję nadrzędną. W tym celu przejdźmy do głównej strony rozszerzenia DC Menu. Przejdźmy do bloku „Kolumny” i kliknijmy przycisk „Zarządzaj”.
System sklepu internetowego przekieruje nas do listy kolumn, którymi możemy zarządzać. Za pomocą interfejsu prawej, górnej części ekranu możemy dodać nową kolumnę.
System sklepu internetowego przekieruje nas do formularza dodawania nowej kolumny. Poniżej znajdziesz wyjaśnienie poszczególnych pól formularza.
Nazwa administracyjna – Jest to nazwa którą będziesz mógł posługiwać się w panelu administracyjnym.
Tytuł dla kolumny – Nagłówek wyświetlany na górze kolumny.
Dołącz kolumnę do linka w nawigacji – W tym miejscu możemy kolumnę przypisać do wcześniej utworzonej pozycji w menu. Najechanie kursorem myszki na tę pozycję wywoła rozwinięcie kolumny.
Dodaj link do kolumny – Tutaj mamy dostęp do listy pozycji menu z polem wyszukiwarki. Wpisanie pierwszych dwóch znaków spowoduje wyszukanie odpowiednich pozycji menu oraz zawężenie wyników. Pozycje menu dodajemy do kolumny za pomocą niebieskiego przycisku z plusikiem.
Lista pozycji w kolumnie – tu znajdziemy już dodane pozycje do kolumny.
Dodaną pozycję można sortować za pomocą ikonki z dłonią. Chwytamy pozycję w tym miejscu i za pomocą metody „przeciągnij i upuść”, przesuwamy pozycję w górę lub w dół. Czerwony przycisk służy do usunięcia pozycji z kolumny.
Kolejność – Tu ustawiamy kolejność kolumny względem innych.
Status – Określa czy kolumna ma być włączona czy wyłączona.
Po wprowadzeniu odpowiednich ustawień możemy zapisać kolumnę.
DC Menu pozwala tworzyć nawigację z małych składowych, dzięki temu możliwa jest nie ograniczona liczba kombinacji. Dzięki rozszerzeniu możesz na swoim sklepie zaprezentować w nawigacji kategorie produktów z obrazami, same produkty z danej kategorii, banery promujące określone produkty, jedynym ograniczeniem dla DC Menu jest nasza wyobraźnia.