So erstellen Sie ein ansprechendes Mega-Menü in WordPress: Eine einfache Anleitung

Beim Design einer WordPress-Websiteist es unerlässlich, ein optisch ansprechendes Mega-Menü zu erstellen. Dies ist besonders wichtig für E-Commerce- oder große Unternehmenswebsites, die eine breite Produktpalette oder Kategorien präsentieren möchten.

Ein WordPress-Megamenü hilft dabei, diese Kategorien übersichtlich zu organisieren und Nutzern die Navigation zu erleichtern. Wie? Ein WordPress-Megamenü ist eine hervorragende Möglichkeit, viele Inhalte in einem einzigen, benutzerfreundlichen Menü zu präsentieren. Es ermöglicht Ihnen, Menüpunkte in mehreren Spalten oder Zeilen anzuordnen, sodass Nutzer schnell verschiedene Bereiche Ihrer Website finden, ohne sich endlos durch Seiten klicken zu müssen.

Dies kann die Benutzerfreundlichkeit Ihrer Website erheblich verbessern, indem die Navigation im Webdesign flüssiger und barrierefreier gestaltet wird. In dieser Anleitung zeigen wir Ihnen in wenigen Schritten, wie Sie ein Mega-Menü zu Ihrer WordPress-Website hinzufügen, damit jeder Besucher schnell und einfach findet, wonach er sucht.

Mega-Menü in WordPress verstehen?

Was genau ist ein Mega-Menü in WordPress und wozu brauche ich es? Ein WordPress-Mega-Menü ermöglicht es Website-Betreibern, verschiedene Spalten, Medieninhalte und individuelle Gestaltungsmöglichkeiten in ihr Website-Menü einzufügen. Früher waren herkömmliche Mega-Menüs unübersichtlich, doch mittlerweile ist es einfacher geworden, mehrere Kategorien in WordPress mit Mega-Menüs zu strukturieren und zu organisieren.

WordPress bietet in der Regel einen Drag-and-Drop-Builder, mit dem sich verschiedene Menütypen wie Dropdown-Menüs, Kopfzeilenmenüs und mehr einfach erstellen lassen. Zusätzlich gibt es Plugins, mit denen Sie die Navigationsmenüs in WordPress-Themes anpassen können.

Wenn Ihre Website jedoch sehr viele Inhalte enthält, reicht ein herkömmliches Menü möglicherweise nicht aus. In diesem Fall ist ein Mega-Menü eine hervorragende Lösung. Mit einem Mega-Menü können Sie Ihrem WordPress-Menü mehrspaltige Dropdown-Menüs hinzufügen und so Ihre Inhalte unter verschiedenen Überschriften und Unterüberschriften übersichtlich organisieren. Dadurch finden Besucher schnell und unkompliziert, wonach sie suchen.

Verwandtes Thema: Wie behebt man das Problem „WordPress kann Seite nicht zum Menü hinzufügen“?

So erstellen Sie ein ansprechendes Mega-Menü in WordPress

Die Erstellung eines ansprechenden Mega-Menüs in WordPress ist kinderleicht. Sie benötigen lediglich das Max Mega Menu Plugin, und schon ist Ihr Mega-Menü einsatzbereit.

Wenn Sie jedoch mit den technischen Aspekten der Erstellung eines Mega-Menüs vertraut sind, können Sie es auch manuell erstellen. In diesem Abschnitt werden wir sowohl das Plugin als auch die manuelle Methode für optimale Ergebnisse behandeln.

Dann fangen wir mal an:

So erstellen Sie das gewünschte Mega-Menü in WordPress mit dem Plugin

Am einfachsten fügen Sie Ihrer WordPress-Website ein Mega-Menü mit dem Max Mega Menu-Plugin hinzu. Mit diesem Tool können Sie Ihre Menüs durch das Hinzufügen von Inhalten wie Videos, Bildergalerien, Suchleisten und vielem mehr erweitern.

Mit Max Mega Menu können Sie Menüs erstellen, die übersichtlich, optisch ansprechend und hilfreich für Ihre Besucher sind.

Schritt 1: Installieren und Einrichten des Max Mega Menu-Plugins

Melden Sie sich zunächst in Ihrem WordPress-Dashboard und gehen Sie zu Plugins → Neu hinzufügen. Geben Sie in der Suchleiste „Max Mega Menu“ ein und klicken Sie anschließend auf Jetzt installieren und aktivieren.

Kurzer Tipp: Bevor Sie loslegen, stellen Sie sicher, dass Sie alle wichtigen Seiten veröffentlicht und ein benutzerdefiniertes Navigationsmenü dafür erstellt haben.

Nach der Aktivierung navigieren Sie in der linken Seitenleiste zum Mega-Menü, um auf die Einstellungen zuzugreifen. Um einen Menüpunkt festzulegen, gehen Sie wie folgt vor:

• Gehe zu Aussehen → Menüs.
• Wählen Sie „Menüpositionen“ und klicken Sie auf „Weitere Menüposition hinzufügen“.
• Wählen Sie aus, wo Ihr Menü erscheinen soll (z. B. Kopfzeile, Fußzeile, Seitenleiste).
• Weisen Sie Ihr benutzerdefiniertes Menü zu und klicken Sie anschließend auf „Menüposition hinzufügen“.

in den allgemeinen EinstellungenIhr Mega-Menü und legen Sie fest, wie es geöffnet werden soll. Sie haben folgende Möglichkeiten:

• Hover-Intent: Öffnet sich nach einer kurzen Verzögerung, wodurch versehentliche Klicks verhindert werden.
• Hover: Öffnet sich sofort beim Überfahren mit der Maus und sorgt so für ein reibungsloses Benutzererlebnis.
• Klick: Erfordert einen Klick oder ein Tippen, ideal für Touchscreen-Geräte.

Wenn Sie sich für „Klicken“ entscheiden, erkunden Sie die Optionen unter Erweitert → Klickereignisverhalten, um zu steuern, was bei nachfolgenden Klicks geschieht.

können Sie außerdem Animationseffekte hinzufügen Effekt- . Zu den Optionen gehören Überblenden, Gleitenoder Aufblenden, jeweils mit Geschwindigkeitseinstellungen von schnell bis langsam.

Schritt 2: Menülayout und -darstellung anpassen

Max Mega Menu verfügt über ein Standarddesign, Sie können aber auch Ihr eigenes erstellen. So gestalten Sie ein individuelles Design:

1. Gehe Menüdesigns in den Max Mega Menu-Einstellungen
2. Klicken Sie auf das Drei-Punkte-Symbol, um das Design auszuwählen , und wählen Sie dann „Neues Design hinzufügen“.
3. Unter „Allgemeine Einstellungen“können Sie Dinge wie Pfeilstil, Zeilenhöhe und Menüschatten anpassen.

Unter „Menüleiste“können Sie das Erscheinungsbild des Hauptmenüs anpassen, indem Sie Höhe, Hintergrundfarbe und Innenabstand ändern sowie Rahmen hinzufügen. Für jeden Menüpunkt können Sie Optionen wie die folgenden festlegen:

• Ausrichtung: Elemente links, mittig oder rechts positionieren.
• Schriftart: Passen Sie die Typografie an das Design Ihrer Website an.
• Hintergrund & Abstände: Legen Sie Hintergrundfarben, Ränder, Innenabstände und Rahmen für ein professionelles Erscheinungsbild fest.

Schritt 3: Fügen Sie Ihrem Menü Inhalte hinzu

Mit der Drag-and-Drop-Oberfläche von Max Mega Menu ist das Hinzufügen von Inhalten kinderleicht. Sie können Textlinks, WooCommerce-Produkte, Bilder und sogar Suchfilter einfügen.

1. Gehen Sie zu Design → Menüs , um ein Menü zu erstellen oder zu bearbeiten.
2. Aktivieren Sie in den Max Mega Menu-Einstellungen auf der linken Seite die Option „Aktivieren“ für den von Ihnen gewählten Standort.
3. Füge Seiten, Beiträge, Kategorien und Produkte zur Menüstruktur hinzu.
4. Elemente per Drag & Drop in mehreren Ebenen anordnen.

Um ein Mega-Menü zu erstellen, bewegen Sie den Mauszeiger über eine Seite und klicken Sie auf „Mega-Menü“. Stellen Sie den Anzeigemodus auf „Rasterlayout“ für mehrspaltige Menüs oder auf „Standardlayout“ auswählen „Symbole“ .

Nachdem Sie alles angepasst haben, klicken Sie auf „Menü speichern“ , um Ihr Mega-Menü zu aktivieren!

Lesen Sie: So migrieren Sie von Drupal zu WordPress: Vollständiger Leitfaden

Wie man in WordPress manuell ein Mega-Menü erstellt

Im ersten Abschnitt haben wir gesehen, wie man mithilfe des Max Mega Menu Plugins ein Mega-Menü in WordPress erstellt. Nun werden wir uns damit beschäftigen, wie man mit CSS-Code ein ansprechendes Mega-Menü in WordPress gestaltet.

Diese Methode eignet sich für alle, die mehr Flexibilität und Kontrolle über ihre Menügestaltung wünschen. Allerdings sind gute CSS- Kenntnisse erforderlich, um mit dieser Methode optimale Ergebnisse zu erzielen.

Schritt 1: Staging-Umgebung einrichten

Bevor Sie Änderungen an Ihrer Website vornehmen, sollten Sie in einer sicheren Umgebung arbeiten, in der Sie experimentieren können, ohne die Live-Website zu beeinträchtigen. Nutzen Sie dafür ein Managed-WordPress-Hosting-Unternehmen mit einem Staging-Tool, mit dem Sie eine Kopie Ihrer Website erstellen und Änderungen zunächst testen können.

So erstellen Sie eine Staging-Umgebung:

1. Melden Sie sich bei hPanel und wählen Sie Websites.
2. Wählen Sie Ihre Domain aus und klicken Sie auf Verwalten.
3. zu WordPress → Staging im linken Menü
4. Klicken Sie „Staging“ auf „Staging erstellen“ und folgen Sie den Anweisungen, um eine Subdomain für Ihre Staging-Umgebung einzurichten.

Lernen Sie: Wie entfernt man ungenutztes CSS in WordPress?

Schritt 2: Zugriff auf und Bearbeitung des Stylesheets Ihres Themes

Sobald Ihre Testumgebung eingerichtet ist, können Sie das Stylesheet Ihres Themes gefahrlos bearbeiten, um Ihr Menü anzupassen.

Hinweis: Erstellen Sie nach Möglichkeit ein Child-Theme, anstatt das Haupt-Theme zu bearbeiten, um zu vermeiden, dass Ihre Anpassungen bei einem Theme-Update verloren gehen.

So greifen Sie im Dateimanager Ihres Webhostings auf das Stylesheet zu:

1. Gehen Sie Dateien → Dateimanager in hPanel
2. Ihrer Domain aus public_html und navigieren Sie dann zu Staging → wp_content → themes.
3. Öffnen Sie den Ordner Ihres Themes und doppelklicken Sie auf style.css , um die Datei zu bearbeiten.

Fügen Sie diesen Code hinzu, um Untermenüpunkte beim Überfahren mit der Maus sichtbar zu machen:

.main-navigation ul:hover li ul,.main-navigation ul:hover li ul li ul {display: inherit;}

Lernen Sie: Wie Sie eine Staging-Website in WordPress live schalten, ohne die Datenbank zu überschreiben.

Schritt 3: Passen Sie Ihr Mega-Menü an

Jetzt verleihen wir dem Mega-Menü einen individuellen Stil. Hier sind ein paar CSS-Codebeispiele für den Anfang:

Erstellen Sie Spalten innerhalb des Mega-Menüs:

.mega-menu li.mega-menu-column {width: 25%; /* für ein 4-spaltiges Layout */float: left;padding: 10px;}

Menüpunktfarbe, -abstand und Textstil anpassen:

.mega-menu ul.mega-sub-menu li a {color: #555;padding: 8px 15px;display: block;text-decoration: none;}

Für Mobilgeräte optimiert:

@media screen and (max-width: 767px) {.mega-menu li.mega-menu-column {width: 100%;float: none;}}

Diese Codebeispiele sind ein guter Ausgangspunkt. Testen und passen Sie sie aber unbedingt an das Design Ihrer Website an. Sobald Sie mit Ihren Anpassungen zufrieden sind, können Sie die Änderungen von der Testumgebung auf Ihre Live-Website übertragen.

Anleitung: Wie behebt man Probleme mit Media Queries in WordPress?

Die besten Mega-Menü-Plugins für ein ansprechendes Mega-Menü in WordPress

Wir sind uns sicher, dass Sie nun über das nötige Wissen verfügen, um in WordPress ein Mega-Menü zu erstellen – ob mit einem Plugin oder per CSS-Code. Die Verwendung eines Plugins ist jedoch mit Abstand die beste Methode. Sie ist einfach, zeitsparend und ideal für WordPress-Einsteiger.

Deshalb haben wir neben dem Max Mega Menu Plugin einige Top-Plugins ausgewählt, mit denen Sie ein ansprechenderes Mega-Menü für Ihre WordPress-Website erstellen können.

UberMenü

UberMenu ist bei WordPress-Nutzern die erste Wahl für flexible, responsive Mega- und Flyout-Menüs. Mit diesem Premium-Plugin haben Sie die volle Kontrolle über Übergänge, Schriftarten, Menüausrichtung (horizontal oder vertikal) und Hintergrundfarbe. Alle Optionen lassen sich bequem über ein benutzerfreundliches Admin-Dashboard verwalten.

Hier können Sie Spaltenbreiten festlegen, Widgets, Shortcodes und benutzerdefiniertes HTML hinzufügen und Änderungen in Echtzeit im Live-Vorschaumodus anzeigen. UberMenu ist ein leistungsstarkes Tool für alle, die ein ansprechendes und dynamisches Menülayout erstellen möchten.

QuadMenu

QuadMenu ist ein Open-Source-WordPress-Mega-Menü-Plugin mit zahlreichen Optionen und Designs. In der kostenlosen Version können Sie ein Navigations-Widget hinzufügen, benutzerdefinierte Breakpoints für das Ein- und Ausblenden des Menüs festlegen und verschiedene Menüstile wie Off-Canvas-, Sticky-, horizontale und vertikale Mega-Menüs erstellen. Dank dieser Flexibilität lässt sich die Navigation ganz einfach an den Stil Ihrer Website anpassen, ohne dass Sie in eine Premium-Version investieren müssen.

GutenKit

GutenKit ist ein leistungsstarkes Gutenberg-Plugin, das die Erstellung von Mega-Menüs mithilfe von Blöcken vereinfacht. Es bietet zahlreiche vorgefertigte Muster und Vorlagen, sodass Sie sofort ein Design auswählen und es nach Ihren Wünschen anpassen können.

Mit voller Kontrolle über Inhalt, Stil und erweiterten Anpassungsmöglichkeiten ist GutenKit dank seiner benutzerfreundlichen Oberfläche eine hervorragende Wahl für alle, die Websites in einem Block-Editor erstellen und verfeinern möchten.

Neben der Mega-Menü-Funktion bietet es über 60 Blöcke und über 25 Module für vielseitige Anpassungen innerhalb von Gutenberg – eine ideale Alternative zu ElementsKit für blockbasierte Websites.

JetMenu

JetMenu ist ein Premium-Plugin zur Erstellung interaktiver WordPress-Megamenüs mit vielfältigen Inhaltsoptionen wie Bildern, Videos und Audio. Für 43 US-Dollar pro Jahr erhalten Sie Zugriff auf einen Drag-and-Drop-Builder und verschiedene Menülayouts, darunter Hamburger-, horizontale und vertikale Ausrichtung.

Ein herausragendes Merkmal ist der Preset-Manager, mit dem Sie mehrere Vorlagen für verschiedene Menüs speichern können – ideal für Websites, die flexible und ansprechende Navigationsoptionen benötigen.

Hero-Menü

Hero Menu von Hero Plugins ist eine herausragende Premium-Lösung für die Erstellung individueller WordPress-Menüs. Der intuitive Drag-and-Drop-Builder mit farbcodierter Benutzeroberfläche ermöglicht die einfache Organisation und Visualisierung der Menühierarchie. Spezielle Elemente wie Logo, Suchleiste oder Icons lassen sich mit nur einem Klick hinzufügen.

Hero Menu bietet zudem verschiedene Menüstile und 60 voreingestellte Farbkombinationen, was Ihnen Zeit beim Design spart. Mit Hero Menu erstellte Menüs sind vollständig responsiv und mit WooCommerce kompatibel und eignen sich daher hervorragend für E-Commerce-Websites.

Zudem wurde getestet, ob es nahtlos mit beliebten WordPress-Themes wie Divi und Avada zusammenarbeitet und somit eine reibungslose Integration in das Design Ihrer Website gewährleistet.

Zusammenfassung

Nachdem Sie nun wissen, wie Sie in WordPress ein Mega-Menü erstellen – auch wenn Ihr Theme keines mitbringt – können Sie die Navigation auf Ihrer inhaltsreichen Website deutlich vereinfachen. Mega-Menüs eignen sich perfekt, um große Mengen an Inhalten zu organisieren und Besuchern die Suche zu erleichtern, was die Benutzerfreundlichkeit insgesamt verbessert.

Vor dem Launch Ihrer WordPress-Website ist es entscheidend, dass die Navigation natürlich und intuitiv wirkt. Für E-Commerce-Websites oder Websites mit vielen Seiten kann ein Mega-Menü den entscheidenden Unterschied machen. Im Gegensatz zu Standardmenüs ermöglichen Mega-Menüs die übersichtliche und ansprechende Darstellung komplexer Informationen.