So fügen Sie ein Mega-Menü zu Ihrer WordPress-Website hinzu (Schritt für Schritt)

Mega-Menüs ermöglichen es Ihnen, eine breite Palette von Links und Inhaltskategorien in einem strukturierten, leicht navigierbaren Layout anzuzeigen.

Dies kann die Browsererfahrung der Besucher erheblich verbessern, indem die Navigation Ihrer Website intuitiver und zugänglicher gestaltet wird.

Bei WPBeginner verwenden wir ein Mega-Menü, um unsere wichtigsten Links oben auf der Seite anzuzeigen. Wenn Benutzer darauf klicken, öffnet sich ein Dropdown-Menü, das weitere wichtige Links anzeigt. Diese Einrichtung hat es uns ermöglicht, ein sauberes und organisiertes Navigationsmenü zu erstellen, das eine breite Palette von Optionen präsentiert, ohne dass die Seite überladen wirkt.

In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie Ihrer WordPress-Website ganz einfach ein Mega-Menü hinzufügen.

Warum ein Mega-Menü auf Ihrer WordPress-Website hinzufügen?

WordPress verfügt über einen Drag-and-Drop-Builder, mit dem Sie alle Arten von Menüs erstellen können, einschließlich Dropdown-Menüs, Header-Menüs und mehr. Es gibt sogar Plugins, mit denen Sie benutzerdefinierte Navigationsmenüs in WordPress-Themes erstellen können.

Wenn Ihre Website jedoch viele Inhalte hat, müssen Sie möglicherweise stattdessen ein Mega-Menü erstellen. Dies ermöglicht es Ihnen, Mehrspalten-Dropdowns zur Standard-WordPress-Menüstruktur hinzuzufügen.

Sie können Mega-Menüs verwenden, um Ihre Inhalte unter verschiedenen Überschriften und Unterüberschriften zu organisieren, damit Besucher schnell finden, wonach sie suchen. Wenn Sie beispielsweise einen Online-Marktplatz erstellen, könnten Sie alle Ihre Produktkategorien und Unterkategorien in einem Mega-Menü anordnen.

Mega-Menüs können Ihren Besuchern auch reichhaltige Inhalte anzeigen, wie z. B. Videos, Text, Suche und aktuelle Beiträge.

Sie können auch Bilder hinzufügen, die Mega-Menüs leichter lesbar machen.

Das gesagt, sehen wir uns an, wie Sie Ihrer WordPress-Website ganz einfach ein Mega-Menü hinzufügen können.

So erstellen Sie ein Mega-Menü für Ihre WordPress-Website

Der einfachste Weg, ein Mega-Menü zu Ihrer WordPress-Website hinzuzufügen, ist die Verwendung von Max Mega Menu. Dieses Plugin ermöglicht es Ihnen, reichhaltige Inhalte zu Ihren Mega-Menüs hinzuzufügen, einschließlich Videos, Bildergalerien, Suche und mehr.

Auf diese Weise können Sie ansprechendere und hilfreichere Menüs erstellen.

Sie können auch den Menüstil ändern, indem Sie verschiedene Farben hinzufügen, die Schriftgröße ändern und verschiedene Symbole verwenden.

Zuerst müssen Sie das Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Leitfaden zur Installation eines WordPress-Plugins.

Mega-Menüs auf Ihrer WordPress-Website aktivieren

Nach der Aktivierung gehen Sie im WordPress-Dashboard zur Seite Mega-Menü » Menüpositionen, um alle verschiedenen Bereiche anzuzeigen, in denen Sie ein Mega-Menü hinzufügen können.

Je nach Ihrem WordPress-Theme sehen Sie möglicherweise unterschiedliche Optionen.

Zuerst müssen Sie Mega-Menüs an jedem Ort aktivieren, an dem Sie sie verwenden möchten.

Klicken Sie dazu einfach, um einen Standort zu erweitern, und aktivieren Sie dann das Kontrollkästchen „Aktiviert“.

Danach können Sie das 'Ereignis' ändern, das das Mega-Menü öffnet.

Die Standardeinstellung ist 'Hover Intent', was bedeutet, dass der Besucher seine Maus einige Sekunden lang über das Mega-Menü bewegen muss, um es auszulösen. Dies funktioniert gut für die meisten WordPress-Websites, aber Sie können auch das Dropdown-Menü 'Effekt' öffnen und stattdessen 'Hover' oder 'Klick' wählen.

Wenn Sie 'Klick' wählen, muss der Besucher klicken, um das Mega-Menü zu erkunden. Dies kann nützlich sein, wenn Sie befürchten, dass Besucher das Menü versehentlich auslösen könnten, was frustrierend sein kann.

Währenddessen öffnet „Hover“ Ihr Mega-Menü, sobald der Besucher mit der Maus darüber fährt. Dies kann Besucher dazu ermutigen, verschiedene Bereiche Ihrer Website zu erkunden. Daher möchten Sie „Hover“ möglicherweise für Landingpages oder die Homepage Ihrer Website verwenden.

Nachdem Sie diese Entscheidung getroffen haben, können Sie ändern, wie das Menü geöffnet wird, indem Sie die Einstellungen für den „Effekt“ verwenden.

Max Mega Menu bietet verschiedene Animationen, die Sie ausprobieren können, darunter Ausblenden und Hochschieben. Sie können auch die Geschwindigkeit der Animation ändern. Durch Ausprobieren verschiedener Animationen können Sie ein Mega-Menü erstellen, das die Aufmerksamkeit des Besuchers auf sich zieht.

Wenn Sie keine Animationen verwenden möchten, öffnen Sie einfach das erste Dropdown und wählen Sie 'Keine'.

Standardmäßig verwendet Mega Menu keine Animationen auf Mobilgeräten, da Smartphones und Tablets normalerweise weniger Rechenleistung haben. Wenn Sie jedoch eine einzigartige Animation für mobile Besucher erstellen möchten, können Sie die Einstellungen im Bereich „Effekt (Mobil)“ verwenden.

Wenn Sie Ihre Mega-Menüs auf Mobilgeräten testen möchten, lesen Sie unseren Leitfaden zur Anzeige der mobilen Version von WordPress-Websites von einem Desktop aus.

Wenn Sie 'Klick' aus dem Dropdown-Menü 'Ereignis' gewählt haben, stellen Sie sicher, dass Sie als Nächstes den Tab 'Erweitert' auswählen.

Hier können Sie mit dem „Klickverhalten“ definieren, was passiert, wenn der Besucher auf Ihr Mega-Menü klickt. Zum Beispiel könnte ein zweiter Klick das Menü schließen oder einen neuen Link öffnen.

Es gibt weitere Einstellungen, die Sie durchgehen können, aber dies sollte für die meisten WordPress-Blogs und -Websites ausreichend sein.

Wenn Sie mit der Konfiguration des Plugins zufrieden sind, klicken Sie auf „Änderungen speichern“.

Um Mega-Menüs für weitere Standorte zu aktivieren, folgen Sie einfach demselben oben beschriebenen Prozess.

Passen Sie das Aussehen von Mega-Menüs auf Ihrer Website an

Der nächste Schritt ist die Konfiguration, wie die Mega-Menüs auf Ihrer Website aussehen sollen.

Sie können dies tun, indem Sie auf den Tab 'Menüthemen' links auf dem Bildschirm klicken.

Auf diesem Bildschirm können Sie die Richtung der Pfeilsymbole ändern, eine andere Zeilenhöhe verwenden, einen Schatten hinzufügen und mehr.

Wenn Sie mit Ihren Einstellungen zufrieden sind, vergessen Sie nicht, auf „Änderungen speichern“ zu klicken.

Wenn Sie diese Änderungen jederzeit rückgängig machen möchten, aktivieren Sie einfach das Kontrollkästchen „Reset Widget Styling“ und klicken Sie dann auf „Save Changes.“

Als Nächstes können Sie die Menüleiste anpassen, die die Leiste ist, die Besucher sehen, wenn sich das Menü im standardmäßigen, zusammengeklappten Zustand befindet.

Um diese Änderungen vorzunehmen, klicken Sie auf die Registerkarte „Menüleiste“ und verwenden Sie dann die Einstellungen, um die Hintergrundfarbe, den Abstand, den Randradius und mehr zu ändern.

Sie können sogar einen Farbverlauf erstellen, indem Sie zwei verschiedene Farben im Abschnitt 'Menühintergrund' auswählen.

Wenn Sie nach unten scrollen, können Sie ändern, wie das Menü der obersten Ebene aussieht.

Dies ist die erste Zeile von Elementen, die sichtbar ist, wenn sich das Mega-Menü im zusammengeklappten Zustand befindet.

Da sie so wichtig sind, möchten Sie vielleicht die Menüpunkte der obersten Ebene hervorheben.

Zum Beispiel verwenden wir im folgenden Bild eine andere Hintergrundfarbe.

Im Abschnitt 'Hover-Zustand' können Sie das aktuell ausgewählte Menüelement der obersten Ebene hervorheben.

Zum Beispiel verwenden wir im folgenden Bild einen Unterstreichungseffekt.

Dies kann dem Besucher helfen zu sehen, wo er sich im Menü befindet, was es besonders nützlich für Websites macht, die große Mega-Menüs benötigen.

Wenn Sie einen Hover-Zustand hinzufügen, scrollen Sie zum unteren Bildschirmrand und aktivieren Sie das Kontrollkästchen 'Aktuelles Element hervorheben'.

Danach können Sie ändern, wie das Untermenü aussieht.

Dies ist das Menü, das unter einem übergeordneten Element auf oberster Ebene angezeigt wird, wie Sie im folgenden Bild sehen können.

Um das Untermenü anzupassen, klicken Sie auf die Registerkarte „Mega Menus.“

Sie können diese Einstellungen nun verwenden, um die Hintergrundfarbe der Untermenüs zu ändern, den Radius zu erhöhen, um abgerundete Ecken zu erstellen, Abstände hinzuzufügen und mehr.

Sie fügen Ihren Mega-Menüs Inhalte über Widgets hinzu. Sie könnten zum Beispiel ein Galerie-Widget hinzufügen und Ihre beliebtesten WooCommerce-Produkte anzeigen oder eine Tag-Cloud in das Mega-Menü einbetten. Diese Widgets können zusätzliche Informationen liefern oder Besucher dazu ermutigen, auf bestimmte Menüpunkte zu klicken.

Sie können anpassen, wie diese Widgets aussehen, indem Sie zum Abschnitt „Widgets“ scrollen. Sie können beispielsweise die Farbe des Widget-Titels ändern, die Schriftgröße erhöhen, Abstände hinzufügen und die Ausrichtung anpassen.

Auf diesem Bildschirm können Sie auch anpassen, wie die Menüpunkte der zweiten und dritten Ebene auf Ihrer Website, Ihrem Blog oder Ihrem Online-Marktplatz aussehen. Dies sind die Kinder der Menüpunkte der obersten Ebene.

Beim Erstellen Ihrer Menüs ist es möglich, vier oder sogar mehr Ebenen hinzuzufügen, um ein verschachteltes Mega-Menü zu erstellen. Wenn Sie dies tun, verwendet WordPress einfach das Styling der dritten Ebene für alle nachfolgenden Ebenen.

Sie können dies im folgenden Bild in Aktion sehen. Die zweite Ebene hat roten Text, und sowohl die dritte als auch die vierte Ebene verwenden denselben blauen Text.

Wenn Sie mit der Einrichtung des Menüs zufrieden sind, vergessen Sie nicht, auf „Änderungen speichern“ zu klicken.

Wie man ein Mega-Menü auf Ihrer WordPress-Site hinzufügt

Sobald Sie mit der Anpassung des Mega-Menüs fertig sind, ist es an der Zeit, es zu Ihrer Website hinzuzufügen.

Gehen Sie einfach zur Seite Darstellung » Menüs in der Admin-Seitenleiste.

Wenn Sie ein bestehendes Menü in ein Mega-Menü umwandeln möchten, öffnen Sie das Dropdown-Menü „Menü zum Bearbeiten auswählen“ und wählen Sie es aus der Liste aus. Beachten Sie jedoch, dass das von Ihnen gewählte Menü einem Speicherort zugewiesen sein muss, an dem Sie die Mega-Menü-Funktion aktiviert haben.

Wenn Sie bei Null anfangen möchten, klicken Sie auf „Neues Menü erstellen“ und geben Sie dann einen Titel für Ihr neues Mega-Menü ein.

Sie können dann den gewünschten Standort auswählen und auf 'Menü erstellen' klicken. Auch hier muss es sich um einen Standort handeln, für den Sie Mega-Menüs aktiviert haben.

Inhalte zu Ihrem WordPress-Menü hinzufügen

Fügen Sie danach alle Seiten, Beiträge, WooCommerce-Produkte und alle anderen Inhalte hinzu, die Sie in das Mega-Menü aufnehmen möchten.

Für schrittweise Anleitungen siehe unseren Anfängerleitfaden unter wie man ein Navigationsmenü in WordPress hinzufügt.

Als Nächstes müssen Sie Ihre Elemente in die übergeordneten Menüs und Untermenüs einteilen, die Sie im Mega-Menü verwenden möchten. Um ein Untermenü zu erstellen, ziehen Sie ein Element unter das übergeordnete Element und ziehen es dann leicht nach rechts, bevor Sie es loslassen.

Um mehrere Ebenen zu erstellen, ziehen Sie einfach Elemente weiter nach rechts, sodass sie untereinander eingerückt erscheinen. Dies ähnelt dem Erstellen eines Dropdown-Menüs in WordPress.

Aktivieren Sie die Mega-Menü-Funktion

Wenn Sie fertig sind, klicken Sie, um die „Max Mega Menu Settings“ zu erweitern, und aktivieren Sie das Kontrollkästchen neben „Enable.“

In diesem Feld können Sie auch die Standardeinstellungen für Mega-Menüs überschreiben. Dies ermöglicht es Ihnen, einzigartige Mega-Menüs für verschiedene Bereiche Ihrer WordPress-Website zu erstellen. Nehmen Sie also gerne alle gewünschten Änderungen vor.

Klicken Sie danach auf „Speichern“.

Erstellen Sie das Mega-Menü-Layout

Bewegen Sie nun Ihre Maus über das erste Element der obersten Ebene und Sie sehen eine neue Schaltfläche 'Mega-Menü'. Klicken Sie auf die Schaltfläche.

Sie sehen nun alle Einstellungen für dieses Element der obersten Ebene.

Standardmäßig verwendet Max Mega Menu den Flyout-Stil, bei dem die Untermenüs von der Seite „hervorfliegen“. Um stattdessen ein Mega-Menü zu erstellen, öffnen Sie das Dropdown-Menü „Untermenü-Anzeigemodus“ und wählen Sie entweder „Standardlayout“ oder „Rasterlayout“.

Das Standardlayout zeigt alle Untermenüs in Spalten an.

Währenddessen ermöglicht Ihnen das Rasterlayout, Untermenüelemente in Spalten und Zeilen zu organisieren.

Dies ist ideal, wenn Sie viele Inhalte anzeigen möchten, wie z. B. alle digitalen Produkte in Ihrem Online-Shop, oder wenn Sie ein ganz bestimmtes Layout im Sinn haben.

Nach Auswahl des Standard- oder Rasterlayouts sehen Sie alle Untermenüs, die diesem übergeordneten Element zugewiesen sind.

Nun können Sie die Anordnung dieser Elemente im Mega-Menü ändern.

Wenn Sie das Standardlayout verwenden, können Sie die Anzahl der Spalten über das Dropdown-Menü in der oberen rechten Ecke ändern.

Wenn Sie ein Rasterlayout verwenden, können Sie Spalten und Zeilen mit den Schaltflächen '+Spalte' und '+Zeile' hinzufügen.

Wenn Sie mit dem Layout zufrieden sind, können Sie die Untermenüelemente per Drag & Drop in verschiedene Spalten und Zeilen anordnen.

Danach ist es an der Zeit zu ändern, wie viel Platz jedes Element in der Spalte einnimmt. Max Mega Menu zeigt die aktuelle Größe als Bruchteil der gesamten verfügbaren Breite an.

Zum Beispiel nehmen im folgenden Bild beide Spalten die Hälfte des verfügbaren Platzes ein.

Um die Größe eines Elements zu ändern, klicken Sie einfach auf seine Pfeiltasten, um den Bruch größer oder kleiner zu machen.

Erstellen Sie ein mobilfreundliches Mega-Menü (nur Rasterlayout)

Standardmäßig zeigt Max Mega Menu auf Desktop- und Mobilgeräten denselben Inhalt an. Dies kann bei Rasterlayouts ein Problem sein, da Smartphones und Tablets normalerweise kleinere Bildschirme haben und horizontales Scrollen schwierig sein kann.

Wenn Sie das Rasterlayout verwenden, können Sie für mobile Geräte unterschiedliche Mega-Menüs erstellen. Sie können beispielsweise weniger Spalten verwenden, damit Benutzer nicht horizontal scrollen müssen. Auf diese Weise können Sie ein mobilfreundliches WordPress-Menü erstellen.

Sie können ganze Spalten oder Zeilen mit dem Symbol „Auf Mobilgeräten ausblenden“ ausblenden, das wie ein kleines Mobiltelefon aussieht.

Schalten Sie einfach das Symbol ein und aus, um verschiedene Inhalte auf Desktop und Mobilgeräten auszublenden und anzuzeigen.

Reichhaltigen Inhalt mit Mega-Menü-Widgets hinzufügen

Damit können Sie Widgets zum Mega-Menü hinzufügen. Dies ermöglicht es Ihnen, zusätzliche Inhalte im Untermenü anzuzeigen, wie z. B. aktuelle Kommentare, Videos, Galerien und mehr.

Zum Beispiel könnten Sie Bilder verwenden, um einen Ausverkauf in Ihrem Online-Shop zu bewerben oder Ihre neuesten Produkte hervorzuheben.

Um ein Widget hinzuzufügen, klicken Sie einfach, um das Dropdown-Menü „Ein Widget auswählen…“ zu öffnen.

Sie können nun ein Widget aus der Liste auswählen.

WordPress fügt das Widget automatisch zu einer Spalte oder Zeile hinzu, aber Sie können es per Drag & Drop an einen neuen Ort verschieben.

Um das Widget zu konfigurieren, klicken Sie auf das kleine Schraubenschlüsselsymbol.

Dies öffnet ein Popup, in dem Sie dem Widget Inhalte hinzufügen und seine Einstellungen ändern können.

Sie sehen unterschiedliche Optionen, je nachdem, welche Art von Widget Sie erstellen. Wenn Sie beispielsweise ein Audio-Musik-Player-Widget zum Mega-Menü hinzufügen, sehen Sie Einstellungen, in denen Sie eine Audiospur hochladen können.

Alle Widgets haben ein Feld 'Titel', in das Sie Text eingeben können, der über dem Widget angezeigt wird.

Wenn Sie fertig sind, klicken Sie auf „Speichern“, um Ihre Änderungen zu speichern, und wählen Sie dann „Schließen“. Um weitere Widgets zum Mega-Menü hinzuzufügen, folgen Sie einfach demselben oben beschriebenen Prozess.

Überprüfen Sie die Standardeinstellungen für Mega-Menüs

Klicken Sie als Nächstes einfach auf die Registerkarte „Einstellungen“.

Hier können Sie Kontrollkästchen verwenden, um verschiedene Inhalte im Untermenü auszublenden oder anzuzeigen.

Sie können das Untermenü auch auf Mobilgeräten und Desktops ausblenden oder anzeigen und die Ausrichtung ändern, sodass das Untermenü links oder rechts vom übergeordneten Element der obersten Ebene geöffnet wird.

Wenn Sie Änderungen an den Standardeinstellungen vornehmen, vergessen Sie nicht, auf „Änderungen speichern“ zu klicken.

Bildsymbole zum WordPress Mega-Menü hinzufügen

Bildsymbole helfen Besuchern zu verstehen, worum es bei einem Menüpunkt geht, ohne die Navigationsbeschriftung lesen zu müssen. Dies ist besonders nützlich für große Menüs, bei denen ein Besucher den Inhalt lieber schnell überfliegen möchte, anstatt jede Navigationsbeschriftung zu lesen.

Sie können Icons verwenden, um die wichtigsten Inhalte hervorzuheben. Sie könnten Besucher beispielsweise ermutigen, ihren Kauf abzuschließen, indem Sie dem Menüpunkt „Kasse“ ein Einkaufswagen-Icon hinzufügen.

Um Bildsymbole zu Ihrem Navigationsmenü hinzufügen, klicken Sie auf die Registerkarte „Icon.“

Sie können nun jedes Dash-Symbol aus der integrierten Bibliothek auswählen oder Ihr eigenes Bild verwenden. Wenn Sie auf Max Mega Menu Pro upgraden, haben Sie auch Zugriff auf andere Icon-Schriftarten, Genericons und FontAwesome.

Konfigurieren Sie das Mega-Menü auf Ihrer WordPress-Website

Nachdem Sie alle diese Einstellungen durchgearbeitet haben, können Sie das Popup-Fenster schließen, um zur Hauptseite Darstellung » Menüs zurückzukehren.

Sie können diesen Vorgang nun für jedes übergeordnete Element der obersten Ebene wiederholen.

Wenn Sie mit der Einrichtung des Mega-Menüs zufrieden sind, klicken Sie auf die Schaltfläche „Menü speichern“, um es live zu schalten.

Besuchen Sie nun einfach das Frontend Ihrer Website, um das Mega-Menü in Aktion zu sehen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ein Mega-Menü auf Ihrer WordPress-Website hinzufügen. Sie können auch unseren Schritt-für-Schritt-Leitfaden unter So fügen Sie einen Button in Ihr WordPress-Header-Menü ein und unser Tutorial unter So erstellen Sie ein Sticky Floating Navigationsmenü in WordPress durchgehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.