Inhaltsverzeichnis
Möchten Sie ein Mega-Menü auf Ihrer WordPress-Website hinzufügen?
Mit Mega-Menüs können Sie Dutzende oder sogar Hunderte von Links in benutzerfreundlichen Spalten und Zeilen anordnen und dann reichhaltige Inhalte wie Bilder und Videos hinzufügen, um Ihre Mega-Menüs noch hilfreicher zu machen.
In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie 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 ein Dropdown-Menü, ein Header-Menü usw. erstellen können. Es gibt sogar Plugins, mit denen Sie benutzerdefinierte Navigationsmenüs in WordPress-Themes erstellen können.
Wenn Ihre Website sehr viele Inhalte hat, sollten Sie stattdessen ein Mega-Menü erstellen. Mit diesen Mega-Menüs können Sie der WordPress-Navigation mehrspaltige Dropdowns hinzufügen.
Sie können Mega-Menüs verwenden, um Ihre Inhalte unter verschiedenen Rubriken und Unterrubriken zu organisieren, damit Besucher genau die Seite finden, die sie suchen. Wenn Sie beispielsweise einen Online-Marktplatz erstellen, können Sie alle Produktkategorien und Unterkategorien in einem Mega-Menü anordnen.
Dies hilft den Käufern, genau die Produktkategorie zu finden, die sie suchen, und einen Kauf zu tätigen.
Mega-Menüs können Ihren Besuchern auch reichhaltige Inhalte zeigen, z. B. Videos, Texte, Suchfunktionen und aktuelle Beiträge.
Selbst wenn Sie Dutzende von Menüpunkten anzeigen, kann die Aufteilung in Spalten und das Hinzufügen eines entsprechenden Bildes den Besuchern helfen, in Sekundenschnelle genau den Inhalt zu finden, den sie suchen.
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ü auf Ihrer WordPress-Website hinzuzufügen, ist die Verwendung von Max Mega Menu. Dieses Plugin ermöglicht es Ihnen, Ihren Mega-Menüs reichhaltige Inhalte hinzuzufügen, einschließlich Bilder, Text, Galerien und mehr.
Auf diese Weise können Sie ansprechendere und hilfreichere Menüs erstellen.
Sie können auch jeden Teil des Mega-Menüs gestalten, 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
Nach der Aktivierung gehen Sie zu Mega Menu " Menüpunkte um all die 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. Das funktioniert für die meisten WordPress-Websites gut, aber Sie können auch das Dropdown-Menü "Effect" öffnen und stattdessen "Hover" oder "Click" auswählen.
Wenn Sie "Klicken" 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 die Besucher dazu ermutigen, verschiedene Bereiche Ihrer Website zu erkunden, so dass Sie "Hover" auf Landing Pages oder der Startseite Ihrer Website verwenden sollten.
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. Durch das 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-Menü und wählen Sie "Keine".
Standardmäßig verwendet Mega Menu keine Animationen auf mobilen Geräten, um Leistungsprobleme zu vermeiden. Wenn Sie 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 das Dropdown-Menü "Ereignis" auf "Klick" setzen, müssen Sie außerdem die Registerkarte "Erweitert" auswählen.
Hier können Sie mit dem Klick-Ereignis-Verhalten festlegen, was passiert, wenn der Besucher auf Ihr Mega-Menü klickt, z. B. ob der zweite Klick das Menü schließt oder einen neuen Link öffnet.
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 und einen Schatten hinzufügen.
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 Hilfe von Widgets fügen Sie Inhalte zu Ihren Mega-Menüs hinzu. Sie können 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 liefern oder Besucher dazu anregen, auf bestimmte Menüpunkte zu klicken.
Sie können das Aussehen dieser Widgets anpassen, indem Sie zum Abschnitt "Widgets" blättern. Sie können beispielsweise die Farbe des Widgettitels ändern, die Schriftgröße erhöhen, Polsterungen hinzufügen und die Ausrichtung anpassen.
Auf diesem Bildschirm können Sie auch festlegen, wie die Menüpunkte der zweiten und dritten Ebene auf Ihrer Website 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.
Auf der zweiten Ebene ist der Text rot, und sowohl die dritte als auch die vierte Ebene verwenden denselben gelben 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ü mit Max Mega Menu angepasst haben, können Sie es zu Ihrer Website hinzufügen.
Gehen Sie einfach rüber zu Erscheinungsbild " Menüs .
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 Sie 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.
Wählen Sie dann den gewünschten Ort aus und klicken Sie auf "Menü erstellen". 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 und sonstigen Inhalte hinzu, die Sie in das Menü aufnehmen möchten. Eine Schritt-für-Schritt-Anleitung finden Sie in unserem Leitfaden für Einsteiger zum Hinzufügen eines Navigationsmenüs in WordPress.
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, so dass sie untereinander eingerückt erscheinen. Das ist ähnlich wie beim Erstellen eines Dropdown-Menüs in WordPress.
Unabhängig davon, ob Sie ein neues Menü erstellen oder ein altes aktualisieren, haben Sie zu diesem Zeitpunkt alle Elemente, die Sie in das Mega-Menü aufnehmen möchten.
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 überschreiben, so dass Sie einzigartige Megamenüs für verschiedene Bereiche Ihrer Website erstellen können, also nehmen Sie die gewünschten Änderungen vor.
Klicken Sie anschließend auf "Speichern".
Erstellen Sie das Mega-Menü-Layout
Wenn Sie nun mit der Maus über das erste Element der obersten Ebene fahren, sehen Sie eine neue Schaltfläche "Mega-Menü", auf die Sie klicken können.
Sie sehen nun alle Einstellungen für diesen Eintrag der obersten Ebene.
Um stattdessen ein Mega-Menü zu erstellen, öffnen Sie das Dropdown-Menü "Anzeigemodus für Untermenüs" und wählen Sie entweder "Standardlayout" oder "Rasterlayout".
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 zeigen wollen oder ein ganz bestimmtes Layout im Kopf 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 per Drag-and-Drop 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 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 ein Element zu vergrößern oder zu verkleinern, klicken Sie einfach auf die Pfeilschaltflächen, um den Anteil zu erhöhen oder zu verringern.
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, z. B. mit weniger Spalten, damit die Nutzer nicht horizontal scrollen müssen.
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 Handy ein- und auszublenden.
Reichhaltige Inhalte mit Mega-Menü-Widgets hinzufügen
Anschließend können Sie dem Mega-Menü Widgets hinzufügen, mit denen Sie im Untermenü zusätzliche Inhalte wie WordPress-Galerien, Texte, Videos, aktuelle Kommentare und vieles mehr anzeigen können.
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 Art des Widgets, das Sie erstellen, werden unterschiedliche Optionen angezeigt.
Wenn Sie zum Beispiel ein Bild-Widget hinzugefügt haben, können Sie auf "Bild hinzufügen" klicken und entweder ein Bild aus der Mediathek auswählen oder eine Datei von Ihrem Computer hochladen.
Wenn Sie ein "Text"-Widget hinzufügen, wird ein kleiner Editor angezeigt, in den Sie Ihren Text eingeben können.
Alle Widgets haben ein Feld "Titel", in das Sie einen Text eingeben können, der oberhalb des Widgets angezeigt wird.
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 auf dem Desktop ein- oder ausblenden und die Ausrichtung so ändern, dass das Untermenü links oder rechts von der übergeordneten Ebene 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 dem Besucher zu verstehen, worum es sich bei einem Menüpunkt handelt, ohne dass er die Navigationsbeschriftung lesen muss. 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. So können Sie beispielsweise Besucher dazu ermutigen, ihren Einkauf abzuschließen, indem Sie ein Warenkorb-Symbol in das Menü "Kasse" einfügen.
Um Bildsymbole zu Ihrem Navigationsmenü hinzuzufügen, klicken Sie auf die Registerkarte "Symbol".
Sie können nun ein beliebiges Dashicon aus der integrierten Bibliothek auswählen. Wenn Sie auf Max Mega Menu pro upgraden, haben Sie auch Zugriff auf andere Icon-Fonts, Genericons und FontAwesome, oder Sie können eine Datei aus Ihrer WordPress-Mediathek auswählen.
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 zum Hauptmenü zurückzukehren. Erscheinungsbild " Menüs Seite.
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 Ihre 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 unseren Leitfaden über die besten Drag-and-Drop-WordPress-Seitenersteller durchlesen und wie Sie Ihren Blog-Traffic erhöhen können.
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.
