Jak dodać mega menu na swojej stronie WordPress (krok po kroku)

Mega menu pozwalają na wyświetlanie szerokiej gamy linków i kategorii treści w ustrukturyzowanym, łatwym do nawigacji układzie.

Może to znacznie poprawić doświadczenie przeglądania odwiedzających, czyniąc nawigację Twojej witryny bardziej intuicyjną i dostępną.

W WPBeginner używamy mega menu do wyświetlania naszych najważniejszych linków na górze strony. Kiedy użytkownicy na nie klikną, otwiera się menu rozwijane, ukazując dodatkowe kluczowe linki. Ten układ pozwolił nam stworzyć czyste i uporządkowane menu nawigacyjne, prezentujące szeroki zakres opcji bez zagracania strony.

W tym artykule pokażemy Ci, jak łatwo dodać mega menu do swojej witryny WordPress, krok po kroku.

Dlaczego warto dodać mega menu na swojej stronie WordPress?

WordPress posiada kreator typu „przeciągnij i upuść”, którego możesz użyć do tworzenia wszelkiego rodzaju menu, w tym menu rozwijanych, menu nagłówka i innych. Istnieją nawet wtyczki, które pozwalają na tworzenie niestandardowych menu nawigacyjnych w motywach WordPress.

Jednak jeśli Twoja witryna ma dużo treści, być może będziesz musiał utworzyć mega menu. Pozwala to na dodanie wielokolumnowych rozwijanych menu do standardowej struktury menu WordPress.

Możesz używać mega menu do organizowania treści pod różnymi nagłówkami i podnagłówkami, dzięki czemu odwiedzający mogą szybko znaleźć to, czego szukają. Na przykład, jeśli tworzysz internetowy rynek, możesz ułożyć wszystkie kategorie i podkategorie produktów w mega menu.

Mega menu mogą również wyświetlać bogatą zawartość dla Twoich odwiedzających, taką jak filmy, tekst, wyszukiwanie i najnowsze posty.

Możesz również dodawać obrazy, które ułatwiają skanowanie mega menu.

Mając to na uwadze, zobaczmy, jak łatwo możesz dodać mega menu do swojej witryny WordPress.

Jak utworzyć mega menu dla Twojej witryny WordPress

Najprostszym sposobem na dodanie mega menu do witryny WordPress jest użycie Max Mega Menu. Ta wtyczka pozwala dodawać bogatą zawartość do mega menu, w tym filmy, galerie obrazów, wyszukiwanie i inne.

W ten sposób możesz tworzyć bardziej angażujące i pomocne menu.

Możesz również zmienić styl menu, dodając różne kolory, zmieniając rozmiar czcionki i używając różnych ikon.

Najpierw musisz zainstalować i aktywować wtyczkę. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat jak zainstalować wtyczkę WordPress.

Włącz Mega Menu na swojej stronie WordPress

Po aktywacji przejdź do strony Mega Menu » Lokalizacje menu z poziomu panelu administracyjnego WordPress, aby zobaczyć wszystkie różne obszary, w których można dodać menu typu "mega".

Różne opcje mogą być widoczne w zależności od motywu WordPress.

Aby rozpocząć, musisz włączyć mega menu we wszystkich lokalizacjach, w których chcesz ich używać.

Aby to zrobić, po prostu kliknij, aby rozwinąć lokalizację, a następnie zaznacz pole „Włączone”.

Następnie możesz zmienić „Zdarzenie”, które otworzy mega menu.

Domyślne ustawienie to „Intencja najechania”, co oznacza, że odwiedzający musi najechać kursorem myszy na mega menu przez kilka sekund, aby je wywołać. Działa to dobrze dla większości stron WordPress, ale możesz również otworzyć menu rozwijane „Efekt” i zamiast tego wybrać „Najechanie” lub „Kliknięcie”.

Jeśli wybierzesz „Kliknięcie”, odwiedzający będzie musiał kliknąć, aby przeglądać mega menu. Może to być przydatne, jeśli obawiasz się, że odwiedzający mogą przypadkowo uruchomić menu, co może być frustrujące.

Tymczasem „Najazd” otworzy Twoje mega menu, gdy tylko odwiedzający najedzie na nie kursorem myszy. Może to zachęcić odwiedzających do eksplorowania różnych obszarów Twojej witryny, dlatego możesz użyć opcji „Najazd” na stronach docelowych lub stronie głównej Twojej witryny.

Po podjęciu tej decyzji możesz zmienić sposób otwierania menu za pomocą ustawień „Efekt”.

Max Mega Menu oferuje różne animacje, które możesz wypróbować, w tym zanikanie i przesuwanie w górę. Możesz również zmienić prędkość animacji. Wypróbowując różne animacje, możesz stworzyć mega menu, które przyciągnie uwagę odwiedzającego.

Jeśli nie chcesz używać żadnych animacji, po prostu otwórz pierwsze menu rozwijane i wybierz „Brak”.

Domyślnie Mega Menu nie używa animacji na urządzeniach mobilnych, ponieważ smartfony i tablety zazwyczaj mają mniejszą moc obliczeniową. Jednak jeśli chcesz stworzyć unikalną animację dla mobilnych odwiedzających, możesz użyć ustawień w obszarze „Efekt (Mobilny)”.

Jeśli chcesz przetestować swoje mega menu na urządzeniach mobilnych, zapoznaj się z naszym przewodnikiem jak wyświetlać wersję mobilną stron WordPress z poziomu komputera.

Jeśli wybrałeś „Kliknięcie” z menu rozwijanego „Zdarzenie”, upewnij się, że następnie wybierzesz zakładkę „Zaawansowane”.

Tutaj możesz użyć opcji „Zachowanie przy kliknięciu” (Click Event Behavior), aby zdefiniować, co się stanie, gdy odwiedzający kliknie Twoje mega menu. Na przykład, drugie kliknięcie może zamknąć menu lub otworzyć nowy link.

Istnieją inne ustawienia, które możesz przejrzeć, ale powinno to wystarczyć dla większości blogów i stron internetowych WordPress.

Gdy będziesz zadowolony z konfiguracji wtyczki, kliknij „Zapisz zmiany”.

Aby włączyć mega menu dla większej liczby lokalizacji, po prostu postępuj zgodnie z powyższym procesem.

Dostosuj wygląd mega menu na swojej stronie internetowej

Następnym krokiem jest konfiguracja wyglądu mega menu na Twojej stronie internetowej.

Możesz to zrobić, wybierając zakładkę „Motywy menu” po lewej stronie ekranu.

Na tym ekranie możesz zmienić kierunek ikon strzałek, użyć innego odstępu między wierszami, dodać cień i więcej.

Kiedy będziesz zadowolony z ustawień, nie zapomnij kliknąć „Zapisz zmiany”.

Jeśli chcesz usunąć te zmiany w dowolnym momencie, po prostu zaznacz pole „Reset Widget Styling”, a następnie kliknij „Zapisz zmiany”.

Następnie możesz dostosować pasek menu, który odwiedzający widzą, gdy menu jest w domyślnym, zwiniętym stanie.

Aby wprowadzić te zmiany, kliknij zakładkę „Pasek menu”, a następnie użyj ustawień, aby zmienić kolor tła, dopełnienie, promień obramowania i inne.

Możesz nawet stworzyć gradient kolorów, wybierając dwa różne kolory w sekcji „Tło menu”.

Jeśli przewiniesz w dół, możesz zmienić wygląd elementów menu najwyższego poziomu.

To pierwszy wiersz elementów, który jest widoczny, gdy mega menu jest w stanie zwiniętym.

Ponieważ są tak ważne, możesz chcieć, aby elementy menu najwyższego poziomu wyróżniały się.

Na przykład, na poniższym obrazku używamy innego koloru tła.

W sekcji „Stan najechania” możesz podświetlić aktualnie wybraną pozycję menu najwyższego poziomu.

Na przykład, na poniższym obrazku używamy efektu podkreślenia.

Może to pomóc odwiedzającemu zobaczyć, gdzie znajduje się w menu, co czyni je szczególnie przydatnym dla stron, które muszą mieć duże mega menu.

Jeśli dodasz stan najechania myszką, przewiń na dół ekranu i zaznacz pole „Podświetl bieżący element”.

Następnie możesz zmienić wygląd podmenu.

Jest to menu, które pojawia się pod nadrzędnym elementem najwyższego poziomu, jak widać na poniższym obrazku.

Aby dostosować podmenu, kliknij na zakładkę „Mega Menus”.

Możesz teraz użyć tych ustawień, aby zmienić kolor tła podmenu, zwiększyć promień, aby utworzyć zaokrąglone rogi, dodać wypełnienie i więcej.

Do menu głównych dodajesz zawartość za pomocą widżetów. Na przykład możesz dodać widżet Galerii i wyświetlić najpopularniejsze produkty WooCommerce lub osadzić chmurę tagów w menu głównym. Te widżety mogą dostarczyć dodatkowych informacji lub zachęcić odwiedzających do kliknięcia w określone elementy menu.

Możesz dostosować wygląd tych widżetów, przewijając do sekcji „Widżety”. Na przykład możesz zmienić kolor tytułu widżetu, zwiększyć rozmiar czcionki, dodać odstępy i dostosować wyrównanie.

Na tym ekranie możesz również dostosować wygląd elementów menu drugiego i trzeciego poziomu na swojej stronie internetowej, blogu lub rynku internetowym. Są to elementy podrzędne elementów menu najwyższego poziomu.

Podczas tworzenia menu można dodać cztery lub nawet więcej poziomów, aby stworzyć zagnieżdżone menu. Jeśli to zrobisz, WordPress użyje stylów trzeciego poziomu dla wszystkich kolejnych poziomów.

Możesz to zobaczyć w akcji na poniższym obrazku. Drugi poziom ma czerwony tekst, a zarówno trzeci, jak i czwarty poziom używają tego samego niebieskiego tekstu.

Kiedy będziesz zadowolony z konfiguracji menu, nie zapomnij kliknąć „Zapisz zmiany”.

Jak dodać mega menu na swojej stronie WordPress

Po zakończeniu dostosowywania mega menu, czas dodać je do swojej strony internetowej.

Po prostu przejdź do strony Wygląd » Menu z paska bocznego administratora.

Jeśli chcesz przekształcić istniejące menu w mega menu, otwórz listę rozwijaną „Wybierz menu do edycji” (Select a menu to edit) i wybierz je z listy. Pamiętaj tylko, że wybrane menu musi być przypisane do lokalizacji, w której włączyłeś funkcję mega menu.

Jeśli chcesz zacząć od zera, kliknij na „Utwórz nowe menu”, a następnie wpisz tytuł swojego nowego megamenu.

Następnie możesz wybrać lokalizację, której chcesz użyć, i kliknąć „Utwórz menu”. Ponownie, musi to być lokalizacja, w której włączyłeś mega menu.

Dodaj zawartość do swojego menu WordPress

Następnie dodaj wszystkie strony, wpisy, produkty WooCommerce i wszelkie inne treści, które chcesz umieścić w mega menu.

Aby uzyskać instrukcje krok po kroku, zapoznaj się z naszym przewodnikiem dla początkujących na temat jak dodać menu nawigacyjne w WordPress.

Następnie musisz ułożyć swoje elementy w menu nadrzędne i podmenu, których chcesz użyć w menu. Aby utworzyć podmenu, przeciągnij element poniżej elementu nadrzędnego, a następnie lekko przeciągnij go w prawo przed zwolnieniem.

Aby utworzyć wiele poziomów, po prostu przesuwaj elementy w prawo, aby pojawiły się wcięte jeden pod drugim. Jest to podobne do tworzenia menu rozwijanego w WordPress.

Włącz funkcję Mega Menu

Po zakończeniu kliknij, aby rozwinąć opcję „Ustawienia Max Mega Menu” i zaznacz pole obok opcji „Włącz”.

W tym polu możesz również nadpisać domyślne ustawienia mega menu. Pozwala to na tworzenie unikalnych mega menu dla różnych obszarów Twojej witryny WordPress, więc śmiało dokonaj wszelkich zmian, których chcesz.

Następnie kliknij „Zapisz”.

Utwórz układ Mega Menu

Teraz najedź kursorem myszy na pierwszy element najwyższego poziomu, a zobaczysz nowy przycisk „Mega Menu”. Kliknij go.

Zobaczysz teraz wszystkie ustawienia dla tego elementu najwyższego poziomu.

Domyślnie Max Mega Menu użyje stylu „flyout”, gdzie podmenu „wylatują” z boku. Aby zamiast tego utworzyć mega menu, otwórz listę rozwijaną „Tryb wyświetlania podmenu” i wybierz „Układ standardowy” lub „Układ siatki”.

Standardowy układ pokazuje wszystkie podmenu w kolumnach.

Tymczasem układ siatki pozwala na organizowanie elementów podmenu w kolumnach i wierszach.

Jest to idealne rozwiązanie, jeśli chcesz pokazać dużo treści, takich jak wszystkie produkty cyfrowe w Twoim sklepie internetowym, lub masz na myśli bardzo specyficzny układ.

Po wybraniu standardowego układu lub układu siatki zobaczysz wszystkie podmenu przypisane do tego elementu nadrzędnego.

Teraz możesz przystąpić do zmiany sposobu rozmieszczenia tych elementów w menu.

Jeśli używasz standardowego układu, możesz zmienić liczbę kolumn za pomocą menu rozwijanego w prawym górnym rogu.

Jeśli używasz układu siatki, możesz dodawać kolumny i wiersze za pomocą przycisków „+Kolumna” i „+Wiersz”.

Kiedy będziesz zadowolony z układu, możesz ułożyć elementy podmenu w różnych kolumnach i wierszach za pomocą przeciągnij i upuść.

Następnie przychodzi czas na zmianę ilości miejsca, jaką zajmuje każdy element w kolumnie. Max Mega Menu pokazuje aktualny rozmiar jako ułamek całkowitej dostępnej szerokości.

Na przykład, na poniższym obrazku obie kolumny zajmują połowę dostępnej przestrzeni.

Aby zmienić rozmiar elementu, po prostu kliknij jego przyciski strzałek, aby zwiększyć lub zmniejszyć ułamek.

Tworzenie przyjaznego dla urządzeń mobilnych mega menu (tylko układ siatki)

Domyślnie Max Mega Menu będzie wyświetlać te same treści na urządzeniach stacjonarnych i mobilnych. Może to stanowić problem w przypadku układów siatki, ponieważ smartfony i tablety zazwyczaj mają mniejsze ekrany, a przewijanie poziome może być trudne.

Jeśli używasz układu siatki, możesz tworzyć różne mega menu dla urządzeń mobilnych. Na przykład, możesz użyć mniej kolumn, aby użytkownicy nie musieli przewijać poziomo. W ten sposób możesz stworzyć responsywne menu WordPress gotowe na urządzenia mobilne.

Możesz ukryć całe kolumny lub wiersze za pomocą ikony „Ukryte na urządzeniach mobilnych”, która wygląda jak mały telefon komórkowy.

Po prostu włącz lub wyłącz ikonę, aby ukryć i pokazać różne treści na komputerze i urządzeniach mobilnych.

Dodaj bogatą treść za pomocą widżetów Mega Menu

Po wykonaniu tej czynności możesz zacząć dodawać widżety do mega menu. Pozwala to na wyświetlanie dodatkowych treści w podmenu, takich jak najnowsze komentarze, filmy, galerie i inne.

Na przykład, możesz użyć obrazów do promowania wyprzedaży w swoim sklepie internetowym lub wyróżnienia najnowszych produktów.

Aby dodać widżet, po prostu kliknij, aby otworzyć listę rozwijaną „Wybierz widżet…”.

Możesz teraz wybrać widżet z listy.

WordPress automatycznie doda widżet do kolumny lub wiersza, ale możesz go przenieść w nowe miejsce za pomocą przeciągnij i upuść.

Aby skonfigurować widżet, kliknij jego małą ikonę klucza francuskiego.

Otworzy się okno podręczne, w którym możesz dodać zawartość do widżetu i zmienić jego ustawienia.

Zobaczysz różne opcje w zależności od rodzaju tworzonego widżetu. Na przykład, jeśli dodasz widżet odtwarzacza muzyki audio do mega menu, zobaczysz ustawienia, w których możesz przesłać ścieżkę audio.

Wszystkie widżety mają pole „Tytuł”, w którym można dodać tekst, który pojawi się nad widżetem.

Po zakończeniu kliknij „Zapisz”, aby zapisać zmiany, a następnie wybierz „Zamknij”. Aby dodać więcej widżetów do mega menu, po prostu postępuj zgodnie z powyższym procesem.

Przejrzyj domyślne ustawienia Mega Menu

Następnie kliknij kartę „Ustawienia”.

Tutaj możesz użyć pól wyboru, aby ukryć lub pokazać różne treści w podmenu.

Możesz również ukryć lub pokazać podmenu na urządzeniach mobilnych i komputerach stacjonarnych, a także zmienić wyrównanie, aby podmenu otwierało się po lewej lub prawej stronie nadrzędnego elementu najwyższego poziomu.

Jeśli wprowadzisz jakiekolwiek zmiany w domyślnych ustawieniach, nie zapomnij kliknąć „Zapisz zmiany”.

Dodaj ikony obrazkowe do WordPress Mega Menu

Ikony obrazkowe pomagają odwiedzającym zrozumieć, o czym jest element menu, nawet bez czytania etykiety nawigacyjnej. Jest to szczególnie przydatne w przypadku dużych menu, gdzie odwiedzający może preferować szybkie skanowanie treści zamiast czytania każdej etykiety nawigacyjnej.

Możesz używać ikon, aby wyróżnić najważniejsze treści. Na przykład, możesz zachęcić odwiedzających do dokończenia zakupu, dodając ikonę koszyka do menu „Kasa”.

Aby dodać ikony obrazkowe do menu nawigacyjnego, kliknij na zakładkę „Ikona”.

Teraz możesz wybrać dowolną ikonę z wbudowanej biblioteki lub użyć własnego obrazu. Jeśli zaktualizujesz do Max Mega Menu Pro, będziesz mieć również dostęp do innych czcionek ikon, Genericons i FontAwesome.

Zakończ konfigurację Mega Menu na swojej stronie WordPress

Po przejrzeniu wszystkich tych ustawień możesz zamknąć okno podręczne, aby powrócić do głównej strony Wygląd » Menu.

Teraz możesz powtórzyć ten proces dla każdego elementu nadrzędnego najwyższego poziomu.

Gdy będziesz zadowolony z konfiguracji menu, kliknij przycisk Zapisz menu, aby je opublikować.

Teraz po prostu odwiedź frontend swojej strony internetowej, aby zobaczyć menu w akcji.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać mega menu do swojej witryny WordPress. Możesz również przejrzeć nasz przewodnik krok po kroku na temat jak dodać przycisk do menu nagłówka WordPress oraz nasz tutorial na temat jak utworzyć przyklejone, pływające menu nawigacyjne w WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.