Jak zaprojektować menu strony internetowej

Ten przewodnik skupia się na projekcie menu — jak wygląda menu i jak działa. Jeśli chcesz dowiedzieć się, jak zaprojektować menu witryny, wyświetlać je na każdej stronie witryny lub utworzyć menu nawigacyjne dla określonej strony internetowej, zalecamy przeczytanie innego przewodnika:

Jak to wygląda:
Takie menu jest przypięte u góry strony, aby nie odwracać uwagi odwiedzających witrynę od treści, i mogą je łatwo znaleźć w razie potrzeby, ponieważ jest to ustalone w określonym miejscu na stronie.

Jak go skonfigurować:

Dodaj blok ME301 do strony i zastosuj następujące ustawienia:

Główne ustawienia → zachowanie pozycji menu: Absolutny.
Tło menu → Krycie tła menu: 0%.

Jak to wygląda:
Takie menu jest zawsze widoczne na stronie i można łatwo uzyskać do niego dostęp z dowolnego miejsca na stronie. Zwykle ma przezroczyste tło u góry strony (na okładce), które staje się nieprzezroczyste podczas przewijania.

Jak go skonfigurować:

Dodaj blok ME301 do strony i zastosuj następujące ustawienia:

Główne ustawienia → zachowanie pozycji menu: Naprawiono przewijanie.
Tło menu → kolor tła menu. Pchory kolor.
Tło menu → Krycie tła menu: 0%.
Tło menu → Przezroczystość tła menu podczas przewijania: 80%.

Jak to wygląda:
To menu jest podobne do opisanego powyżej. To, co go wyróżnia, to kolejne menu pojawiające się na przewijaniu i zawierające jeszcze więcej elementów. Na przykład górne menu nawigacyjne zawiera logo, kilka elementów menu prowadzących do różnych stron witryny oraz niektóre linki do mediów społecznościowych. Gdy użytkownik przewija stronę, pojawia się kolejny pasek menu z logo, wezwaniem do działania i przyciskiem wywołania zwrotnego.

Jak go skonfigurować:
Dodaj blok ME301 do strony i zastosuj następujące ustawienia:

Menu pierwsze (znajduje się na górze strony)
Główne ustawienia → zachowanie pozycji menu: Bezwzględne.
Tło menu → Krycie tła menu: 0%.

Menu drugie (pojawiające się na przewijaniu)
Główne ustawienia → zachowanie pozycji menu: Naprawiono przewijanie.
Główne ustawienia → menu Reveal po przewinięciu strony w pikselach: 600px.
Tło menu → kolor tła menu. Wybierz kolor.
Tło menu → Krycie tła menu: 70%.

Jak to wygląda:
Menu hamburgerowe to trzy poziome linie u góry ekranu. Gdy użytkownik kliknie, otworzy się, aby wyświetlić menu nawigacyjne.

Do czego możesz go użyć:
Takie menu jest idealne dla Twojej witryny, jeśli chcesz, aby odwiedzający skupili się na treści bez rozpraszania się innymi elementami projektu. Menu hamburgerowe jest zwykle używane w mobilnej wersji strony internetowej. Możesz skonfigurować sposób wyświetlania menu na różnych urządzeniach.

Na przykład możesz zdecydować się na regularne menu, które będzie pojawiać się tylko w wersji komputerowej Twojej witryny i sprawić, że menu hamburgerów będzie widoczne wyłącznie na urządzeniach mobilnych.

Jak go skonfigurować:
Dodaj blok ME401/402/403/404/405 do strony, ustaw zachowanie pozycji menu, kolor ikony menu i kolor tekstu pozycji menu.

Na przykład można zastosować następujące ustawienia:
Główne ustawienia → zachowanie pozycji menu: Naprawiono przewijanie.
Pozycja menu → Kolor. Wybierz czarny.
Tło menu → Zwinięty kolor tła menu. Spraw, aby był przejrzysty.
Tło menu → Rozszerzony kolor tła menu. Wybierz biały.

Jak to wygląda:
Menu rozwijane pojawia się po kliknięciu elementu menu.

Do czego możesz go użyć:
Duże strony internetowe o zaawansowanej strukturze.

Jak go skonfigurować:
Dodaj blok ME301 do strony, skonfiguruj menu podobne do opisanego powyżej, a następnie dodaj elementy podrzędne w panelu Zawartość bloku.

1. Otwórz panel Zawartość bloku → pozycji menu → Dodaj elementy podrzędne.
2. Kliknij ikonę plusa obok elementu, wprowadź tytuł podelementu i przypisz łącze. Powtarzaj tę czynność, aż zostaną dodane wszystkie niezbędne podelementy.
3. Otwórz panel Ustawienia bloku → Ustawienia podmenu. Zaznacz pole wyboru "Wyświetl ikonę menu drugiego poziomu".

Należy pamiętać, że sam element menu głównego nie będzie klikalny. Jeśli chcesz, aby można było go kliknąć, utwórz zduplikowany element podrzędny w menu rozwijanym.

Jak to wygląda:
Aktywna zakładka umożliwia użytkownikom przeglądanie powiązanych z nią treści bez konieczności opuszczania strony internetowej.

Do czego możesz go użyć:
Zakładki umożliwiają pokazanie kilku kategorii tego samego rodzaju treści, na przykład różnych kategorii prac w portfolio.

Jak go skonfigurować:
Dodaj blok ME602 lub ME603 do strony. Bloków tych można używać do tworzenia kart i wyświetlania zawartości, gdy użytkownik kliknie kartę na tej samej stronie. Poniżej musisz dodać bloki w sekwencji, która zmieni się, gdy użytkownik kliknie określoną kartę.

Jak to działa:
1. Dodaj tytuły kart w panelu Zawartość bloku ME602 lub ME603.
2. Dodaj identyfikatory bloków, które powinny być widoczne po kliknięciu karty (oddziel je przecinkiem, bez spacji).

Uwaga: Możesz skopiować identyfikator bloku w panelu Ustawienia bloku — przewiń w dół panelu, aby go znaleźć.

Jak to wygląda:
Wyświetla elementy w koszyku, elementy dodane do ulubionych oraz widżet wyszukiwania w menu obok sekcji nawigacji.

Do czego możesz go użyć:
Menu jest pomocne dlaKatalog produktówużytkowników, aby zwięźle wyświetlać koszyk na zakupy, widżet wyszukiwania w witrynie i Ulubione.

Jak go skonfigurować:
Dodaj blok ME401 do strony → zakładki Zawartość → Koszyk, Wyszukiwanie i Ulubione → zaznacz pola wyboru, aby wyświetlić potrzebne ikony w menu.

Zaznacz pole wyboru "Nie pokazuj natywnych przycisków widżetów", aby ikony były wyświetlane tylko w menu.

Następnie dodaj blok koszyka zakupów ST100, blok widżetu wyszukiwania T985 oraz blok ulubionych ST110 i opublikuj stronę.

Gotowe.

Ta funkcja działa dla wszystkich bloków menu o numerach ME4XX.

Opcje wyświetlania:
Jeśli chcesz wyświetlić zarówno ikony, jak i przycisk widżetu Ulubione w menu, usuń zaznaczenie opcji "Nie pokazuj natywnych przycisków widżetów" na karcie Zawartość bloku ME401.

Możesz ukryć ikonę widżetu dla bloków ST100 Shopping cart i T985 Search - na karcie "Więcej ustawień" w ustawieniach bloku zaznacz pole wyboru "Nie pokazuj przycisku widżetu". Opublikuj stronę.

Gotowy! W menu wyświetlane są trzy ikony, a dla Ulubionych dostępny jest osobny widżet. W podobny sposób możesz skonfigurować widoczność koszyka lub widżetu wyszukiwania.

Oto kilka kluczowych opcji projektowania menu. Jeśli masz nowe pomysły i chcesz się nimi podzielić, wyślij e-mail z linkiem do Twojej witryny na adres team@tilda.cc , wpisując w temacie „Projekt menu”. Dziękuję!

Powodzenia w eksperymentach projektowych!