Wie benutzt man?
Mega Menu ist einer der beliebtesten und effektivsten Menütypen, insbesondere auf Desktop. Benutzer erwarten natürlich, ein Mega Menu direkt unter dem Website-Header zu finden. Das Standardmenü von Shopify ist jedoch normalerweise einfach, hat eine schwache Struktur und bietet wenig bis gar keine Bildunterstützung. Deshalb sollten Sie das Navi+ Mega Menu verwenden.
Hauptvorteile:
- Ersetzt vollständig das einfache Standard-Mega-Menü von Shopify
- Bietet mehrere Präsentationsstile mit Bildern, Raster und mehrstufigen Layouts für ein reichhaltiges, professionelles Erlebnis
- Funktioniert nahtlos sowohl auf Mobilgeräten als auch auf Desktop für ein konsistentes Erlebnis
FAQ:
1. Ich habe mich noch nicht entschieden, ob ich die kostenlose oder die kostenpflichtige Version verwenden soll. Kann ich die professionellen Menüvorlagen ausprobieren?
Absolut! Die Menügruppen sollen hauptsächlich Anfängern helfen, sich nicht von den erweiterten Funktionen in Navi+ überwältigt zu fühlen 😄. Der beste Weg ist, die professionellen Menüs auszuprobieren, um alle Funktionen und Layout-Optionen zu erkunden. Später können Sie einfach jedes Menü löschen, das Sie nicht benötigen oder als ungeeignet empfinden.
2. Wird das Erstellen eines Menüs hier dazu führen, dass es sofort auf meiner Website angezeigt wird?
Noch nicht. Sie müssen das richtige Menü veröffentlichen, damit es auf Ihrer Website erscheint. Keine Sorge — es ist einfach!
3. Was ist, wenn ich die falsche Vorlage wähle oder einen Fehler mache?
Kein Problem. Sie können es jederzeit löschen und ein neues erstellen. Wenn Sie ein Menü testen und eine andere Vorlage ausprobieren möchten, können Sie das aktuelle als Backup-Datei speichern und später wieder öffnen. Sie können sogar Teile zwischen Menüs kopieren und einfügen (indem Sie zwei Browser-Tabs öffnen), um Ihre vorherige Arbeit zu behalten. Fühlen Sie sich frei, zu experimentieren!
4. Sollte ich nur ein Menü oder mehrere erstellen?
Sie sollten mehrere Menüs erstellen. Nur das aktive Menü wird auf Ihrer Seite angezeigt, aber Sie können viele Versionen vorbereiten — indem Sie verschiedene Vorlagen auswählen oder Menüs klonen. Menüs können so konfiguriert werden, dass sie je nach Seitentyp (Startseite, Produkt, Sammlung...), Gerät (mobil oder Desktop) oder URL-Schlüsselwörtern angezeigt oder ausgeblendet werden. Also legen Sie los und erstellen Sie Menüs, die zu jeder Situation passen!
Schritt 1: Bearbeiten Sie den Menübaum
1.1. Verständnis des Menübaums
Der Menübaum ist der wichtigste Teil jedes Menüs — er definiert die Struktur.
Hier ist ein Beispiel für einen Menübaum eines vollständigen Desktop-Mega-Menüs:
[+] Menü
[+] Kategorien
[+] Alphabete
Skateboarding
- Komponenten (Gruppenname)
- Tische
- Trucks
- Mehr (Blauer Link zu Details..)
- Komplett
- Hüte (Gruppenname)
- Burton Lunchlap Earflap Hat
- Volcom Ramp Stone Adjustable Hat
- ...
[+] Zubehör
[+] Blogs
[+] Unterstützung
[+] Mehr
Dies ist ein 3-stufiger Menübaum. Stufe 1 umfasst Menü, Kategorien, Alphabete, Skateboarding… und Mehr...
Skateboarding hat 5 Stufen-2 Untermenüs: Komponenten, Tische, Komplett (besteht aus einigen Stufen-3 Menüuntermenüs: Hüte, Burton Lunchlap Earflap Hat…)
Sie werden die meiste Zeit damit verbringen, diesen Menübaum für Ihre Website zu erstellen, um den Kunden zu helfen, die Inhalte zu finden, nach denen sie suchen.
1.2. Grundlegende Interaktionen mit dem Menübaum
Sie können Menüelemente nach oben und unten oder nach links und rechts ziehen und ablegen, um ihre Position und die Eltern-Kind-Beziehungen im Menübaum zu ändern.
Wenn Sie mit der Maus über ein Menüelement fahren, sehen Sie zusätzliche Optionen: die Details des Elements bearbeiten, es aus dem Menübaum löschen oder es an anderer Stelle kopieren und einfügen.
Tipp: Sie können ein Menüelement von einem Menü in ein anderes kopieren, indem Sie die Navi+ App in zwei Browser-Tabs öffnen.
1.3. WICHTIG! Löschen Sie die Beispielmenüelemente und behalten Sie nur die Struktur, die Sie möchten.
Dies ist eine häufige Situation beim Erstellen eines Menüs mit Navi+. Wenn Sie ein neues Menü erstellen, fügen wir ein vollständiges Beispiel mit beliebten Menüelementen hinzu, um Layout-Ideen zu zeigen und Ihnen zu ermöglichen, nach Bedarf zu kopieren/einzufügen. Wenn Sie jedoch neu bei Navi+ sind und den Starter-Plan verwenden, sehen Sie viele rote (i) Warnungen für Funktionen, die nicht verfügbar sind, wie das Hochladen von Bildern oder die Verwendung erweiterter Interaktionen.
Wenn Sie diese erweiterten Funktionen mögen, sollten Sie ein Upgrade auf einen Business- oder Elite-Plan in Betracht ziehen. Wenn Sie jedoch mit dem Starter-Plan fortfahren möchten, suchen und löschen Sie bitte die Menüelemente mit roten (i) Warnungen.
Wichtiger Tipp: Wenn die Bestätigung zum Löschen erscheint, aktivieren Sie „Nächstes Mal nicht mehr fragen“, um schneller zu löschen.
1.4. Menüelemente zum Menübaum hinzufügen
Um ein Menüelement hinzuzufügen, haben Sie zwei Optionen:
Option 1 **(Nicht empfohlen, wenn Sie neu bei Navi+ sind)**: Klicken Sie auf „Menü hinzufügen“, um ein leeres Menüelement am Ende des Menübaums einzufügen. Diese Methode erfordert ein gutes Verständnis der Einstellungen für Menüelemente, die wir weiter unten behandeln werden. Es kann anfangs überwältigend erscheinen, also können Sie dies später erkunden.
Option 2 (Empfohlen): Wir haben bereits viele gut gestaltete Vorlagen für Menüelemente für Sie vorbereitet. Kopieren Sie sie einfach und fügen Sie sie an die richtige Stelle ein. Nachdem Sie Ihren Menübaum fertiggestellt haben, löschen Sie einfach die ungenutzten Vorlagen.
1.5. WICHTIG! Das Attribut „Ist Mehrspalten-Menüelement“ (nur verfügbar für Desktop und für Mega-Menüs).
Dies ist eine hochspezialisierte Funktion, die speziell für Desktop-Mega-Menüs entwickelt wurde. Sie wird verwendet, wenn Sie ein Vollbild-Menüelement mit mehreren Spalten benötigen. Jede Spalte kann mit benutzerdefinierten Breiten konfiguriert werden (z. B. 3/12, 4/12, 6/12…). Das Mehrspalten-Menüelement ist äußerst leistungsfähig und flexibel für den Aufbau komplexer Menülayouts, die auf Ihre Bedürfnisse zugeschnitten sind.
Wenn Sie keine komplexen Layouts wie Mehrspalten-Menüelemente benötigen — oder planen, sie später zu verwenden — können Sie sie sicher aus Ihren Level-1-Menüelementen löschen.
Siehe detaillierte Anweisungen zur Verwendung des Attributs „Ist Mehrspalten-Menüelement“.
Wenn ein Level-1-Menüelement auf „Ist Mehrspalten-Menüelement“ gesetzt ist, wird es im Menübaum hellgelb hervorgehoben, und seine Level-2-Menüelemente werden automatisch in Spalten (mit einem roten Symbol) umgewandelt, unabhängig von anderen Attributen, die Sie zuweisen.
Für diese Spalten-Level-2-Menüelemente ist das einzige verwendbare Attribut Breitenlayout. Alle Untermenüelemente unter dieser Spalte werden dann innerhalb einer einzigen Spalte angeordnet.
Finden Sie diesen Typ von Menü schwierig zu verwenden? Sie haben recht! Aber die Ergebnisse, die Sie mit diesem Attribut erzielen, sind wirklich WOW.
Wenn Sie das Attribut „Ist Mehrspalten-Menü“ von dem Level-1-Menüelement entfernen, wird alles in den ursprünglichen Zustand zurückversetzt.
Warum benötigen Sie das Attribut „Dropdown-Breite bei Erweiterung“?
Standardmäßig, wenn Sie das Attribut „Ist Mehrspalten-Menüelement“ verwenden, wird das Untermenü (Dropdown) auf die volle Bildschirmbreite (oder basierend auf der Containergröße, normalerweise 1280, 1366, 1440 oder 100% — konfigurierbar im Erweitert-Tab) erweitert. Allerdings haben Sie mit einem so großen Bereich möglicherweise nicht immer genügend Inhalte oder Ideen, um den Raum zu füllen.
In diesem Fall können Sie die Breite des Untermenüs (einzeln für jedes Mehrspalten-Menüelement) begrenzen, um ein leeres oder unausgewogenes Aussehen zu vermeiden.
Beispiel: Sie können ein Menü mit einer Breite von 700px und zwei Spalten mit jeweils 6/12 erstellen. Auf diese Weise erhalten Sie immer noch ein geräumiges Layout, ohne zu viel Bildschirmfläche zu verschwenden.