Wie man ein Mega-Menü in Elementor erstellt | 5 einfache Schritte

Ein Mega-Menü ist eine Art erweiterbares Navigationsmenü, das mehrere Optionen auf einmal zeigt, die normalerweise in Kategorien gruppiert sind, um die Benutzerfreundlichkeit zu erhöhen. Im Gegensatz zu herkömmlichen Dropdown-Menüs bieten Mega-Menüs ein breiteres Layout, oft mit Spalten, Bildern, Symbolen oder sogar Widgets.

Es ist besonders nützlich für E-Commerce-Websites, Nachrichtenportale oder jede große Website mit vielen Inhalten, die leicht zugänglich sein müssen.

Wenn Sie jedoch ein Mega-Menü in Elementor erstellen möchten, ist dies nicht möglich, da Elementor (die kostenlose Version) einfache Navigationslayouts mit dem Nav Menu-Widget zulässt; es fehlt die erweiterte Struktur, die für ein vollwertiges Mega-Menü erforderlich ist. Sie würden auf Einschränkungen stoßen wie:

• Keine Unterstützung für mehrspaltige Dropdowns
• Keine Einbettung von Bildern oder Widgets in Menüpunkten
• Begrenztes Styling und Hover-Steuerung

Wenn Sie also ein fortschrittliches, modernes, benutzerfreundliches Mega-Menü mit umfangreichen Funktionen anstreben, müssen Sie ein Plugin eines Drittanbieters verwenden, um diese Funktionalität zu aktivieren. In diesem Blog werde ich Ihnen also zeigen Wie man ein Mega-Menü in Elementor in 5 einfachen Schritten erstellt

Hier ist die Vorschau des Megamenüs, das wir mit Elementor erstellen werden:

Erstellen eines WordPress-Megamenüs in Elementor

Der Aufbau eines detaillierten Mega-Menüs für Ihre WordPress-Website mit Elementor kann schwierig erscheinen. Elementor ist großartig für Seiten, aber fortgeschrittene Menüs brauchen oft mehr. Viele Plugins bieten Mega-Menü-Funktionen für Elementor, doch Element Pack zeichnet sich durch Vereinfachung der Dinge aus.

Bei einigen anderen Plugins stoßen Sie möglicherweise auf verwirrende Einstellungen, begrenzte Designoptionen oder haben Schwierigkeiten, Ihr Menü auf verschiedenen Geräten richtig darzustellen. Es kann sich so anfühlen, als ob Sie mit der Schnittstelle kämpfen müssten, nur um ein einfaches Mega-Menü einzurichten. 

Element Packbietet jedoch die gesamte benötigte Leistung über eine benutzerfreundliche Schnittstelle. Es ermöglicht Ihnen, beeindruckende Mega-Menüs ohne die typischen Frustrationen zu erstellen und bietet einen direkten Weg, um Inhalte und Layouts direkt in Elementor hinzuzufügen.

Beginnen wir also mit dem Aufbau des gesamten Mega-Menüs mit dem Element Pack.

Voraussetzung

Vergewissern Sie sich zunächst, dass diese 2 Plugins installiert und aktiviert sind: 

• Elementor: Die kostenlose Version ist ausreichend.
• Element Pack: Dieses WordPress-Plugin fügt Mega-Menü-Funktionen speziell für Elementor hinzu.

Schritt 1: Aktivieren Sie Mega-Menü-Module und -Widgets

Die Aktivierung der Mega-Menü-Funktion in Element Pack Pro erfordert die Anpassung mehrerer Einstellungen im WordPress-Dashboard. So,

• Gehen Sie über Ihr WordPress-Dashboard zu Element Pack Pro.

• Navigieren Sie zum Besondere Merkmale tab.
• Aktivieren Sie den Mega Menu Switcher und speichern Sie die Einstellungen.

• Gehen Sie dann zum Kern-Widgets tab.
• Aktivieren Sie die Widgets Mega-Menü und Unter-Menü.
• Speichern Sie die Einstellungen.

• Speichern Sie die Permalinks erneut, um die ordnungsgemäße Funktionalität zu gewährleisten.

Schritt 2: Erstellen und Konfigurieren des Elementor-Menüs

Jetzt müssen Sie Ihr Mega-Menü erstellen. Befolgen Sie die folgenden grundlegenden Schritte für eine effektive Menüverwaltung.

• Gehe zu Erscheinungsbild > Menüs.

• Benennen Sie Ihr Menü und klicken Sie auf Menü erstellen.

• Fügen Sie Menüpunkte (benutzerdefinierte Links oder bestehende Seiten) zum Menü hinzu.

• Für jedes Element, das Sie in ein Mega-Menü umwandeln möchten, schalten Sie den Mega-Menü-Umschalter ein.
• Speichern Sie das Menü und aktualisieren Sie die Seite.

Schritt 3: Gestalten des Mega-Menüs

Nachdem Sie das Menü erstellt haben, können Sie den Element Pack Mega Menu Switcher aktivieren, um die Menüpunkte anzupassen. Diese Funktion hebt Elemente hervor, die in Mega-Menüs umgewandelt werden können.

Die Anpassung von Mega-Menüs mit Breiten- und Symboloptionen verbessert die Benutzerfreundlichkeit. Diese Dinge helfen, das Menü visuell in das Design Ihrer Website zu integrieren. Gestalten Sie also einige Grundlagen des Systems nach Ihren Bedürfnissen.

• Bewegen Sie den Mauszeiger über einen Menüpunkt, für den das Mega-Menü aktiviert ist.
• Klicken Sie auf die Schaltfläche Mega-Menü bearbeiten, die angezeigt wird.

• Es erscheint ein Pop-up-Fenster

• Einschalten Mega-Menü einschalten.
• Legen Sie die Breite des Menüs fest (Standard oder benutzerdefiniert).
• Fügen Sie auf Wunsch einen Text hinzu, der neben dem Menüpunkt erscheint.
• Wählen Sie ein Menüsymbol und eine Symbolfarbe.
• Klicken Sie auf Optionen speichern.

Schritt 4: Anpassen des Elementor-Megamenüs

Um nun das Mega-Menü anzupassen, müssen wir es mit Elementor öffnen. So,

• Klicken Sie auf das Dropdown-Inhalt bearbeiten.

• Der Elementor-Editor wird geöffnet.

• Ziehen Sie Widgets per Drag & Drop in das Layout des Mega-Menüs.
• Verwenden Sie das Untermenü-Widget und erstellen Sie Spalten, fügen Sie Bilder, Icons, Text usw. hinzu.

• Passen Sie Stile, Abstände und Layout nach Bedarf an.

• Verwenden Sie die Elementor-Vorschau, um zu sehen, wie das Mega-Menü aussieht.
• Sie können ein Untermenü auch auf andere Weise erstellen, indem Sie Live kopieren und einfügen
• Gehen Sie einfach zu Element Pack Mega Menü Demo
• Wählen Sie eine Demo

• Wählen Sie nun einen Stil und klicken Sie auf der rechten Seite auf Live kopieren und einfügen Taste
• Hier kopiere ich das Menüelement Men's der Adidas-Demo

• Kehren Sie nun zu Ihrem Elementor-Editor zurück und fügen Sie

• Die gesamte Mega-Menü-Vorlage wird hier verfügbar sein.

Schritt 5: Layout und Stilanpassung steuern

Das Layout und die Stile müssen möglicherweise weiter angepasst werden, damit sie Ihrer Website ähneln. So,

• Passen Sie nun das Styling und den Inhalt nach Bedarf an.

• Verwenden Sie den responsiven Modus, um sicherzustellen, dass die Seite auf dem Handy gut aussieht.
• Überprüfen Sie das Menü in der Desktop- und der mobilen Ansicht.

Schritt 6: Speichern und genießen

Jetzt sind wir am Ende angelangt, 

• Gehen Sie zu Ihrer Vorlage oder Seite, auf der Sie das Mega-Menü anzeigen möchten.

• Suchen Sie das Mega-Menü-Widget aus dem Element Pack-Bereich
• Ziehen Sie es in das Seitenlayout und legen Sie es ab.

• Wählen Sie das Menü und legen Sie die Menürichtung fest

• Wenn Sie nun noch Layout- oder Stiländerungen vornehmen müssen, vervollständigen Sie diese und klicken Sie auf die Schaltfläche Veröffentlichen.

• Besuchen Sie nun Ihre Seite oder Vorlage und fahren Sie mit dem Mauszeiger über Ihr Menü, um das Mega-Menü anzuzeigen.

Erweitertes Mega-Menü in Elementor: Vorschau

Mit dem Element Pack Maine Focus können Sie ein erweitertes Mega-Menü erstellen. Hier sind einige erweiterte Mega-Menüs von Element Pack.

Es ist eine Kopie des Dribbble, um ein Mega-Menü wie die Dribbble-Website zu machen

Mit Element Pack können Sie fortschrittliche Mega-Menüs wie dieses für den eCommerce erstellen.

Sie können dieses schöne Mega-Menü auch mit dem Element Pack erstellen.

Schlussfolgerung

Ein Mega-Menü in Elementor von Grund auf zu erstellen, mag auf den ersten Blick entmutigend erscheinen, aber mit den richtigen Tools und einem strukturierten Ansatz wird es zu einer leistungsstarken Möglichkeit, die Navigation und das Benutzererlebnis Ihrer Website zu verbessern. 

Ganz gleich, ob Sie einen eCommerce-Shop, einen inhaltsreichen Blog oder eine Unternehmenswebsite betreiben, ein gut gestaltetes Mega-Menü hilft den Besuchern, das Gewünschte schneller zu finden, und unterstreicht gleichzeitig die Professionalität Ihrer Marke.

Wenn Sie die oben beschriebenen Schritte befolgt haben, haben Sie nun ein voll funktionsfähiges, visuell ansprechendes Mega-Menü erstellt, das sowohl reaktionsfähig als auch anpassbar ist. Vergessen Sie nicht, es auf verschiedenen Geräten zu testen und das Layout auf der Grundlage des Nutzerfeedbacks zu verfeinern. Element Pack gibt Ihnen die Flexibilität, Ihr Menü zu optimieren und zu skalieren, wenn Ihre Website wächst.

Möchten Sie noch weiter gehen? Versuchen Sie, dynamische Inhalte, Icons oder sogar WooCommerce-Elemente zu integrieren, um Ihr Mega-Menü wirklich interaktiv zu gestalten. Die Möglichkeiten sind endlos. Also, experimentieren Sie weiter und lassen Sie Ihrer Kreativität freien Lauf!

FAQ

Neueste Blogs

• Element Pack Pro Version 9 veröffentlicht: Was gibt es Spannendes?
• Wie man einen Testimonial-Slider in WordPress mit Elementor hinzufügt
• Wie lässt man das Akkordeon in Elementor standardmäßig geschlossen?
• Wie Sie verhindern, dass Elementor-Links unterstrichen werden (3 Möglichkeiten)
• Einfache Anleitung: Wie man Code zu einer Seite auf Elementor hinzufügt | 5 einfache Schritte