So erstellen Sie mit Elementor ein Mega-Menü in WordPress

Können Sie sich eine große Website ohne Navigationsmenü vorstellen? 
Auf keinen Fall!

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 Amazonas Und 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 mit Elementor.

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.

Verwendung der ElementsKit Mega Menu Builder Sie können jede Art von Megamenü mit einer Elementor-Live-Content-Schnittstelle erstellen und anpassen.

You will get variations in the mega menu such as the Nav menu Und Vertikales Mega-Menü 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.

Um diesem Tutorial-Blog zu folgen, benötigen Sie zwei Dinge–>

• Elementor
• ElementsKit

Oder befolgen Sie die Schritt-für-Schritt-Anleitung:

Stellen Sie sicher Megamenü Modul ist AN aus ElementsKit → MODULE.

Schritt #1: Menü hinzufügen

Um ein Mega-Menü in Elementor zu erstellen, müssen Sie ein Menü aus dem WordPress-Dashboard erstellen. Dazu

• Navigieren Sie zu Darstellung > Menü.
• Klicke auf Erstellen Sie ein neues Menü.
• Bieten Menüname > Überprüfen Sie die Kontrollkästchen > Menü erstellen.
• Klicke auf Benutzerdefinierten Link > Bereitstellung Verknüpfung Und Menüelemente hinzufügen auf die gleiche Weise.

Schritt #2: Megamenü-Inhalt anpassen

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

Aktivieren Sie das Kontrollkästchen „Dieses Menü für Megamenu-Inhalte aktivieren“ > Klicken Sie auf das Mega-Menü mit Einstellungssymbol zu welchem Menüpunkt Sie das Mega-Menü hinzufügen möchten.

• Es öffnet sich ein Popup, schalten Sie das um Mega-Menü Option und Speichern. Klicken Sie anschließend daraufe MEGAMENÜ-INHALT BEARBEITEN Taste.

Vorlage wählen

• Drücke den Elementskit Klicken Sie auf das Symbol der Vorlagenbibliothek und navigieren Sie dann zu Überschriften.
• Klicke auf Header > Mega-Menüinhalt > Fügen Sie beliebige Mega-Menü.

Steuerungslayout

• Bearbeiten Sie den inneren Abschnitt indem Sie auf den gepunkteten Abschnitt klicken.
• Inhaltsbreitenfeld: Passen Sie die Breite Ihres Inhalts an, indem Sie nach rechts oder links ziehen.
• Inhalt in voller Breite: Wählen Gesamtbreite.

Wählen Sie Spaltenabstand aus

• Spaltenlücke=> Wählen Sie Ihren Spaltenabstand aus runterfallen.

Wählen Sie Position

• Höhe: Wählen Sie Ihre Größe aus, indem Sie von links nach rechts ziehen.
• Vertikale Ausrichtung: Wählen Sie im Dropdown-Menü „Vertikal ausrichten“ aus.
• Überlauf: Wählen Sie „Überlauf Standard“ oder „Ausgeblendet“.

Wählen HTML-Tag

• Wähle Deine HTML-Tag aus Runterfallen.

Passen Sie den Überschriftentext des Mega-Menüs an

• Wählen Sie den Symboltyp aus.
• Aktivieren Sie diese Option, um ein Symbol hinzuzufügen.
• Kopfzeilensymbol hochladen.
• Titel hinzufügen oder bearbeiten.
• Beschreibung bearbeiten hinzufügen.

Text anpassen

• Text hinzufügen oder bearbeiten.
• Untertitel hinzufügen oder bearbeiten.
• Aktivieren Sie diese Option, um die Beschriftung anzuzeigen.
• Etikett hinzufügen oder bearbeiten.
• Passen Sie Hintergrundfarbe, Typografie, Polsterung, Ausrichtung und Radius an.

Schritt #3: Symbol anpassen

1. Klicken 'Aktualisieren', um das Menü zu speichern > Schließen Sie den Editor.
2. Gehen Sie jetzt zur Registerkarte „Symbol“ > Wählen Sie eine beliebige Farbe aus der Farbpalette.
3. Wählen Sie ein Symbol aus der Symbolbibliothek aus.
4. Gehen Sie jetzt zur Site > Ausgewähltes Symbol und Farbe wurden angezeigt.

Schritt #4: Badge anpassen

• Text hinzufügen oder bearbeiten.
• Wählen Abzeichenfarbe.
• Wählen Abzeichen-Hintergrundfarbe.
• Klicken Speichern.

Schritt #5: Einstellungen

Standardbreite

• Wählen Sie die Breite des Mega-Menüs: Standard.
• Wählen Sie die Position des Mega-Menüs: Standard.
• Speichern Sie das Fenster.
• Site-Ansicht: Standardbreite mit Standardposition anzeigen.

Standardrelativ 

• Wählen Sie die Breite des Mega-Menüs: Standard.
• Wählen Sie die Position des Mega-Menüs: Relativ.
• Klicken Speichern.
• Site-Ansicht: Standardbreite mit relativer Position anzeigen.

Standardmäßige volle Breite

• Wählen Sie die Breite des Mega-Menüs: Gesamtbreite.
• Wählen Sie die Position des Mega-Menüs: Standard.
• Klicken Speichern.
• Site-Ansicht: Anzeige in voller Breite mit Standardposition.

Relative Position in voller Breite

• Wählen Sie die Breite des Mega-Menüs: Gesamtbreite.
• Wählen Sie die Position des Mega-Menüs: Relativ.
• Klicken Speichern.
• Site-Ansicht: Wird angezeigt Volle Breite mit relativer Position.

Benutzerdefinierte Standardbreite

• Wählen Sie die Breite des Mega-Menüs: Benutzerdefinierte Breite.
• Geben Sie eine beliebige benutzerdefinierte Breite an, standardmäßig ist dies jedoch der Fall 750px.
• Wählen Sie die Position des Mega-Menüs: Standard.
• Klicken Speichern.
• Site-Ansicht: Wird angezeigt Benutzerdefinierte Breite mit Standardposition.

Benutzerdefinierte Standardbreite Relativ

• Wählen Sie die Breite des Mega-Menüs: Benutzerdefinierte Breite.
• Geben Sie eine beliebige benutzerdefinierte Breite an, standardmäßig ist dies jedoch der Fall 750px.
• Wählen Sie die Position des Mega-Menüs: Relativ.
• Klicken Speichern.
• Site-Ansicht: Wird angezeigt Benutzerdefinierte Breite mit relativer Position.

Schritt #6: Erstellen Sie eine Header-Vorlage

Hier können Sie die verwenden Elementor-Header-Vorlage oder Sie können das verwenden ElementsKit-Header-Vorlage.

• Jetzt suchen Navigationsmenü > Ziehen Sie den Ekit Nav-Menü Und Fallen auf dem ausgewählten Bereich. Stellen Sie sicher, dass Sie das ElementsKit Nav-Menü ziehen, da sonst Ihr erstelltes Meg-Menü nicht angezeigt wird.
• Gehe zu Menüeinstellungen > wählen Sie Ihre erstellte Kopfzeilenmenü aus dem Dropdown-Menü.
• Sie können von hier aus jede Art von Widget hinzufügen, um Ihre Header-Vorlage anzupassen.

• Wenn Sie fertig sind, klicken Sie auf Aktualisieren Taste, um das Menü zu speichern.
• Gehen Sie nun zu Ihrer Website und Sie können sehen, dass Ihr ausgewähltes Megamenü entsprechend angezeigt wird.

Weitere Einzelheiten zum Erstellen eines Mega-Menüs in WordPress finden Sie in der Dokumentation von ElementsKit. Mega-Menü-Widget für Elementor.

Was kommt als nächstes?

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.

Erstellen Sie ein Mega-Menü mit Gutenberg

Wenn Sie Ihre Website im WordPress-Blockeditor erstellt haben, können Sie auch Mega-Menü in Gutenberg erstellen reibungslos. Das Blockeditor-Plugin GutenKit bietet die einfachste Möglichkeit, ein WordPress-Megamenü in Gutenberg zu erstellen.

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.

Zusammenfassung

Endlich haben wir es erfolgreich bis zum Ende geschafft. Ich hoffe, wir konnten Ihnen mit diesem Tutorial helfen! Und jetzt können Sie mithilfe von ein benutzerdefiniertes Elementor-Megamenü erstellen ElementsKit!

Hier können Sie alle Schritte in einem einzigen Video sehen.

Wenn Sie weitere Bedenken haben oder auf andere Probleme gestoßen sind, teilen Sie uns dies bitte im Kommentarbereich mit!