Mega-Menü

Ein Standard-Dropdown zeigt eine dünne Liste von Links Ein Mega-Menü öffnet ein breites Panel, das einen ganzen Abschnitt Ihrer Seite auf einmal darstellt: gruppierte Link-Spalten, Bilder, Symbole, sogar einen Aufruf zum Handeln Die Mega-Menü Erweiterung in Master-Addons für Elementor Bringt eines dieser Panels an jedem WordPress-Menüpunkt an und entwirft das Panel selbst im normalen Elementor-Editor, sodass alles, was Sie auf einer Seite aufbauen können, in Ihrer Navigation gespeichert werden kann.

Hier das fertige Ergebnis der Demo: Hovering Products öffnet ein dreispaltiges Panel mit gruppierten Links und einem Featured Image.

Was die Mega Menu-Erweiterung bewirkt #

Sobald aktiviert, erhält jedes Element in Ihrem WordPress-Menü ein Mega-Menü-Konfigurations-Popup Aussehen → Menüs. Schalten Sie es für ein Element ein und das Dropdown dieses Elements wird zu einer Elementor-Vorlage Die Erweiterung verarbeitet:

• Pro-Item-Panels: Aktivieren Sie das Mega-Panel nur für die Elemente, die es benötigen; der Rest bleibt normale Links.
• Visuelles Panel-Design: Der Dropdown-Inhalt wird mit dem Elementor-Editor erstellt und verwendet alle Widgets, die Ihnen gefallen.
• Mega-Menübreite: Standard, volle Breite oder benutzerdefinierte Breite mit einem genauen Pixelwert.
• Auslöseeffekt: Öffnen Sie das Panel mit dem Mauszeiger oder auf Klick.
• Übergang: Wählen Sie aus, wie das Panel in der Demo animiert wird.
• Mobiles Menü: Entscheiden Sie, was Telefone erhalten, einschließlich der Anzeige des Builder-Inhalts im Umschaltmenü.
• Symbol und Abzeichen: Befestigen Sie ein Symbol oder ein Highlight-Abzeichen an der Etikette des Menüpunkts.

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv; die kostenlose Version reicht.
• Master-Addons für Elementor Installiert und aktiv Neu im Plugin? folgen Sie dem Installationsführung Zuerst.
• Ein bereits erstelltes WordPress-Menü unter Aussehen → Menüs„Sogar ein grober; Sie können es später verfeinern.

HINWEIS: Sie können den Hintergrund Ihres Mega-Menüs über die Option Seitenstil steuern Achten Sie darauf, die Hintergrundfarbe, das Bild oder was auch immer Sie bevorzugen in die Option Seitenstil einzugeben Standardmäßig wird ein weißer Hintergrund eingestellt Aber Sie können die Anpassung Ihres Hintergrunds über diese Einstellung machen Schauen Sie mal nach (a-d-I-n

Schritt 1: Aktivieren Sie die Mega Menu-Erweiterung #

Gehen Sie von Ihrem WordPress-Dashboard aus zu Master Addons Und öffnen Sie die Erweiterungen Tab. Mega-Menü sitzt im Widgets anzeigen Gruppe. Klicken Sie auf den Umschalter, damit er violett wird, und schlagen Sie dann Änderungen speichern Und warten auf den grünen Hinweis “Einstellungen erfolgreich gespeichert” Master Addons wird standardmäßig mit allem aus ausgeliefert, sodass Ihre Seite nur das lädt, was Sie tatsächlich verwenden Wenn die neue Option nicht sofort im Admin angezeigt wird, aktualisieren Sie die Seite (Cmd/Strg + Shift + R) hart; Caching-Plugins halten sich tendenziell eine Minute lang am alten Admin-Menü fest.

Schritt 2: Schalten Sie das Mega-Menü für Ihr Menü ein #

Offen Aussehen → Menüs. Ein neues Master Addons Mega-Menü Box über der Menüpunktliste erscheint Umschalten Mega-Menü aktivieren An und warten auf die grüne “Mega Menu Saved” - Bestätigung. Jeder Artikel in der Menüstruktur trägt nun ein Lila Meister Mega Abzeichen, das heißt, es kann ein Panel beherbergen.

Schritt 3: Aktivieren Sie das Panel eines Menüpunkts #

Bewegen Sie den Mauszeiger auf ein Element der obersten Ebene, typischerweise etwas Breites wie Produkte oder Dienstleistungen, und öffnen Sie dessen Mega-Menüeinstellungen. In den Popups Inhalt Tabulator, Flip Megamenu-fähig zu JA. Die Megamenu-Inhalte bearbeiten Button erscheint; er öffnet den Elementor-Editor für das Panel dieses Artikels Treffer Speichern Im Popup, wenn Sie fertig sind.

Aktivieren Sie das Panel nur für Elemente, die den Platz wirklich benötigen. Ein Mega-Menü auf einem einzigen Kontaktlink macht es den Besuchern schwerer, für ein Ziel zu arbeiten.

Schritt 4: Entwerfen Sie das Panel in Elementor #

Klicken Sie auf Megamenu-Inhalte bearbeiten Und der bekannte Elementor-Editor öffnet sich mit dem Panel als Leinwand Die Demo baut drei Spalten: zwei Gruppen von Links unter Überschriften aufnehmen und analysieren, dazu eine Bildspalte, damit das Panel keine Textwand ist Veröffentlichen Sie die Vorlage, wenn das Layout fertig ist; eine Entwurfsvorlage wird nicht im Live-Menü gerendert, was die Leute mehr als alles andere auf die Probe stellt.

Gruppieren Sie Links danach, wie Kunden denken, und nicht nach Ihrem Organigramm, und begrenzen Sie jede Spalte auf fünf bis sieben Links; Darüber hinaus bricht das Scannen zusammen. Geben Sie einer Spalte einen Job jenseits von Links, z. B. einem vorgestellten Produkt oder einem Aufruf zum Handeln. Und halten Sie die Bilder komprimiert, denn das Panel lädt auf jede Seite der Seite, nicht nur auf eine.

Schritt 5: Breite, Auslöser und Übergang festlegen #

Zurück im Item-Popup, dem Einstellungen Tab steuert, wie sich das Panel verhält:

• Mega-Menübreite: Standardmäßig passt es zum Menü, volle Breite dehnt sich von Kante zu Kante, benutzerdefinierte Breite nimmt einen genauen Pixelwert wie 800 px an.
• Mobiles Menü: Was Telefone empfangen; Builder-Inhalte zeigen das gleiche gestaltete Panel im mobilen Kippmenü.
• Auslöseeffekt: Der Mauszeiger öffnet das Bedienfeld mit der Maus; Wechseln Sie zu klicken, wenn Sie bewusste Öffnungen bevorzugen.
• Übergang: Die Eingangsanimation, Fade in der Demo.
• Menü-Etikett anzeigen / Beschreibung anzeigen: Optionales Etikett und Beschreibungstext auf dem Artikel.

Die Symbol und Abzeichen Registerkarten im selben Popup befestigen ein Symbol oder ein Hervorhebungsabzeichen, das zum Markieren eines Neu- oder Verkaufseintrags nützlich ist.

Schritt 6: Legen Sie das Menü in Ihre Kopfzeile #

Wenn Ihr Theme bereits das WordPress-Menü rendert, funktioniert das Mega-Menü sofort. Für die vollständige Header-Steuerung erstellen Sie eines mit dem kostenlosen Master Addons Theme Builder: Erstellen Sie eine Header-Vorlage, geben Sie sie ein Nav-Menü-Widget, und wählen Sie das Menü, das Ihre Mega-Panels trägt Der Abschnitt Allgemein des Widgets behandelt Layout, Ausrichtung und den Haltepunkt, an dem das Menü zusammenbricht.

Überprüfen Sie die mobile Ansicht #

Schalten Sie den Elementor-Editor vor der Veröffentlichung auf mobile Vorschau Das Menü bricht hinter einem Hamburger-Kipphebel zusammen und die Links stapeln sich vertikal Überprüfen Sie hier die tatsächliche Höhe des Panels; ein vierspaltiges Panel, das scharf auf 1440 px aussieht, kann sich in eine endlose Schriftrolle auf einem Telefon verwandeln Wenn es lang läuft, verstecken Sie die dekorativen Bilder mit den responsiven Sichtbarkeitskontrollen von Elementor und behalten Sie die Links. Testen Sie dann auf einem tatsächlichen Telefon, da die Vorschau dem Touch-Verhalten nahekommt, es aber nicht wiedergibt.

Das Ergebnis auf der Seite #

Bei ausgewählter Vollbreite überspannt das veröffentlichte Panel die gesamte Ansichtsfensterkante bis -kante; die Boxversion oben auf dieser Seite zeigt die Standardbreite zum Vergleich an In jedem Fall öffnet das Bewegen des Elements die entworfene Vorlage mit dem von Ihnen gewählten Übergang.

Wo ein Mega-Menü gut funktioniert #

• Geschäfte. Produktkategorien, Bestseller und ein Werbebild in einem Panel unter Shop.
• Agenturen und Dienstleistungsunternehmen. Dienstleistungen gruppiert nach Ergebnis mit einer vorgestellten Fallstudie.
• Verlage und Blogs. Themennaben mit dem neuesten Pfosten, der in das Panel gezogen wird.
• SaaS-Seiten. Funktionen, Lösungen und Ressourcen werden nebeneinander statt verschachtelter Dropdowns organisiert.
• Universitäten und Organisationen. Abteilungen und schnelle Links, die sonst drei Ebenen tief vergraben würden.

Fehlerbehebung #

• Mega-Menü erscheint nicht. Bestätigen Sie, dass der Erweiterungs-Toggle eingeschaltet ist, der Menüpunkt Megamenu-aktiviert auf JA gesetzt hat und die Panel-Vorlage veröffentlicht und nicht als Entwurf gespeichert wird. Dann löschen Sie Ihren Cache.
• Panel erscheint, ist aber ungestylt. Normalerweise ein zwischengespeichertes Stylesheet. Säubern Sie Ihren Seitencache und ein beliebiges CDN und laden Sie es dann hart nach.
• Panel abgeschnitten oder versteckt wird. Ein übergeordneter Container hat einen Überlauf versteckt oder einen niedrigen z-Index Erhöhen Sie den z-Index des Headers und überprüfen Sie die Überlaufeinstellung des Header-Containers.
• Funktioniert auf dem Desktop, defekt auf dem Handy. Fast immer der Kippbereich Überprüfen Sie die mobilen Einstellungen des Nav Menu-Widgets und bestätigen Sie, dass nichts über dem Tippziel liegt.

Häufig gestellte Fragen #

Einwickelnd #

Die Mega-Menü-Erweiterung verwandelt ein einfaches WordPress-Menü in eine gestaltete Navigation mit drei Schritten: Schalten Sie die Erweiterung ein, aktivieren Sie das Panel für ein Element und erstellen Sie den Dropdown in Elementor. Breite, Trigger, Übergang, Symbole und Abzeichen werden alle aus dem Element-Popup gesetzt und mit dem kostenlosen kombiniert Themenbauer und Nav-Menü-Widget Gibt Ihnen einen kompletten benutzerdefinierten Header ohne Elementor Pro. Der vollständige Satz von Master Addons Widgets und Erweiterungen Seite entfernt ist.