Creating a mega menu in Elementor is easy with Zestaw elementów, and it doesn’t require Elementor Pro. ElementsKit offers a dedicated Mega Menu module that lets you design rich, multi-column menus using Elementor’s visual editor.

Steps to Create a Mega Menu Using ElementsKit:

1. Save the menu and assign it to your site location.
2. Zainstaluj i aktywuj Zestaw elementów podłącz.
3. Iść do ElementsKit > Modules and enable Mega menu.
4. Nawigować do Wygląd > Menu and create or edit a menu.
5. Włączać Mega menu for a menu item and choose the layout.
6. Kliknij Edytuj za pomocą Elementora to design the menu content.

The Moduł Mega Menu z ElementsKit plugin is a powerful feature in WordPress that allows you to create a category-based expandable WordPress dropdown menu with flexible layouts. Elementor Mega menus are easy to use and can be a great way to show the multi-level website menu in an organized way.

Watch our video guide on Elementor Mega Menu Building:

Możesz też skorzystać z instrukcji krok po kroku, jak utworzyć mega menu w Elementorze:

Warunek wstępny: #

• Elementor, a page builder plugin (Free version is enough)
• ElementsKit Pro, a WordPress mega menu plugin for Elementor

Jak utworzyć WordPress Mega Menu w Elementora #

Przede wszystkim, zanim Tworzenie Elementora Mega Menu w WordPressie pamiętaj o włączeniu ElementsKit Mega menu moduł.

1. Nawigować do Zestaw elementów on your WordPress dashboard
2. Iść do Moduły
3. Find and turn ON Mega Menu
4. Ratować zmiany

Step #1: Configure WordPress Menu #

Do utwórz mega menu WordPress on your website –

• Nawigować do Appearance > Menus z panelu WordPress.

• Wprowadź a Nazwa menu.
• Kliknij na Utwórz menu przycisk.

Add pages to the mega menu i zapisz zmiany.

Now, you can dodaj pozycje do mega menu. Za to,

• Zwiększać Linki niestandardowe on the “Add menu item” on the right column.
• Wprowadź a Adres URL I Tekst linku.
• Kliknij Dodaj do menu.

Then add other menu items in the same way with this WordPress menu customizer, ElementsKit.

Po tym, make sure you’ve checked the checkbox for “Włącz to menu dla zawartości Megamenu”. When the mega menu is enabled, you will click the mega ikona ustawień menu po najechaniu kursorem na pozycje menu.

Krok #2: Dostosuj zawartość Elementora Megamenu With ElementsKit #

Po kliknięciu ikony ustawień mega menu otworzy się wyskakujące okienko. W wyskakującym okienku

• Przycisk przełączania, aby włączyć Mega Menu.
• Kliknij na Ratować przycisk.
• Następnie kliknij EDYTUJ TREŚĆ MEGAMENU przycisk. Przeniesie Cię do przycisku edytora Elementora.

In the next step, a window will appear where you need to click on the Ikona biblioteki szablonów ElementsKit.

• Przejdź do sekcji
• Search mega menu
• Wybierz Megamenu template from the list and insert

You’ll see that your inserted pre-designed mega menu template item will display. Edytuj sekcję Wewnętrzną klikając kropkowaną sekcję.

Pojemnik

Container Layout: Select the structural system, like Flexbox, to organize your elements.

Content Width: Choose between Pełna szerokość Lub Zapakowane for your horizontal boundaries.

Szerokość: Set the specific horizontal percentage or pixel size.

Min Height: Set the minimum vertical space the container must fill.

Items Management

Wrap: Allow items to move to a new line when they run out of space.

Kierunek: Stack items vertically in a column or horizontally in a row.

Wyrównaj treść: Distribute items along the main axis, such as center or spaced out.

Wyrównaj elementy: Position items along the cross axis for consistent vertical or horizontal alignment.

Gaps: Define the exact pixel spacing between individual items.

Sekcja rozciągania #

Toggle this button to turn the Elementor mega menu to full-width, which spans from right to left of the screen’s width.

Wybierz opcję Tag HTML #

• Wybierz swój Znacznik HTML z Upuścić to create custom WP menu.

Jeśli chcesz zobaczyć to w akcji, obejrzyj ten film i zrób to sam w ciągu kilku minut.

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, aby Pokaż etykietę.
• Dodaj lub edytuj Etykieta.
• Dostosuj Kolor tła, typografia, dopełnienie, wyrównanie, promień.
• Po zakończeniu kliknij opcję Aktualizuj i zamknij okno.

Krok #3: Dostosuj ikonę #

• Teraz idź do Zakładka Ikona=> Wybierz dowolny kolor z Paleta kolorów.

• Wybierać Ikona z Biblioteka ikon.

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.
• Ratować 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. Zobaczmy, jak to dodać.

• Nawigować do ElementsKit → Stopka nagłówka → i kliknij Dodaj nowe.
• Otworzy się wyskakujące okienko z opcjami.

• W wyskakującym okienku wpisz a Tytuł, Wybierz Wpisz → nagłówek.
• Wybierz Warunki → Cała strona.
• Przełącz Aktywacja opcję i kliknij Edytuj za pomocą Elementora.

• Wybierz swój Struktura z wybranego obszaru.

• Teraz Szukaj Menu nawigacji=> Przeciągnij Ekit menu nawigacji I Upuszczać na wybranym obszarze.

** Uwaga: pamiętaj o przeciągnięciu menu nawigacji ElementsKit, w przeciwnym razie utworzone Megmenu nie pojawi się.

• Teraz idź do Ustawienia menu=> wybierz utworzony Menu nagłówka z listy rozwijanej.
• Możesz tutaj dodać dowolny typ widżetu, aby dostosować szablon nagłówka.

Ostateczne wyjście #

Po zakończeniu kliknij Aktualizacja button to save the menu created with the best mega menu plugin for Elementor.

Teraz przejdź do swojej witryny, a zobaczysz, że wybrane przez Ciebie menu Elementor Mega jest wyświetlane.