Mega-Menü
Wandle einen beliebigen Menüpunkt der obersten Ebene in ein vollbreites Panel mit bis zu 4 Spalten um — kombiniere Links, Überschriften, Bilder, Shortcodes und mehr, ganz ohne Code.
Was ist ein Mega-Menü?
Ein Standard-WordPress-Dropdown zeigt eine einfache vertikale Liste von Unterelementen. Ein Mega-Menü öffnet ein breites Panel, das mehrere Spalten, Abschnittsüberschriften, Icons und Bilder enthalten kann. Es ist auf großen E-Commerce-Websites und inhaltsschweren Portalen weit verbreitet.
Mega-Menü für einen Menüpunkt aktivieren
- Gehe zu Menu Builder → ⚡ Mega-Menü in der Admin-Leiste.
- Die Elementliste zeigt für jeden Menüpunkt der ersten Ebene EIN/AUS-Status-Badges.
- Klicke bei dem gewünschten Element auf ＋ Mega-Menü aktivieren.
- Klicke auf ⚡ Spalten bearbeiten ▶, um den Spalten-Editor zu öffnen.
- Spalten hinzufügen, mit Inhalten befüllen, Modal schließen und speichern.
Mega-Menüs können nur für Elemente der obersten Ebene aktiviert werden. Unterelemente werden in Spalten angeordnet, nicht als verschachtelte Dropdowns. Pro Element werden maximal 4 Spalten unterstützt.
Spalten hinzufügen und anordnen
Im Spalten-Editor-Modal kannst du:
- Spalte hinzufügen — auf + Spalte hinzufügen klicken.
- Spalte duplizieren — Duplikat-Icon im Spalten-Header klicken (bis max. 4 Spalten).
- Spalten neu anordnen — Spalten-Handle links oder rechts ziehen.
- Spaltenbreite festlegen — Prozentangabe eingeben (leer für gleiche Verteilung).
- Ausrichtung festlegen — Links, Mitte oder Rechts für alle Elemente der Spalte.
- Spalte löschen — Papierkorb-Icon im Spalten-Header klicken.
Spalteninhaltstypen
Jede Spalte enthält einen oder mehrere Inhaltsblöcke. Klicke auf + Element hinzufügen in einer Spalte, um einen Typ zu wählen:
| Typ | Beschreibung | Wichtige Felder |
|---|---|---|
| Link | Klickbarer Link mit optionalem Icon und Beschreibungszeile. | Bezeichnung, URL, Icon-Klasse, Beschreibung, Neues Tab |
| Überschrift | Nicht anklickbare Abschnittsbezeichnung zum visuellen Gruppieren. | Bezeichnung, Icon-Klasse |
| Trennlinie | Dünne horizontale Linie zur Trennung von Gruppen. | — |
| Bild | Vollbreiter Bildblock, optional mit Link. Aus WP-Mediathek oder externer URL. | Bild, Link-URL, Breite, Höhe, Neues Tab |
| Shortcode | Rendert beliebige Shortcodes in der Spalte — nützlich für Formulare, Newsletter, Produktraster. | Shortcode-String |
Individuelle Darstellung
Jedes Mega-Menü-Panel hat einen eigenen 🎨 Darstellung-Tab im Editor-Modal. Änderungen gelten nur für dieses Panel. Klicke auf ↺ Globale Standards zurücksetzen, um alle Überschreibungen zu löschen.
| Steuerung | Beschreibung |
|---|---|
| Hintergrund | Einfarbig, einer von 12 Verlaufs-Presets oder benutzerdefinierter Verlauf. |
| Panel-Maximalbreite (px) | Begrenzt die Breite (400–2400 px) und zentriert das Panel. |
| Innenabstand oben/unten & links/rechts | Innerer Abstand des Panels. |
| Spaltenabstand | Abstand zwischen Spalten. |
| Rahmenradius | Abrundung der zwei unteren Ecken des Panels. |
| Schriftgröße | Basis-Schriftgröße für alle Inhalte im Panel. |
| Link/Überschrift/Akzent/Hover/Beschreibung/Trennlinien-Farbe | Vollständige Farbkontrolle pro Panel. |
| Trennlinienstil | Durchgehend, gestrichelt oder gepunktet. |
| Animationsgeschwindigkeit | Dauer des Panel-Übergangs (0–800 ms). |
Vorlagen
Der Tab ✨ Vorlagen im Darstellungs-Panel lädt mit einem Klick ein vollständiges Spaltenlayout. Es gibt 20 Branchen-Templates:
SaaS, E-Commerce, Agentur, Restaurant, Reise, Gesundheitswesen, Immobilien, Anwaltskanzlei, Finanzen, Mode, Hotel, Non-Profit, Events, Automotive, Gaming, Fitness, Beauty & Wellness, Tech-Startup, Portfolio und Bildung.
Vorlagen befüllen sowohl den Spalteninhalt als auch eine passende Farbpalette — sie sehen sofort ansprechend aus.
Mobilverhalten
Auf Mobilgeräten öffnet das Antippen eines Mega-Menü-Elements ein dediziertes Vollbild-Panel mit einem ← Zurück-Button — was der Navigation einen App-artigen Charakter verleiht.
- Sichtbar auf Mobilgeräten — nutzt das oben beschriebene Push-Navigations-Panel.
- Ausgeblendet auf Mobilgeräten — das Mega-Panel wird auf kleinen Bildschirmen nicht gerendert.
Globale Einstellungen
| Einstellung | Beschreibung |
|---|---|
| Volle Breite | Elementspezifisches Kontrollkästchen, das das Panel über die gesamte Viewport-Breite ausdehnt. |
| Standard-Link/Überschrift/Akzent-Farben | Siteweite Farbstandards für Mega-Panel-Inhalte. |
Das „großzügige Hover"-Verhalten ist eingebaut — das Mega-Panel wartet auf die Maus, anstatt zu verschwinden, wenn der Nutzer sich diagonal zum Panel-Inhalt bewegt.