So erstellen Sie ein Mega-Menü mit Elementor und ElementsKit

Können Sie sich eine große Website ohne ein Mega-Menü vorstellen? 
Auf keinen Fall!

Die Menschen legen mehr Wert auf die Zeit, die sie online verbringen. Das zeigt eine aktuelle Studie  94% der Webbenutzer Sagen wir, einfache Navigation sei das nützlichste Merkmal einer Website.
Fast jeder, oder?

Um die Benutzerfreundlichkeit und die Fähigkeit, den Benutzer einzubeziehen, zu erhöhen, spielt das Mega-Menü eine entscheidende Rolle bei der Hervorhebung der Menschen. Ein einfaches, aber funktionelles Mega-Menü wird Benutzer dazu ermutigen, noch mehr Bereiche Ihrer Website zu erkunden und sofort Maßnahmen zu ergreifen.

Sogar die größten E-Commerce-Websites wie Amazon und eBay verwenden Megamenüs, damit Benutzer die gesamte Navigation einer Website in einem einzigen Menü durchsuchen können. 

Nicht nur eine E-Commerce-Website, sondern auch ein Mega-Menü ist eine großartige Option für alle Nachrichten-Websites, Zeitschriften, Content-Publisher, Unternehmen und mehr. 

Beim Erstellen einer großen Website mit mehreren Kategorien und Unterkategorien ist Megamenu ein großes, mehrspaltiges, erweiterbares Menü, in dem alles auf einmal sichtbar ist.
Ich bin mir sicher, dass mir so viele Fragen in den Sinn kommen! Rechts? 

Keine Sorge … Hier werde ich Ihnen helfen, alle Antworten auf Ihre Fragen zu erhalten, und am Ende dieses Artikels erfahren Sie, wie Sie ganz einfach Ihr eigenes Mega-Menü erstellen. 

Wir stellen vor: ElementsKit Mega Menu Builder

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

Sie erhalten Variationen im Mega-Menü wie das Navigationsmenü und das vertikale Mega-Menü sowie viele Anpassungsoptionen. 

Insgesamt ist ElementsKit Elementor Mega Menu ein voll ausgestatteter Menü-Builder für Ihre professionelle Website. 

Wie erstelle ich ein Mega-Menü mit Elementor? 

Elementor bietet Ihnen viele Funktionen zum Entwerfen Ihres Mega-Menüs, aber um zusätzliche Funktionen zu erhalten, können Sie ein Plugin eines Drittanbieters verwenden.

Genau, du brauchst ElementsKit. Obwohl es so viele Plugins zum Erstellen eines Mega-Menüs gibt, unterstützt ElementsKit dennoch verschiedene Arten von Mega-Menüs, darunter vertikale Mega-Menüs, horizontale Mega-Menüs und viele weitere Anpassungsoptionen.

Hier zeigen wir Ihnen Schritt für Schritt im Detail, wie Sie ein voll funktionsfähiges Mega-Menü erstellen.

Was Sie zum Erstellen eines Megamenüs mit Elementor benötigen

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

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

Schritt #2: Passen Sie den Inhalt des Megamenüs an

Aktivieren Sie das Kontrollkästchen „Dieses Menü für Megamenu-Inhalte aktivieren“ => Klicken Sie auf 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=> Beliebig einfügen Mega-Menü.

Kontrolle Layout

• 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 Spaltenlücke

• 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.
• Vertikal ausrichten: Wählen Sie „Vertikal ausrichten“ aus dem Dropdown-Menü aus.
• Überlauf: Wählen Sie „Überlauf Standard“ oder „Ausgeblendet“.

Wählen HTML-Tag

• Wähle Deine HTML-Tag aus Runterfallen.

Passen Sie das Mega-Menü an Überschriftentext

• 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: Anpassen Symbol

1. Klicken 'Aktualisieren' um das Menü zu speichern => Editor schließen.
2. Gehen Sie nun 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 nun zur Site => Ausgewähltes Symbol und Farbe werden angezeigt.

Schritt #4: Anpassen Abzeichen

• 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 die 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 Ihr erstelltes aus Kopfzeilenmenü aus dem Dropdown-Menü.
• Sie können von hier aus jede Art von Widget hinzufügen, um Ihre Header-Vorlage anzupassen.

Erstellen Sie ein Mega-Menü mit Gutenberg

Wenn Sie Ihre Website im WordPress-Blockeditor erstellt haben, können Sie auch einfach und problemlos Mega-Menüs erstellen. Das GutenKit-Blockeditor-Plugin bietet die einfachste Möglichkeit, Erstellen eines WordPress-Megamenüs in Gutenberg.

Mit GutenKit können Sie das gesamte Menü im Editor erstellen und Megamenüs sowohl in vertikaler als auch horizontaler Ausrichtung gestalten.

Sie müssen lediglich das Plugin GutenKit Pro installieren und mit dem Erstellen Ihrer schönen Site in Gutenberg beginnen.

Endgültige Ausgabe

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

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!