Jak zbudować Mega Menu w WordPressie za pomocą Elementora

Czy potrafisz sobie wyobrazić dużą stronę internetową bez menu nawigacyjnego? 
Nie ma mowy!

94% of users say it’s the most important feature of a website. So, easy navigation matters! That’s why mega menus are so effective. They organize categories and subcategories into a single, clear layout, making it easy for visitors to find what they need.

Sites like Amazonka I eBay use mega menu to give the best user experience. Mega menus are ideal for e-commerce, news, blogs, and businesses with lots of content.

This article will show you how to create a functional and stylish mega menu z Elementorem.

What do you need to create the mega menu with Elementor?

The only thing you need to create the mega menu using Elementor is ElementsKit.

Używając ElementsKit Mega kreator menu możesz tworzyć i dostosowywać dowolny typ Megamenu za pomocą interfejsu treści na żywo Elementora.

You will get variations in the mega menu such as the Nav menu I Pionowe megamenu along with many customization options. 

Overall, ElementsKit Elementor Mega Menu is a full featured-packed module for your professional site that easily ranks top among the best WordPress Mega Menu builders for Elementor.

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

• Elementora
• Zestaw elementów

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

Aby utworzyć mega menu w Elementorze, musisz utworzyć menu z pulpitu WordPress. Aby to zrobić,

• Nawigować do Wygląd > Menu.
• Kliknij Utwórz nowe menu.
• Dostarczać Nazwa menu > Sprawdź Pole wyboru > Utwórz menu.
• Kliknij Link niestandardowy > Zapewnij Połączyć I Dodaj pozycje menu w ten sam sposób.

Krok #2: Dostosuj zawartość megamenu

In this step, you can add mega menu items from the WordPress menu you have created.

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.

Układ sterowania

• 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ść.

Wybierz opcję Odstęp kolumny

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

Wybierz pozycję

• Wysokość: Wybierz wysokość, przeciągając od lewej do prawej.
• Wyrównanie w pionie: Z listy rozwijanej wybierz opcję Wyrównaj w pionie.
• Przelewowy: Wybierz opcję Przepełnienie domyślne lub Ukryte.

Wybierać Znacznik HTML

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

Dostosuj tekst nagłówka Mega Menu

• 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 ikonę

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 > Wybrana ikona i kolor się pojawiły.

Krok #4: Dostosuj odznakę

• 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 utworzone przez siebie Menu nagłówka z listy rozwijanej.
• Możesz tutaj dodać dowolny typ widżetu, aby dostosować szablon nagłówka.

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

Aby dowiedzieć się więcej szczegółów na temat tworzenia mega menu w WordPressie, możesz przejrzeć dokumentację ElementsKit Widżet Mega Menu dla Elementora.

Co dalej?

Once you’ve finished creating the mega menu in Elementor, make sure to preview it. If you’re satisfied with the style, finalize and publish it. However, if you later find that it isn’t as attractive as you initially thought, you can change it at any time.

To understand how users interact with the style, consider integrating a heatmap tool like Clarity.

Utwórz Mega Menu za pomocą Gutenberga

Jeżeli stworzyłeś swoją stronę internetową w edytorze bloków WordPress, możesz także utwórz mega menu w Gutenbergu płynnie. Wtyczka edytora bloków GutenKit to najłatwiejszy sposób tworzenia menu WordPress w Gutenbergu.

With GutenKit, you can create the entire menu in the editor and design mega menu in both vertical and horizontal orientation.

All you need is to install GutenKit Pro plugin and start building your beautiful site in Gutenberg.

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!