Erfolgreich
Navigation-Layout-Einstellungen
Steuern Sie die Ausrichtung und den Abstand der Navigation in Desktop- und Mobil-Header-Layouts.
Verwenden Sie diese Einstellungsgruppe, um festzulegen, wo die Navigation im Header auf Desktop und Mobilgeräten angezeigt wird. Sie können die Navigation in der Hauptzeile belassen oder ihr eine separate vollbreite Zeile geben, wenn das Menü mehr Platz benötigt.
Für einen umfassenderen Überblick über die Benutzeroberfläche siehe Shopify-Dokumentation zum Theme-Editor
Layout-Einstellungen
Abschnitt betitelt „Layout-Einstellungen“Das Layout auf Desktop und Mobilgeräten wird separat gesteuert, sodass Sie auf einer Bildschirmgröße eine kompakte Anordnung und auf der anderen eine großzügigere wählen können. Links, zentriert und rechts positionieren die Navigation in der Haupt-Headerzeile. Vollbreite verschiebt sie unter diese Zeile in eine eigene Zeile.
Diese Wahl beeinflusst sowohl die Sichtbarkeit als auch die Ausgewogenheit. Wenn die Navigation in der Hauptzeile bleibt, wirkt der Header kompakter, während eine vollbreite Zeile den Menüelementen mehr Platz gibt und die Navigation präsenter erscheinen lässt.
Weitere Details dazu, wie sich Ausrichtung und Gruppierung verhalten, finden Sie in navigation layout settings.
Vollbreite ändert nicht nur die Ausrichtung. Sie platziert die Navigation in einer separaten Zeile unter der Haupt-Headerzeile.
Platzierung auf Desktop und Mobilgeräten
Abschnitt betitelt „Platzierung auf Desktop und Mobilgeräten“Auf Desktop können Links und Rechts gut funktionieren, wenn die Navigation neben Branding, Suche oder Aktionssymbolen stehen soll. Zentriert ist oft die beste Wahl, wenn die Navigation als visueller Fokus des Headers wirken soll.
Priorisieren Sie auf Mobilgeräten Klarheit statt Symmetrie. Wenn der Header überladen wirkt, kann das Verschieben der Navigation in eine vollbreite Zeile das Layout leichter erfassbar machen und die Konkurrenz mit anderen Header-Elementen verringern.
Verfügbaren Platz ausfüllen
Abschnitt betitelt „Verfügbaren Platz ausfüllen“Verfügbaren Platz ausfüllen dehnt den Navigationsbereich, damit der verbleibende Raum in der Desktop-Zeile genutzt wird. Das kann dazu beitragen, den Header ausgewogener wirken zu lassen, wenn die Navigation neben kleineren Elementen steht und sonst leerer Platz bleiben würde.
Diese Option ist vor allem dann nützlich, wenn die Navigation in der Hauptzeile bleibt. Wenn Ihre Menübezeichnungen lang sind oder der Header bereits dicht wirkt, testen Sie sorgfältig, damit die zusätzliche Breite die Ausgewogenheit verbessert, ohne den Abstand unpassend wirken zu lassen.
Nutzungshinweise
Abschnitt betitelt „Nutzungshinweise“- Passen Sie das Layout an die Menülänge an. Verwenden Sie Vollbreite, wenn die Navigation der obersten Ebene mehr horizontalen Platz benötigt.
- Passen Sie jede Bildschirmgröße separat an. Wählen Sie für Desktop und Mobilgeräte das klarste Layout, statt auf beiden dieselbe Platzierung zu erzwingen.
- Verwenden Sie Vollbreite, um Enge zu reduzieren. Wenn Navigation, Branding und Dienstprogrammelemente um eine Zeile konkurrieren, sorgt das Verschieben der Navigation nach unten meist für einen klareren Header.
- Erweitern Sie den Platz mit Absicht. Aktivieren Sie Verfügbaren Platz ausfüllen, wenn in der Desktop-Zeile Platz übrig bleibt und die Navigation das Layout visuell verankern soll.
- Überprüfen Sie die gesamte Header-Ausgewogenheit. Prüfen Sie nach der Änderung der Ausrichtung, ob die Navigation neben den anderen Header-Elementen weiterhin gewollt wirkt.
- Prüfen Sie beide Viewports. Ein Layout, das auf Desktop ausgewogen wirkt, kann den Header auf Mobilgeräten überladen, daher sollten Sie beide Größen vor der Veröffentlichung überprüfen.