Wie Sie ein Mega-Menü auf Ihrer WordPress-Website hinzufügen (Schritt für Schritt)

Mit Mega-Menüs können Sie eine Vielzahl von Links und Inhaltskategorien in einem strukturierten, leicht zu navigierenden Layout anzeigen.

Dies kann das Surferlebnis der Besucher erheblich verbessern, da die Navigation auf Ihrer Website intuitiver und zugänglicher wird.

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

In diesem Artikel zeigen wir Ihnen, wie Sie Schritt für Schritt ein Mega-Menü zu Ihrer WordPress-Website hinzufügen können.

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, darunter Dropdown-Menüs, Header-Menüs und mehr. Es gibt sogar Plugins, mit denen Sie eigene Navigationsmenüs in WordPress-Themes erstellen können.

Wenn Ihre Website jedoch sehr viele Inhalte hat, sollten Sie stattdessen ein Mega-Menü erstellen. Damit können Sie der Standard-WordPress-Menüstruktur mehrspaltige Dropdowns hinzufügen.

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

Mega-Menüs können Ihren Besuchern auch reichhaltige Inhalte zeigen, z. B. Videos, Texte, Suchfunktionen und aktuelle Beiträge.

Sie können auch Bilder hinzufügen, die das Scannen von Mega-Menüs erleichtern.

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

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

Der einfachste Weg, ein Mega-Menü zu Ihrer WordPress-Website hinzuzufügen, ist die Verwendung von Max Mega Menu. Mit diesem Plugin können Sie Ihren Mega-Menüs reichhaltige Inhalte hinzufügen, darunter Videos, Bildergalerien, Suchfunktionen und mehr.

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

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

Zunächst müssen Sie das Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.

Aktivieren Sie Mega-Menüs auf Ihrer WordPress-Website

Gehen Sie nach der Aktivierung im WordPress-Dashboard auf die Seite Mega-Menü “ Menüpositionen, um alle verschiedenen Bereiche zu sehen, in denen Sie ein Mega-Menü hinzufügen können.

Je nach WordPress-Theme werden möglicherweise unterschiedliche Optionen angezeigt.

Zunächst müssen Sie Mega-Menüs an allen Stellen aktivieren, an denen Sie sie verwenden möchten.

Klicken Sie dazu einfach auf einen Ort, um ihn zu erweitern, und markieren Sie dann das Feld „Aktiviert“.

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

Die Standardeinstellung ist „Hover intent“, d. h. der Besucher muss einige Sekunden lang mit der Maus über das Mega-Menü fahren, um es auszulösen. Dies funktioniert für die meisten WordPress-Websites gut, 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.

Mit „Hover“ wird Ihr Mega-Menü geöffnet, sobald der Besucher mit der Maus darüber fährt. Dies kann Besucher dazu ermutigen, verschiedene Bereiche Ihrer Website zu erkunden. Daher sollten Sie „Hover“ auf Landing Pages oder der Startseite Ihrer Website verwenden.

Nachdem Sie diese Entscheidung getroffen haben, können Sie die Art und Weise, wie das Menü geöffnet wird, mit Hilfe der „Effekt“-Einstellungen ändern.

Max Mega Menu verfügt über verschiedene Animationen, die Sie ausprobieren können, darunter Fade und Slide Up. Sie können auch die Geschwindigkeit der Animation ändern. Indem Sie verschiedene Animationen ausprobieren, können Sie ein Mega-Menü erstellen, das die Aufmerksamkeit des Besuchers erregt.

Wenn Sie keine Animationen verwenden möchten, öffnen Sie einfach das erste Dropdown-Menü und wählen Sie „Keine“.

Standardmäßig verwendet Mega Menu keine Animationen auf mobilen Geräten, da Smartphones und Tablets in der Regel 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 dem Handy testen möchten, lesen Sie unsere Anleitung, wie Sie die mobile Version von WordPress-Seiten vom Desktop aus betrachten können.

Wenn Sie im Dropdown-Menü „Ereignis“ die Option „Klick“ gewählt haben, vergewissern Sie sich, dass Sie anschließend die Registerkarte „Erweitert“ auswählen.

Hier können Sie mit „Click Event Behavior“ festlegen, was passiert, wenn der Besucher auf Ihr Mega-Menü klickt. Zum Beispiel kann der zweite Klick das Menü schließen oder einen neuen Link öffnen.

Es gibt noch weitere Einstellungen, die Sie sich ansehen können, aber das sollte für die meisten WordPress-Blogs und -Websites ausreichen.

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

Um Mega-Menüs für weitere Standorte zu aktivieren, gehen Sie einfach wie oben beschrieben vor.

Anpassen des Aussehens der Mega-Menüs auf Ihrer Website

Der nächste Schritt ist die Konfiguration des Aussehens der Mega-Menüs auf Ihrer Website.

Wählen Sie dazu die Registerkarte „Menüthemen“ auf der linken Seite des Bildschirms.

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

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

Wenn Sie diese Änderungen wieder rückgängig machen möchten, aktivieren Sie einfach das Kontrollkästchen „Widget-Styling zurücksetzen“ und klicken dann auf „Änderungen speichern“.

Als Nächstes können Sie die Menüleiste anpassen, d. h. die Leiste, die Besucher sehen, wenn das Menü standardmäßig eingeklappt ist.

Um diese Änderungen vorzunehmen, klicken Sie auf die Registerkarte „Menüleiste“ und verwenden Sie dann die Einstellungen, um die Hintergrundfarbe, die Auffüllung, den Radius des Rahmens 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 blättern, können Sie das Aussehen des Hauptmenüs ändern.

Dies ist die erste Zeile der Elemente, die sichtbar ist, wenn das Mega-Menü eingeklappt ist.

Da sie so wichtig sind, sollten Sie die Menüpunkte der obersten Ebene hervorheben.

Im folgenden Bild verwenden wir zum Beispiel eine andere Hintergrundfarbe.

Im Abschnitt „Hover-Status“ können Sie den aktuell ausgewählten Menüpunkt der obersten Ebene hervorheben.

Im folgenden Bild zum Beispiel verwenden wir einen Unterstreichungseffekt.

Dies kann dem Besucher helfen, zu sehen, wo er sich im Menü befindet, was besonders nützlich für Websites ist, die große Mega-Menüs haben müssen.

Wenn Sie einen Schwebezustand hinzufügen, blättern Sie zum unteren Rand des Bildschirms und aktivieren Sie das Feld „Aktuelles Element hervorheben“.

Danach können Sie das Aussehen des Untermenüs ändern.

Dies ist das Menü, das unter einer übergeordneten Ebene erscheint, wie Sie in der folgenden Abbildung sehen können.

Um das Untermenü anzupassen, klicken Sie auf die Registerkarte „Mega-Menüs“.

Sie können nun diese Einstellungen verwenden, um die Hintergrundfarbe des Untermenüs zu ändern, den Radius zu vergrößern, um geschwungene Ecken zu erstellen, Polsterungen hinzuzufügen und vieles mehr.

Mit Widgets fügen Sie Ihren Mega-Menüs Inhalte hinzu. So können Sie beispielsweise 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 bereitstellen oder Besucher zum Anklicken bestimmter Menüpunkte anregen.

Sie können das Aussehen dieser Widgets anpassen, indem Sie zum Abschnitt „Widgets“ blättern. Sie können z. B. die Farbe des Widget-Titels ändern, die Schriftgröße erhöhen, Polsterung hinzufügen und die Ausrichtung anpassen.

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

Wenn Sie Ihre Menüs erstellen, können Sie vier oder mehr Ebenen hinzufü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.

Im folgenden Bild können Sie dies 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 Gestaltung des Menüs zufrieden sind, vergessen Sie nicht, auf „Änderungen speichern“ zu klicken.

Hinzufügen eines Mega-Menüs auf Ihrer WordPress-Website

Sobald Sie das Mega-Menü angepasst haben, können Sie es zu Ihrer Website hinzufügen.

Gehen Sie einfach auf die Seite Erscheinungsbild “ Menüs in der Admin-Seitenleiste.

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

Wenn Sie ganz von vorne anfangen wollen, klicken Sie auf „Neues Menü erstellen“ und geben Sie einen Titel für Ihr neues Mega-Menü ein.

Sie können dann den gewünschten Ort auswählen und auf „Menü erstellen“ klicken. Auch hier muss es sich um einen Ort handeln, an dem Sie Mega-Menüs aktiviert haben.

Inhalt zum WordPress-Menü hinzufügen

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

Eine Schritt-für-Schritt-Anleitung finden Sie in unserer Anleitung für Einsteiger, wie Sie ein Navigationsmenü in WordPress hinzufügen.

Als Nächstes müssen Sie Ihre Elemente in den übergeordneten und untergeordneten Menüs anordnen, 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 die Elemente einfach weiter nach rechts, sodass sie untereinander eingerückt erscheinen. Dies ist ähnlich wie die Erstellung eines Dropdown-Menüs in WordPress.

Aktivieren Sie die Mega-Menü-Funktion

Klicken Sie anschließend auf „Max Mega Menu Settings“ und aktivieren Sie das Kästchen neben „Enable“.

In diesem Feld können Sie auch die Standard-Megamenü-Einstellungen außer Kraft setzen. Auf diese Weise können Sie einzigartige Mega-Menüs für verschiedene Bereiche Ihrer WordPress-Website erstellen, also machen Sie weiter und nehmen Sie alle Änderungen vor, die Sie möchten.

Klicken Sie anschließend auf „Speichern“.

Erstellen Sie das Mega-Menü-Layout

Fahren Sie nun mit der Maus über das erste Element der obersten Ebene, und Sie sehen eine neue Schaltfläche „Mega-Menü“. Klicken Sie einfach auf die Schaltfläche.

Sie sehen nun alle Einstellungen für diesen Eintrag der obersten Ebene.

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

Das Standardlayout zeigt alle Untermenüs in Spalten an.

Mit dem Rasterlayout können Sie Untermenüpunkte in Spalten und Zeilen 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 Menüpunkt zugeordnet sind.

Jetzt 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 mit den Schaltflächen „+Spalte“ und „+Zeile“ Spalten und Zeilen hinzufügen.

Wenn Sie mit dem Layout zufrieden sind, können Sie die Untermenüpunkte durch Ziehen und Ablegen in verschiedenen 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 einen Bruchteil der gesamten verfügbaren Breite an.

In der folgenden Abbildung zum Beispiel nehmen beide Spalten die Hälfte des verfügbaren Platzes ein.

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

Ein mobilfreundliches Mega-Menü erstellen (nur Grid-Layout)

Standardmäßig zeigt Max Mega Menu auf Desktop- und Mobilgeräten denselben Inhalt an. Dies kann bei Grid-Layouts ein Problem darstellen, da Smartphones und Tablets in der Regel kleinere Bildschirme haben und das horizontale Scrollen schwierig sein kann.

Wenn Sie das Grid-Layout verwenden, können Sie verschiedene Mega-Menüs für mobile Geräte erstellen. Sie könnten zum Beispiel weniger Spalten verwenden, damit die Nutzer nicht horizontal scrollen müssen. Auf diese Weise können Sie ein mobilfähiges WordPress-Menü erstellen.

Sie können ganze Spalten oder Zeilen ausblenden, indem Sie das Symbol „Auf dem Handy ausgeblendet“ verwenden, das wie ein kleines Mobiltelefon aussieht.

Schalten Sie das Symbol einfach ein und aus, um unterschiedliche Inhalte auf dem Desktop und auf dem Mobiltelefon ein- und auszublenden.

Reichhaltige Inhalte mit Mega-Menü-Widgets hinzufügen

Nun können Sie damit beginnen, Widgets zum Mega-Menü hinzuzufügen. Damit können Sie zusätzliche Inhalte im Untermenü anzeigen, z. B. die letzten Kommentare, Videos, Galerien und mehr.

Sie können zum Beispiel Bilder verwenden, um einen Verkauf in Ihrem Online-Shop zu bewerben oder Ihre neuesten Produkte hervorzuheben.

Um ein Widget hinzuzufügen, klicken Sie einfach auf das Dropdown-Menü „Wählen Sie ein Widget….“.

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 eine andere Stelle verschieben.

Um das Widget zu konfigurieren, klicken Sie auf das kleine Schraubenschlüssel-Symbol.

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

Je nach der Art des Widgets, das Sie erstellen, werden unterschiedliche Optionen angezeigt. Wenn Sie zum Beispiel ein Audio-Musikplayer-Widget zum Mega-Menü hinzufügen, sehen Sie Einstellungen, mit denen Sie einen Audiotitel hochladen können.

Alle Widgets haben ein Feld „Titel“, in das Sie einen Text eingeben können, der oberhalb des Widgets erscheint.

Wenn Sie fertig sind, klicken Sie auf „Speichern“, um Ihre Änderungen zu speichern, und wählen Sie dann „Schließen“. Um dem Mega-Menü weitere Widgets hinzuzufügen, gehen Sie einfach wie oben beschrieben vor.

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

Klicken Sie anschließend auf die Registerkarte „Einstellungen“.

Hier können Sie mit Hilfe von Kontrollkästchen verschiedene Inhalte des Untermenüs ein- oder ausblenden.

Sie können das Untermenü auch auf mobilen Geräten und Desktops ein- oder ausblenden und die Ausrichtung so ändern, dass das Untermenü links oder rechts vom übergeordneten Menü geöffnet wird.

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

Hinzufügen von Bildsymbolen zum WordPress-Megamenü

Bildsymbole helfen den Besuchern zu verstehen, worum es bei einem Menüpunkt geht, ohne dass sie die Navigationsbeschriftung lesen müssen. Dies ist besonders nützlich für große Menüs, bei denen der Besucher den Inhalt vielleicht lieber schnell überfliegt, als die einzelnen Navigationsbeschriftungen zu lesen.

Sie können Icons verwenden, um die wichtigsten Inhalte hervorzuheben. Zum Beispiel könnten Sie Besucher dazu ermutigen, ihren Einkauf abzuschließen, indem Sie dem Menü „Kasse“ ein Warenkorb-Symbol hinzufügen.

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

Sie können nun ein beliebiges 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-Fonts, Genericons und FontAwesome.

Beenden Sie die Konfiguration des Mega-Menüs auf Ihrer WordPress-Website

Nachdem Sie sich durch all diese Einstellungen gearbeitet haben, können Sie das Popup-Fenster schließen, um zur Hauptseite Erscheinungsbild “ Menüs zurückzukehren.

Sie können diesen Vorgang nun für jede übergeordnete Ebene wiederholen.

Wenn Sie mit dem Aufbau des Megamenüs zufrieden sind, klicken Sie auf die Schaltfläche Menü speichern, um es zu aktivieren.

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

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie ein Mega-Menü auf Ihrer WordPress-Website hinzufügen können. Sie können auch unsere Schritt-für-Schritt-Anleitung zum Hinzufügen einer Schaltfläche in Ihrem WordPress-Header-Menü und unser Tutorial zum Erstellen eines schwebenden Navigationsmenüs in WordPress lesen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.