Inhaltsverzeichnis
Sie können ein vollständiges Mega-Menü in Elementor erstellen, ohne Elementor Pro zu kaufen. Ein Mega-Menü ist ein breites, mehrspaltiges Dropdown-Menü, das einen ganzen Abschnitt Ihrer Website auf einmal anzeigt: Links, Bilder, Symbole, sogar ein Kontaktformular, anstelle einer dünnen vertikalen Liste Die kostenlose Version von Elementor verfügt über kein Mega-Menü-Widget, sondern über das kostenlose Master Addons Mega-Menü Fügt eins hinzu und Sie entwerfen jedes Panel mit dem normalen Elementor-Editor.
Diese Anleitung deckt den gesamten Build ab: Aktivieren der Erweiterung, Anbringen eines Mega-Menüs an einem Menüpunkt, Entwerfen des Dropdown-Panels und Richtigmachen auf dem Handy, der Schritt, den die meisten Tutorials überspringen.
Benötigen Sie Elementor Pro für ein Mega-Menü?
Nein. Es gibt drei Routen zu einem Mega-Menü in Elementor, und nur eine davon kostet Geld:
| Route | Kosten | Abwägung |
|---|---|---|
| Elementor Pro Mega Menü Widget | Bezahlte Jahreslizenz | Benötigt Pro auf jeder Seite, die Sie bauen |
| Benutzerdefiniertes CSS-/handcodiertes Menü | Kostenlos | Zerbrechlich, später schwer zu bearbeiten, keine visuelle Bearbeitung |
| Master Addons Mega-Menü | Kostenlos | Fügt ein Plugin hinzu; Panels, die visuell in Elementor erstellt wurden |
Wenn ein Mega-Menü der einzige Grund ist, warum Sie im Begriff waren, ein Upgrade durchzuführen, erledigt die kostenlose Route die gleiche Aufgabe Master Addons läuft neben Elementor Pro auch ohne Konflikte, so dass eine bestehende Pro-Lizenz nicht verschwendet wird Elementor Einen eigenen Pro Mega Menü Workflow hier dokumentiert Wenn Sie die beiden Ansätze nebeneinander vergleichen möchten; Es erfordert das Einschalten mehrerer experimenteller Funktionen, bevor Sie beginnen können.
Was Sie brauchen, bevor Sie beginnen
- Elementor (kostenlose Version ist in Ordnung) installiert und aktiv
- Master-Addons für Elementor Installiert und aktiv
- Ein bereits erstelltes WordPress-Menü unter Aussehen → Menüs (auch ein grober, den kann man später bearbeiten)
Schritt 1: Aktivieren Sie die Mega-Menü-Erweiterung
Gehe zu Master-Addons → Add-ons & Erweiterungen Finden Sie in Ihrem WordPress-Dashboard Mega-Menü In der Erweiterungsliste, und schalten Sie es um Speichern.
Master Addons wird standardmäßig mit allem ausgeschalteten ausgeliefert, sodass Sie nur das laden, was Sie verwenden. Deshalb gibt es diesen Schritt überhaupt. Wenn Sie die Option nicht sofort sehen, aktualisieren Sie die Admin-Seite (Cmd/Strg + Shift + R) hart; Caching-Plugins halten eine Minute lang am alten Admin-Menü fest.
Schritt 2: Drehen Sie ein Menüelement in ein Mega-Menü
Offen Aussehen → Menüs und erweitern Sie den Top-Level-Artikel, von dem Sie möchten, dass das Mega-Panel abfällt, typischerweise etwas Breites wie “Produkte”, “Dienste” oder “Shop”.
- Kreuzen Sie die Mega-Menü aktivieren Option auf diesen Menüpunkt.
- Wählen Sie die Panelbreite. Die gesamte Breite erstreckt sich von Kante zu Kante und die Containerbreite richtet sich nach Ihrem Inhalt.
- Speichern Sie das Menü.
Aktivieren Sie es nur auf Elementen, die den Platz wirklich benötigen Ein Mega-Menü auf einem einzigen “Kontakt” - Link ist schlechter als ein einfacher Link: Es macht die Leute härter für ein Ziel arbeiten.
Schritt 3: Entwerfen Sie das Dropdown-Panel in Elementor
Der Panel-Inhalt ist eine Elementor-Vorlage, was diesen Ansatz flexibel macht: Alles, was Sie auf einer Seite aufbauen können, können Sie in das Menü einfügen.
- Klicken Sie auf Bearbeiten Sie den Inhalt des Mega-Menüs Auf dem Menüpunkt zum Öffnen des Elementor-Editors.
- Bauen Sie ein mehrspaltiges Layout auf Drei oder vier Spalten passen zu den meisten Navigations.
- Füllen Sie die Spalten: Überschriften-Widgets als Kategorienbeschriftungen, Symbollisten als Linkgruppen, ein oder zwei Bilder zur visuellen Verankerung.
- Veröffentlichen Sie die Vorlage.
Ein paar Dinge, die Mega-Menüs funktionieren lassen, anstatt nur beschäftigt auszusehen:
- Gruppieren Sie nach der Denkweise der Kunden, nicht nach Ihrem Organigramm. Spaltenüberschriften sollten mit den Wörtern übereinstimmen, die Besucher verwenden.
- Decken Sie es auf etwa fünf bis sieben Links pro Spalte. Danach bricht das Scannen zusammen und das Menü wird zur Wand.
- Geben Sie einer Spalte einen Job. Ein vorgestelltes Produkt, eine Promo oder ein Aufruf zum Handeln Verdient sich seinen Platz mehr als eine vierte Linkliste.
- Bilder leicht halten. Menübilder werden auf jeder Seite geladen Komprimieren Sie sie und servieren Sie WebP: Ein schweres Mega-Menü zieht die ganze Website Belastungszeit„Nicht nur eine Seite.
Schritt 4: Fügen Sie das Menü zu Ihrer Kopfzeile hinzu
Wenn Ihr Theme das WordPress-Menü bereits in seinem Header rendert, funktioniert das Mega-Menü sofort. Es ist kein weiterer Schritt erforderlich.
Für die volle Kontrolle über den Header selbst, bauen Sie einen mit dem freien Master Addons Theme Builder: Header-Vorlage erstellen, in der Nav-Menü-Widget, wählen Sie das Menü mit Ihrem Mega-Menü, und stellen Sie die Anzeigebedingung auf Ihre gesamte Website Diese Kopplung, kostenloser Theme-Builder plus kostenloses Mega-Menü, ersetzt die beiden Funktionen, für die Menschen Pro am häufigsten kaufen.
Schritt 5: Beheben Sie das mobile Erlebnis
Hier zerfallen die meisten Mega-Menüs Ein vierspaltiges Panel, das auf einem 1440 px großen Bildschirm scharf aussieht, wird zu einer endlosen Schriftrolle auf einem Telefon.
- Wechseln Sie zur mobilen Ansicht in Elementor und überprüfen Sie die tatsächliche Höhe des Panels. Wenn es an zwei Bildschirmen vorbeiläuft, schneiden Sie Inhalte für Mobilgeräte aus.
- Verstecken Sie dekorative Bilder auf Mobilgeräten mithilfe der responsiven Sichtbarkeitskontrollen von Elementor; Behalten Sie die Links bei und lassen Sie das Ornament fallen.
- Stapeln Sie die Spalten vertikal und bestätigen Sie, dass die Tippziele bequem groß sind.
- Testen Sie auf einem echten Telefon, nicht nur in der Editorvorschau. Die Vorschau nähert sich an; es gibt kein Berührungsverhalten wieder.
Wenn Ihre Haltepunkte nicht mit Ihrem Design übereinstimmen, ist die kostenlose Benutzerdefinierte Haltepunkteerweiterung Lassen Sie sich Ihre eigenen einstellen Das ist nützlich, wenn der Standard-Tablet-Breakpoint Ihr Menü mit einer ungünstigen Breite schneidet.
Fehlerbehebung
- Mega-Menü erscheint nicht. Bestätigen Sie, dass die Erweiterung umgeschaltet ist, der Menüpunkt Mega-Menü aktivieren angekreuzt hat und die Panel-Vorlage veröffentlicht und nicht als Entwurf hinterlassen 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 wird abgeschnitten oder hinter Inhalten versteckt. Ein Elterncontainer hat
overflow: hiddenoder einen niedrigen z-Index. den z-Index des Headers anheben und die Überlaufeinstellung des Header-Containers überprüfen. - Funktioniert auf dem Desktop, defekt auf dem Handy. Fast immer der Kipp-/Hamburger-Bereich Überprüfen Sie die mobilen Einstellungen des Menü-Widgets und bestätigen Sie, dass nichts über dem Tippziel liegt.
Häufig gestellte Fragen
Wie erstelle ich ein Mega-Menü in Elementor ohne Pro?
Installieren Sie das kostenlose Plugin Master Addons for Elementor, aktivieren Sie die Mega Menu-Erweiterung unter Master Addons > Addons & Erweiterungen, öffnen Sie dann Erscheinungsbild > Menüs und kreuzen Sie Mega Menu aktivieren auf dem gewünschten Element an Klicken Sie auf Mega Menu Content bearbeiten, um das Dropdown-Panel im normalen Elementor-Editor zu entwerfen und zu veröffentlichen.
Wie kann ich ein Menü in Elementor kostenlos erstellen?
Mit der kostenlosen Version von Elementor können Sie ein Standard-WordPress-Menü über Aussehen > Menüs erstellen und es mit dem kostenlosen Nav-Menü-Widget anzeigen. Für einen Mega-Style-Dropdown enthält Free Elementor allein dieses Widget nicht, sodass Sie eine kostenlose Erweiterung wie Master Addons Mega Menu benötigen, um mehrspaltige Panels hinzuzufügen.
Wie kann ich ein Mega-Menü in WordPress erstellen, ohne Plugins zu verwenden?
Sie können einen Dropdown mit benutzerdefiniertem CSS und HTML von Hand codieren, aber er ist fragil Er bricht bei Theme-Updates, braucht für jede Änderung einen Entwickler und gibt Ihnen keine visuelle Bearbeitung Die meisten Websitebesitzer erhalten stattdessen ein schnelleres, wartbareres Ergebnis von einem kostenlosen Plugin wie Master Addons.
Ist das Max Mega-Menü kostenlos?
Max Mega Menu hat eine kostenlose Version im WordPress-Plugin-Repository, plus ein kostenpflichtiges Pro-Add-on für zusätzliche Styling-Optionen, und es funktioniert unabhängig von Ihrem Seitenersteller Master Addons Mega Menu ist speziell für Elementor erstellt, so dass Panels mit dem gleichen Drag and Drop-Editor entworfen werden, den Sie bereits für Seiten verwenden.
Was ist das beste Mega-Menü-Plugin für Elementor?
Es kommt darauf an, was Sie bereits ausführen Wenn Sie Elementor verwenden und Panels visuell gestaltet haben möchten, ohne eine neue Oberfläche zu lernen, ist Master Addons Mega Menu eine solide kostenlose Option Wenn Sie erweiterte Multilevel-Menüs mit dynamischen Bedingungen benötigen, kann ein kostenpflichtiges Tool die Kosten für eigene Inhalte testen, bevor Sie sich auf eines festlegen.
Wie mache ich ein Elementor-Mega-Menü mobil responsive?
Wechseln Sie zur mobilen Ansicht von Elementor und überprüfen Sie die tatsächliche Höhe des Panels Stapeln Sie Spalten vertikal, verstecken Sie dekorative Bilder mit den responsiven Sichtbarkeitskontrollen, halten Sie das Tippen auf Ziele groß und testen Sie auf einem tatsächlichen Telefon statt auf der Editorvorschau Wenn Standard-Breakpoints das Menü umständlich schneiden, legen Sie Ihr eigenes mit der Erweiterung Benutzerdefinierte Haltepunkte fest.
Warum wird mein Elementor-Megamenü nicht angezeigt?
Überprüfen Sie vier Dinge der Reihe nach: Die Erweiterung Mega Menu ist aktiviert, der Menüpunkt hat Mega Menu aktivieren angekreuzt, die Panelvorlage wird veröffentlicht, anstatt als Entwurf gespeichert zu werden, und Ihr Cache wird gelöscht Wenn das Panel erscheint, aber geclippt wird, wird es vom Überlauf eines übergeordneten Containers: versteckt oder ein niedriger Z-Index versteckt.
Verwandte Lektüre
