Jak zbudować mega menu za pomocą Elementora i ElementsKit

Jak zbudować mega menu za pomocą elementora i elementkita

Czy możesz sobie wyobrazić dużą stronę internetową bez mega menu? 
Nie ma mowy!

Ludzie coraz bardziej zwracają uwagę na czas spędzany w Internecie. Najnowsze badanie to pokazuje  94% użytkowników sieci powiedzieć, że łatwa nawigacja jest najbardziej przydatną funkcją strony internetowej.
Prawie wszyscy, prawda?

Aby zwiększyć użyteczność i zdolność do angażowania użytkownika, mega menu odgrywa kluczową rolę w ulepszaniu ludzi. Proste, ale funkcjonalne mega menu zachęci użytkowników do eksploracji jeszcze większej liczby obszarów Twojej witryny i natychmiastowego podjęcia działań.

Nawet największe witryny handlu elektronicznego, takie jak Amazon i eBay, używają mega menu, aby pomóc użytkownikom przeglądać całą nawigację witryny w jednym menu. 

Nie tylko witryna e-commerce, ale także mega menu to także świetna opcja dla wszelkich serwisów informacyjnych, magazynów, wydawców treści, firm i nie tylko. 

Podczas tworzenia dużej witryny internetowej z wieloma kategoriami i podkategoriami Megamenu jest dużym, rozwijanym menu z wieloma kolumnami, w którym wszystko jest widoczne na raz.
Jestem pewien, że przychodzi mi na myśl tak wiele pytań! Prawidłowy? 

Nie martw się… Tutaj pomogę Ci uzyskać odpowiedzi na wszystkie Twoje pytania, a na końcu tego artykułu dowiesz się, jak z łatwością stworzyć własne mega menu. 

Przedstawiamy narzędzie do tworzenia mega menu ElementsKit

Korzystanie z bogatych funkcji Kreator megamenu ElementsKit możesz tworzyć i dostosowywać dowolny typ Megamenu za pomocą interfejsu treści na żywo Elementora. 

Otrzymasz odmiany mega menu, takie jak menu nawigacji i pionowe mega menu, a także wiele opcji dostosowywania. 

Ogólnie rzecz biorąc, ElementsKit Elementor Mega Menu to w pełni funkcjonalny kreator menu dla Twojej profesjonalnej witryny. 

Jak stworzyć mega menu w Elementorze? 

Elementor zapewnia wiele funkcji do projektowania mega menu, ale aby uzyskać dodatkowe funkcje, możesz użyć wtyczki innej firmy.

Dokładnie, potrzebujesz Zestaw elementów. Chociaż istnieje tak wiele wtyczek do tworzenia mega menu, ElementsKit obsługuje różne typy mega menu, w tym pionowe mega menu, poziome mega menu i wiele innych opcji dostosowywania.

Tutaj szczegółowo pokażemy Ci proces tworzenia w pełni funkcjonalnego mega menu krok po kroku.

Czego potrzebujesz, aby utworzyć megamenu w Elementorze

Aby śledzić ten blog instruktażowy, będziesz potrzebować dwóch rzeczy–>

Możesz też postępować zgodnie z instrukcjami krok po kroku:

Upewnić się Megamenu moduł jest NA z Zestaw elementów MODUŁY.

Krok #1: Dodaj menu

  • Kliknij Utwórz nowe menu.
  • Dostarczać Nazwa menu=> Sprawdź Pole wyboru=> Utwórz menu.
  • Kliknij Link niestandardowy=> Podaj Połączyć I Dodaj pozycje menu w ten sam sposób.

Krok #2: Dostosuj zawartość megamenu

Zaznacz pole wyboru „Włącz to menu dla zawartości Megamenu” => Kliknij na Mega menu z ikoną ustawień do którego elementu menu chcesz dodać Mega Menu.

  • Otworzy się wyskakujące okienko, w którym przełącz Mega menu opcja i Ratować. Następnie kliknije EDYTUJ TREŚĆ MEGAMENU przycisk.

Wybierz Szablon

  • Kliknij Elementskit Ikona biblioteki szablonów, a następnie przejdź do Nagłówki.
  • Kliknij nagłówek=> Mega zawartość menu=> Wstaw dowolny Mega menu.

Kontrola Układ

  • Edytuj sekcję Wewnętrzną klikając kropkowaną sekcję.
  • Pole szerokości zawartości: Dostosuj szerokość treści, przeciągając w prawo lub w lewo.
  • Treść na całej szerokości: Wybierać Pełna szerokość.

Wybierać Przerwa w kolumnie

  • Przerwa w kolumnie=> Wybierz odstęp między kolumnami upuścić.

Wybierz pozycję

  • Wzrost: Wybierz swój wzrost, przeciągając od lewej do prawej.
  • Wyrównanie w pionie: Wybierz opcję Wyrównanie w pionie z listy rozwijanej.
  • Przepełnienie: Wybierz opcję Przepełnienie domyślne lub Ukryte.

Wybierać Znacznik HTML

  • Wybierz swój Znacznik HTML z Upuścić.

Dostosuj Mega Menu Tekst nagłówka

  • Wybierz typ ikony.
  • Włącz opcję dodawania ikony.
  • Prześlij ikonę nagłówka.
  • Dodaj lub edytuj tytuł.
  • Dodaj opis edycji.

Dostosuj tekst

  • Dodaj lub edytuj tekst.
  • Dodaj lub edytuj podtytuł.
  • Włącz wyświetlanie etykiety.
  • Dodaj lub edytuj etykietę.
  • Dostosuj kolor tła, typografię, dopełnienie, wyrównanie, promień.

Krok #3: Dostosuj Ikona

  1. Kliknij 'Aktualizacja', aby zapisać menu=> Zamknij edytor.
  2. Teraz przejdź do zakładki Ikony=> Wybierz dowolny kolor z Palety Kolorów.
  3. Wybierz Ikonę z Biblioteki Ikon.
  4. Teraz przejdź do witryny => pojawiła się wybrana ikona i kolor.

Krok #4: Dostosuj Odznaka

  • Dodaj lub edytuj tekst.
  • Wybierać Kolor odznaki.
  • Wybierać Kolor tła odznaki.
  • Kliknij Ratować.

Krok #5: Ustawienia

Domyślna szerokość

  • Wybierz szerokość Mega Menu: Domyślny.
  • Wybierz pozycję Mega Menu: Domyślny.
  • Zapisz okno.
  • Widok witryny: Pokazuje domyślną szerokość z domyślną pozycją.

Domyślny krewny 

  • Wybierz szerokość Mega Menu: Domyślny.
  • Wybierz pozycję Mega Menu: Względny.
  • Kliknij Ratować.
  • Widok witryny: Pokazuje domyślną szerokość z pozycją względną.

Domyślna pełna szerokość

  • Wybierz szerokość Mega Menu: Pełna szerokość.
  • Wybierz pozycję Mega Menu: Domyślny.
  • Kliknij Ratować.
  • Widok witryny: Wyświetlanie pełnej szerokości z pozycją domyślną.

Pozycja względna pełnej szerokości

  • Wybierz szerokość Mega Menu: Pełna szerokość.
  • Wybierz pozycję Mega Menu: Względny.
  • Kliknij Ratować.
  • Widok witryny: Pokazuje Pełna szerokość z pozycją względną.

Niestandardowa domyślna szerokość

  • Wybierz szerokość Mega Menu: Niestandardowa szerokość.
  • Podaj dowolną niestandardową szerokość, ale domyślnie tak jest 750 pikseli.
  • Wybierz pozycję Mega Menu: Domyślny.
  • Kliknij Ratować.
  • Widok witryny: Pokazuje Niestandardowa szerokość z domyślną pozycją.

Niestandardowa domyślna szerokość Względny

  • Wybierz szerokość Mega Menu: Niestandardowa szerokość.
  • Podaj dowolną niestandardową szerokość, ale domyślnie tak jest 750 pikseli.
  • Wybierz pozycję Mega Menu: Względny.
  • Kliknij Ratować.
  • Widok witryny: Pokazuje Niestandardowa szerokość z pozycją względną.

Krok #6: Utwórz szablon nagłówka

Tutaj możesz skorzystać z Szablon nagłówka Elementora lub możesz użyć Szablon nagłówka ElementsKit.

  • Teraz Szukaj Menu nawigacji=> Przeciągnij Ekit menu nawigacji I Upuszczać na wybranym obszarze. Pamiętaj, aby przeciągnąć menu nawigacji ElementsKit, w przeciwnym razie utworzone Megmenu nie pojawi się.
  • Iść do Ustawienia menu=> wybierz utworzony Menu nagłówka z listy rozwijanej.
  • Możesz tutaj dodać dowolny typ widżetu, aby dostosować szablon nagłówka.

Utwórz Mega Menu za pomocą Gutenberga

Jeśli zbudowałeś swoją stronę w edytorze bloków WordPress, możesz łatwo i sprawnie stworzyć mega menu. Wtyczka edytora bloków GutenKit jest dostępna w najprostszy sposób tworzenie mega menu WordPress w Gutenbergu.

Dzięki GutenKit możesz stworzyć całe menu w edytorze i zaprojektować mega menu zarówno w orientacji pionowej, jak i poziomej.

Wszystko, czego potrzebujesz, to zainstalować wtyczkę GutenKit Pro i zacząć budować swoją piękną witrynę w Gutenbergu.

Ostateczne wyjście

  • Po zakończeniu kliknij Aktualizacja przycisk, aby zapisać menu.
  • Teraz przejdź do swojej witryny i zobaczysz, że wybrane Megamenu jest odpowiednio wyświetlane.

Podsumowanie

Wreszcie szczęśliwie dotarliśmy do końca. Mam nadzieję, że pomogliśmy Ci tym tutorialem! A teraz możesz zbudować niestandardowe mega menu Elementora, używając Zestaw elementów!

Wszystkie te kroki możesz zobaczyć w jednym filmie tutaj.

Jeśli masz więcej wątpliwości lub napotkałeś inne problemy, daj nam znać w sekcji komentarzy!


Uwagi

  1. Awatar Piotr

    Cześć,
    świetny poradnik!
    Mam jeszcze pytanie odnośnie Mega Menu:
    Czy mogę otworzyć Mega Menu kliknięciem, a nie najechaniem myszką?
    Byłbym bardzo szczęśliwy za odpowiedź.
    Pozdrowienia,
    Piotr

    1. Awatar Tanjana Sabrin
      Tanjana Sabrin

      Cześć Piotr,

      Dziękuję bardzo za uznanie. To wiele dla nas znaczy. Obecnie ta funkcja jest niedostępna. Ale z pewnością możesz poprosić o taką funkcję. Stale dodajemy nowe funkcje zgodnie z potrzebami naszych klientów.

      Tutaj jest link - https://wpmet.com/plugin/elementskit/roadmaps/#ideas. Po prostu podziel się swoim wspaniałym pomysłem i kliknij przycisk Prześlij. 😍

      Bądź bezpieczny 😃

  2. Awatar Andrzej
    Andrzej

    Cześć,
    Uwielbiam Twój mega kreator menu, ale mam mały problem.
    Jedno z moich mega menu znajduje się po prawej stronie nagłówka, a część mega menu znika po prawej stronie.
    Czy istnieje możliwość wyrównania mega menu do prawej, lewej lub do środka?

    Dzięki

    1. Awatar Ayub Ali

      Cześć Andrew,

      Bez sprawdzenia Twojej witryny nie możemy powiedzieć, co dokładnie jest przyczyną tego problemu. Podaj nam link do swojej aktywnej witryny lub odpowiedni zrzut ekranu, aby jasno zrozumieć problem. Możesz jednak spróbować zmienić domyślną pozycję megamenu, postępując zgodnie z tym zrzutem ekranu (https://d.pr/i/ccf6RC). Daj nam znać o aktualizacji tutaj lub lepiej, jeśli możesz otworzyć zgłoszenie do pomocy technicznej: https://help.wpmet.com/

  3. Awatar Farzan

    Cześć, dziękuję za niesamowity tutorial! Mógłbym zastosować wszystko, tylko jeden drobny problem. W nagłówku mam 4 strony, jedna z nich ma mega menu, jeśli najedziesz na nią kursorem. Jednak w nagłówku nie mogę kliknąć strony nadrzędnej (o nazwie: persoonlijk), mogę kliknąć tylko elementy w mega nagłówku. Czy widzisz, czego mi brakuje? (strona jest wciąż w fazie rozwoju, ale nagłówek możesz zobaczyć w pliku https://insight.nl/home adres URL. Chciałbym mieć możliwość kliknięcia przycisku PERSOONLIJK. Czy możesz mi pomóc dowiedzieć się, co zrobiłem źle?
    Z góry bardzo dziękuję.

    1. Awatar Ayub Ali

      Witaj Farzan, Ponieważ jest to problem techniczny i możesz potrzebować spersonalizowanej pomocy, sugeruję otwarcie zgłoszenia do pomocy technicznej https://help.wpmet.com/

      Ponieważ nasz zespół wsparcia jest bardzo pomocny, mogę powiedzieć, że dołoży wszelkich starań, aby rozwiązać Twój problem jak najszybciej.

      Wszystkiego najlepszego.

  4. Awatar Mani

    Wielkie dzięki za ten wspaniały artykuł. Jest bardzo pomocny. Każdy może to zrozumieć, zamiast oglądać wiele filmów na Youtube.

  5. Awatar Mellisa
    Mellisa

    Hej,
    Świetny poradnik; wyjaśniłeś to jasno i prosto. Stworzenie dobrego mega menu jest niezbędne, ponieważ pomaga wizualnie podkreślić powiązania między elementami, pomaga użytkownikom wiedzieć o wyborach i ułatwia korzystanie z ikon i obrazów.

  6. Awatar Dawid

    Postępowałem dokładnie zgodnie z tym samouczkiem i moje menu NIE pojawi się.
    Kiedy wejdziesz na stronę, którą podałem powyżej, zobaczysz menu – jest to domyślne menu WordPress. Tuż pod nim użyłem widżetu menu nawigacyjnego i menu nie zostało zapełnione.

    jakieś pomysły?

  7. Awatara Collina
    Collina

    Megamenu jest świetne! Po prostu: chcę, aby odpowiednia strona otwierała się po kliknięciu nazwy menu, a Mega Menu pojawiało się po najechaniu kursorem. Jak mogę to zrobić? Teraz po kliknięciu pojawia się tylko Mega Menu. Dziękuję za pomoc.

  8. Awatar Małgorzata
    Małgorzata

    Dziękuję za ten świetny tutorial! Czy możliwe jest dodanie hiperłącza do tytułu i opisu w Mega Menu w obszarze Przełącznik edycji? Mam listę stanów i miast w moim Mega Menu, ale mam problem z koniecznością dwukrotnego wpisania stanu, aby móc utworzyć hiperłącze w sekcji Akapit. Czy istnieje sposób na wyeliminowanie tej nadmiarowości?

  9. Awatar Małgorzata
    Małgorzata

    Zapomniałem dodać, czy możliwa była również opcja najechania kursorem na tytuł, co umożliwiło wyświetlenie miast i wybranie ich pod nim. Dziękuję.

  10. Awatar Sami Azam
    Sami Azam

    Jak możemy wyświetlić Mega Menu na ikonach Hamburgera zamiast pozycji menu?

    1. Awatar Dipa Shaha
      Dipa Shaha

      Drogi Sami
      Niestety, żądana funkcja jest niedostępna. Możesz jednak poprosić o tę funkcję. Zespół ElementsKit zawsze chętnie otrzymuje sugestie dotyczące funkcji.
      Możesz poprosić o tę funkcję, korzystając z tego linku https://wpmet.com/plugin/elementskit/roadmaps/#ideas
      Dziękuję

  11. Awatar ok

    Postępowałem dokładnie zgodnie z tym samouczkiem i moje menu NIE pojawi się.
    Kiedy wejdziesz na stronę, którą podałem powyżej, zobaczysz menu – jest to domyślne menu WordPress. Tuż pod nim użyłem widżetu menu nawigacyjnego i menu się nie zapełniło.

    myślę, że jest jakiś błąd w mega menu, które już nie działa

    1. Awatara Hasiba
      Hasiba

      Witaj Ajay, zanim utworzysz mega menu, upewnij się, że utworzyłeś menu w backendzie. Po wybraniu menu nawigacyjnego musisz wybrać, które menu chcesz udostępnić w ramach mega menu.

  12. Awatar Jy

    Cześć,

    Megamenu działa bardzo dobrze, dopóki nie zaktualizowałem wszystkich wtyczek. To dziwne, że niektóre mega menu działają, ale niektóre nie i wyświetlają komunikat „nie znaleziono treści”. Przywróciłem wersję wtyczek, ale nie mogę rozwiązać problemów. Masz pomysł, co jest przyczyną tego problemu?

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *