Jak dodać Mega Menu na twojej witrynie WordPress (krok po kroku)

Mega menu umożliwiają wyświetlanie szerokiej gamy linków i kategorii treści w uporządkowanym, łatwym w nawigacji układzie.

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

W WPBeginner używamy mega menu, aby importować najważniejsze linki na górze strony. Po kliknięciu na nie, otwiera się rozwijane menu, ujawniające dodatkowe kluczowe linki. Ta konfiguracja pozwoliła nam stworzyć przejrzyste i zorganizowane menu nawigacyjne, prezentujące szeroki zakres opcji bez zaśmiecania strony.

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

Dlaczego warto dodać Mega Menu na twojej witrynie WordPress?

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

Jeśli jednak twoja witryna zawiera dużo treści, może być konieczne utworzenie mega menu. Pozwala to na dodanie wielokolumnowych menu rozwijanych do standardowej struktury menu WordPress.

Możesz użyć mega menu, aby uporządkować twoją treść pod różnymi nagłówkami i podtytułami, aby odwiedzający mogli szybko znaleźć to, czego szukają. Na przykład, jeśli tworzysz internetowy marketplace, możesz uporządkować wszystkie twoje kategorie i podkategorie produktów w mega menu.

Mega menu może również wyświetlać odwiedzającym bogatą treść, taką jak filmy, tekst, wyszukiwanie i ostatnie wpisy.

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

To powiedziawszy, zobaczmy, jak łatwo dodać mega menu do twojej witryny internetowej WordPress.

Jak stworzyć Mega Menu dla twojej witryny WordPress?

Najprostszym sposobem na dodanie mega menu do twojej witryny WordPress jest użycie Max Mega Menu. Wtyczka ta umożliwia dodawanie bogatych treści do twojego mega menu, w tym filmów, galerii obrazków, wyszukiwania i innych.

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

Można również zmienić styl menu, dodając różne kolory, zmieniając wielkość litery i używając różnych ikonek.

Najpierw należy zainstalować i włączyć wtyczkę. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

Włącz Mega Menu na twojej witrynie internetowej WordPress

Po włączaniu, przejdź do strony Mega Menu ” Położenia menu z kokpitu WordPress, aby zobaczyć wszystkie różne obszary, w których można dodać mega menu.

Możesz zobaczyć różne opcje w zależności od motywu WordPress.

Na początek musisz włączyć mega menu w każdej lokalizacji, w której chcesz ich używać.

Aby to zrobić, wystarczy kliknąć, aby rozwinąć lokalizację, a następnie zaznaczyć pole „Włączone”.

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

Domyślnym ustawieniem jest „Hover intent”, co oznacza, że odwiedzający musi najechać kursorem myszy na mega menu przez kilka sekund, aby je uruchomić. Działa to dobrze w przypadku większości witryn WordPress, ale można również otworzyć menu rozwijane „Efekt” i zamiast tego wybrać „Najechanie” lub „Kliknięcie”.

Jeśli wybierzesz opcję „Kliknij”, odwiedzający będzie musiał kliknąć, aby wyświetlić 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 „Hover” otworzy twoje mega menu, gdy tylko odwiedzający najedzie na nie myszką. Może to zachęcić odwiedzających do odkrywania różnych obszarów twojej witryny, więc możesz chcieć użyć „Hover” na stronach docelowych lub na stronie głównej twojej witryny internetowej.

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

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

Jeśli nie chcesz używać żadnych animacji, po prostu otwórz pierwszą listę rozwijaną i wybierz „Brak”.

Domyślnie Mega Menu nie używa animacji na urządzeniach mobilnych, ponieważ smartfony i tablety mają zazwyczaj mniejszą moc obliczeniową. Jeśli jednak chcesz stworzyć unikatową animację dla użytkowników mobilnych, możesz skorzystać z ustawień w obszarze „Efekt (mobilny)”.

Jeśli chcesz przetestować swoje mega menu na urządzeniach mobilnych, zapoznaj się z naszym przewodnikiem na temat tego, jak zobaczyć mobilną wersję witryn WordPress z komputera stacjonarnego.

Jeśli wybrałeś „Kliknięcie” z rozwijanego menu „Zdarzenie”, upewnij się, że wybrałeś kartę „Zaawansowane”.

Tutaj możesz użyć opcji „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 odnośnik.

Istnieje więcej ustawień, które można przejrzeć, ale to powinno 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, wystarczy wykonać ten sam proces opisany powyżej.

Dostosuj wygląd Mega Menu na twojej witrynie internetowej

Następnym krokiem jest skonfigurowanie wyglądu mega menu na twojej witrynie internetowej.

Można to zrobić, wybierając kartę „Motywy menu” po lewej stronie ekranu.

Na tym ekranie można zmienić kierunek ikonek strzałek, użyć innej wysokości linii, dodać cień i nie tylko.

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

Jeśli chcesz usunąć te zmiany w dowolnym momencie, po prostu zaznacz pole „Resetuj stylizację widżetów”, a następnie kliknij „Zapisz zmiany”.

Następnie można dostosować pasek menu, który jest widoczny dla odwiedzających, gdy menu jest w domyślnym, zwiniętym stanie.

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

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

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

Jest to pierwszy rząd elementów, który jest widoczny, gdy mega menu jest zwinięte.

Ponieważ są one tak ważne, warto wyróżnić pozycje menu najwyższego poziomu.

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

W sekcji „Hover State” można 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 go szczególnie przydatnym dla witryn, które muszą mieć duże mega menu.

Jeśli dodasz stan najechania kursorem, przewiń ekran do dołu i zaznacz pole „Podświetl bieżący element”.

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

Jest to menu wyświetlane pod nadrzędnym menu, jak widać na poniższym obrazku.

Aby dostosować podmenu, kliknij kartę „Mega Menu”.

Ustawienia te można teraz wykorzystać do zmiany koloru tła podmenu, zwiększenia promienia w celu utworzenia zakrzywionych narożników, dodania dopełnienia i nie tylko.

Dodajesz treść do swojego mega menu za pomocą widżetów. Możesz na przykład dodać widżet Galeria i wyświetlić twoje najpopularniejsze produkty WooCommerce lub osadzać chmurę tagów wewnątrz mega menu. Widżety te mogą dostarczać dodatkowych informacji lub zachęcać odwiedzających do kliknięcia określonych pozycji menu.

Możesz dostosować wygląd tych widżetów, przewijając do sekcji „Widżety”. Można na przykład zmienić kolor tytułu widżetu, zwiększyć wielkość litery, dodać dopełnienie i dostosować wyrównanie.

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

Podczas tworzenia twojego menu możesz dodać cztery lub nawet więcej poziomów, aby utworzyć zagnieżdżone mega menu. Jeśli to zrobisz, WordPress po prostu użyje stylizacji trzeciego poziomu dla wszystkich kolejnych poziomów.

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

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

Jak dodać Mega Menu na twojej witrynie WordPress

Po zakończeniu konfiguratora mega menu, nadszedł czas, aby dodać je do twojej witryny internetowej.

Wystarczy przejść do strony Wygląd ” Menu na panelu bocznym administratora.

Jeśli chcesz przekształcić istniejące menu w mega menu, otwórz menu rozwijane „Wybierz menu do edycji” i wybierz je z listy. Pamiętaj tylko, że wybrane menu musi być przypisane do miejsca, w którym włączono funkcję mega menu.

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

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łączono mega menu.

Dodaj treść do twojego menu WordPress

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

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

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

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

Włącz funkcję Mega Menu

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

W tym polu można również zastąpić domyślne ustawienia mega menu. Pozwala to na tworzenie unikatowych mega menu dla różnych obszarów twojej witryny internetowej WordPress, więc śmiało wprowadzaj dowolne zmiany.

Następnie kliknij przycisk „Zapisz”.

Tworzenie układu Mega Menu

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

Zostaną wyświetlone wszystkie ustawienia tego elementu najwyższego poziomu.

Domyślnie Max Mega Menu będzie używać stylu wysuwanego, w którym podmenu „wysuwają się” z boku. Aby zamiast tego utworzyć mega menu, otwórz menu rozwijane „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 organizować elementy podmenu w kolumnach i wierszach.

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

Po wybraniu układu standardowego lub siatki wyświetlone zostaną wszystkie podmenu przypisane do tego układu nadrzędnego.

Teraz możesz zmienić sposób rozmieszczenia tych elementów w mega menu.

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

Jeśli korzystasz z układu siatki, możesz dodawać kolumny i wiersze za pomocą przycisków „+Column” i „+Row”.

Gdy układ jest zadowalający, można rozmieścić elementy podmenu w różnych kolumnach i wierszach za pomocą funkcji przeciągnij i upuść.

Następnie nadszedł czas, aby zmienić ilość miejsca zajmowanego przez każdy element w kolumnie. Max Mega Menu pokazuje obecny, aktualny rozmiar jako ułamek całkowitej dostępnej szerokości.

Przykładowo, na poniższym obrazku obie kolumny zajmują połowę dostępnego miejsca.

Aby zmienić rozmiar elementu, wystarczy kliknąć przyciski strzałek, aby powiększyć lub pomniejszyć ułamek.

Tworzenie przyjaznego dla urządzeń mobilnych Mega Menu (tylko w układzie siatki)

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

Jeśli korzystasz z układu siatki, możesz utworzyć różne mega menu dla urządzeń mobilnych. Na przykład możesz użyć mniejszej liczby kolumn, aby użytkownicy nie musieli przewijać strony w poziomie. W ten sposób można stworzyć menu WordPress przystosowane do urządzeń mobilnych.

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

Wystarczy włączyć lub wyłączyć ikonkę, aby ukrywać i wyświetlać różne treści na komputerach stacjonarnych i urządzeniach mobilnych.

Dodawanie bogatych treści za pomocą widżetów Mega Menu

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

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

Aby dodać widżet, wystarczy kliknąć, aby otworzyć menu rozwijane „Wybierz widżet….”.

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

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

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

Spowoduje to otwarcie okna, w którym można dodać treść 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ę dźwiękową.

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ć twoje zmiany, a następnie wybierz „Zamknij”. Aby dodać więcej widżetów do mega menu, wystarczy wykonać ten sam proces opisany powyżej.

Przejrzyj domyślne ustawienia Mega Menu

Następnie wystarczy kliknąć kartę „Ustawienia”.

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

Można 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 poziomu.

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

Dodawanie ikonek z obrazkami do Mega Menu WordPressa

Ikonki z obrazkami pomagają odwiedzającym zrozumieć, czego dotyczy dana pozycja menu, bez konieczności czytania etykiety nawigacyjnej. Jest to szczególnie przydatne w przypadku dużych menu, w których odwiedzający może preferować szybkie skanowanie treści zamiast czytania każdej etykiety nawigacyjnej.

Za pomocą ikonek można wyróżnić najważniejsze treści. Na przykład, możesz zachęcić odwiedzających do sfinalizowania zakupu, dodając ikonkę koszyka do menu „Do kasy”.

Aby dodać ikonki obrazków do twojego menu nawigacyjnego, kliknij kartę „Ikonka”.

Możesz teraz wybrać dowolną ikonkę myślnika z wbudowanej biblioteki lub użyć twojego obrazka. Jeśli uaktualnisz do Max Mega Menu Pro, uzyskasz również dostęp do innych krojów pisma ikon, Genericons i FontAwesome.

Zakończ konfigurację Mega Menu na twojej witrynie WordPress

Po przejściu przez wszystkie te ustawienia, możesz zamknąć wyskakujące okienko, aby powrócić do głównej strony Wygląd ” Menu.

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

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

Teraz wystarczy przejść na front-end twojej witryny internetowej, aby zobaczyć mega menu w działaniu.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać mega menu na swojej stronie WordPress. Możesz również zapoznać się z naszym przewodnikiem krok po kroku, jak dodać przycisk w menu nagłówka WordPress i naszym poradnikiem, jak utworzyć lepkie pływające menu nawigacyjne w WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.