Odwiedzając duże portale lub sklepy internetowe, być może widziałeś duże rozwijane menu, które przyciągnęło Twoją uwagę? Zaprezentowany w ten sposób spis kategorii lub linków nazywa się mega menu.
Mega menu pozwala ułożyć dziesiątki linków w przyjazne dla użytkownika kolumny i wiersze. Do mega menu można dodać obrazki oraz filmy, aby jeszcze bardziej angażowało użytkownika do działania.
W tym artykule pokażę Ci jak dodać mega menu do strony. Poniżej krok po kroku opisuję cały proces tworzenia rozbudowanego mega menu. Poradnik oparty na zdjęciach ułatwi Ci zrozumieć jak zrobić mega menu w WordPress.
Co to jest mega menu?
Mega Menu to zaawansowane i funkcjonalne menu poziome. Nowoczesne i efektowne menu to najważniejszy element sklepu internetowego lub portalu.
W jakim celu dodaje się mega menu do strony?
Jeśli Twoja witryna posiada dużo treści być może, a raczej konieczne jest utworzenie mega menu. Rozbudowana nawigacja typu megamenu pozwala uporządkować treści według nagłówków i podtytułów. To ułatwia odnaleźć dokładnie tą stronę, której szuka użytkownik.
Dodatkowo mega menu wyróżni Twoją stronę na tle innych, a klient zyska intuicyjny i łatwy w obsłudze interfejs. Pomaga to kupującym znaleźć odpowiednią kategorię produktu i dokonać zakupu.
Mega menu można uzupełnić dodatkowymi treściami: obrazki, animacje, filmy czy zwykły tekst. One pobudzą wyobraźnię użytkownika i zachęcą go do interakcji.
Jak stworzyć mega menu w WordPress
Najłatwiejszym sposobem zbudowania mega menu w WordPress to użycie wtyczki Max Mega Menu. Zaawansowane funkcje wtyczki pozwalają stworzyć bardziej atrakcyjne i pomocne menu w kilka minut. Plugin pozwala ingerować w wygląd nawigacji, możesz zmieniać kolory, format czcionki jej rozmiar, a nawet dodać różne ikony.
Najpierw musisz zainstalować i aktywować wtyczkę. Jeśli jesteś początkujący i masz z tym problem przeczytaj mój przewodnik, jak zainstalować wtyczkę WordPress.
Po aktywacji Max Mega Menu przejdź do Mega Menu > Menu Locations, aby zobaczyć wszystkie obszary w których możesz dodać megamenu. Dostępne opcje różnią się w zależności od używanego szablonu WordPress.
Po prostu rozwiń interesującą Cię lokalizację, a następnie kliknij, aby rozwinąć lokalizację następnie zaznacz pole Enabled i zapisz zmiany.
W ustawieniach głównych funkcja Event pozwala zmienić sposób rozwijania się nawigacji. Domyślnie użytkownik musi najechać kursorem na mega menu i po chwili powinno się ono rozwinąć.
Opcja Click wymaga kliknięcia w menu, aby rozwinąć całą listę. Ta możliwość przydaje się jeśli obawiasz się, że odwiedzający przypadkowo będzie uruchomiał menu, co może być frustrujące.
Max Mega Menu ma wbudowane animacje i efekty aktywujące się w trakcie korzystania z megamenu. Wypróbuj je wszystkie bawiąc się także szybkością, żeby wybrać najlepszy efekt pasujący do Twojej strony. Jeśli nie chcesz używać żadnych animacji, po prostu wybierz None.
Wtyczka domyślnie nie używa efektów na urządzeniach mobilnych, aby zapobiec problemom z wydajnością. Jeśli chcesz stworzyć animację widoczną na na urządzeniach mobilnych skorzystaj z ustawień mobilnych.
Teraz przyszedł czas na to, żeby skonfigurować wygląd megamenu. Wybierz Menu Themes po lewej stronie ekranu. Ustawienia główne pozwalają zmienić między innymi strzałek, użyć innej wysokości linii czy dodać cień.
Zakładka Menu Bar ukrywa opcje pozwalające dostosować pasek menu widoczny w stanie spoczynku, zwiniętym. Możesz nawet utworzyć gradient kolorów, wybierając dwie różne barwy w sekcji Background.
Przewiń w dół do Top Level Menu Items.
Edytujesz teraz wygląd menu najwyższego poziomu. Jest to pierwszy rząd elementów, kolor tła zmieni się gdy mega menu zostanie rozwinięte.
Aby dostosować podmenu, kliknij w Mega menus. Te ustawienia odpowiadają za wszystkie podmenu, działasz analogicznie jak w menu nadrzędnym. Na tej podstronie zmieniasz wygląd 2 podmenu, 3 podmenu itd.
Wcześniej wspominałem, że każde megamenu może np. posiadać treści multimedialne. Zrobisz to za pomocą widżetów. Ja wstawiłem 2 nowe kolumny, a w nich: tytuł i jedno słowo oraz obrazek. Możliwości są ogromne tylko od Ciebie zależy jakie widżety wykorzystasz.
Moje mega menu wyszło trochę pstrokate, ale chciałem wyodrębnić i pokazać Ci każdy element nad którym pracowaliśmy.
Jak dodać mega menu do WordPress
Dostosowaliśmy wygląd megamenu za pomocą Max Mega Menu teraz nadszedł czas, aby dodać mega menu do witryny.
W panelu administracyjnym WordPress przejdź do Wygląd > Menu.
Są dwie opcje, możesz zmienić istniejące menu w megamenu lub zacząć od zera klikając w utwórz nowe menu. Pamiętaj tylko, że wybrane menu musi być przypisane do lokalizacji, w której włączyłeś funkcję megamenu.
Następnie dodaj wszystkie strony, posty i wszelkie inne treści, które chcesz uwzględnić w menu. Pamiętaj o tym, żeby ustalić hierarchie linków, zwracając uwagę na elementy nadrzędne i pozostałe podmenu. Aby utworzyć podmenu, przeciągnij blok poniżej i lekko w prawo elementu nadrzędnego.
Po wykonaniu tej czynności kliknij Max Mega Menu Settings i zaznacz pole Włącz. W tym momencie możesz edytować podstawowe ustawienia mega menu WordPress. Pamiętaj o tym, żeby zapisać ustawienia klikając Zapisz.
Nowy styl Mega Menu w WordPress
Najedź kursorem myszy na pierwszy element najwyższego poziomu, a zobaczysz słowo Mega Menu. Kliknij w przycisk, żeby edytować styl menu. Domyślnie wtyczka Max Mega Menu użyje stylu rozwijanego, w którym podmenu wysuwają się z boku.
Wiem, że nie interesuje Cię menu rozwijane. Tą opcję WordPress dodał już bardzo dawno temu. Żeby Twoja nowa nawigacja miała układ siatki z podziałem na kolumny i wiersze rozwiń Sub menu display mode i wybierz Gird Layout. To idealne rozwiązanie dla rozbudowanych portali i sklepów internetowych chcących pokazać dużo treści.
Za pomocą +Column dodajesz nową kolumnę, a klikając w +Row zyskujesz nowy wiersz w mega menu.
Kiedy jesteś zadowolony z układu, możesz rozmieścić elementy podmenu w różnych kolumnach i wierszach za pomocą przeciągania i upuszczania.
Max Mega Menu dzieli obszar nawigacji na 12 części, a dodawane kolumny mają tą samą szerokość 3/12. Wtyczka pozwala powiększać lub pomniejszać skalę każdej kolumny.
Najciekawszą funkcją wtyczki Max Mega Menu to możliwość osadzania dodatkowych treści w nawigacji za pomocą widgetów dostępnych w WordPress. W prawym górnym rogu rozwiń panel i dodaj do megamenu widget za pomocą, którego umieścisz między innymi galerię, film, a newet mapę Google.
Mega menu przyjazne dla urządzeń mobilnych
Darmowa wtyczka Max Mega Menu wyświetla te same treści na komputerach stacjonarnych i urządzeniach mobilnych. Może to stanowić problem w przypadku układów siatki, ponieważ smartfony i tablety mają zwykle mniejsze ekrany, a przewijanie w poziomie może być trudne.
Jeśli używasz układu siatki, możesz tworzyć różne mega menu dla urządzeń mobilnych zmniejszając liczbę kolumn, aby użytkownicy nie musieli przewijać strony w poziomie. Plugin pozwala ukryć całe kolumny lub wiersze za pomocą ikony Ukryte na telefonie komórkowym.
Ikona telefonu podświetlana na czerwono oznacza, że obszar poniżej nie będzie pojawiał się w mega menu na urządzeniach mobilnych.
W Ustawieniach możesz użyć pól wyboru, aby ukryć lub pokazać różne treści w podmenu. Określasz, które podmenu ma się pokazywać na urządzeniach mobilnych i komputerach, decydujesz z której strony będzie rozwijać się nawigacja.
Ikony graficzne pomagają odwiedzającym zrozumieć, o co chodzi w danym elemencie menu, nawet bez konieczności czytania etykiety nawigacyjnej. Jest to szczególnie przydatne w przypadku dużych nawigacji.
Na sam koniec zamknij wyskakujące okienko i obowiązkowo Zapisz ustawienia. WordPress nie robi tego automatycznie.
Odwiedź stronę internetową, aby zobaczyć mega menu w akcji.
Mam nadzieję, że ten artykuł pomógł Ci zrozumieć, jak dodać mega menu do WordPress. Możesz także zapoznać się z poradnikiem w którym tłumaczę jak pisać bloga oraz czy audyt Seo, może pomóc uzyskać lepsze wyniki w rankinagach wyszukiwarek.
