Erfolgreich
Hamburger-Menü
Zeigt eine mobile Menüschaltfläche und hilft dabei, Ihre Header-Navigation auf kleineren Bildschirmen leicht auffindbar zu halten.
Verwenden Sie diesen Block, um auf Mobilgeräten die Hamburger-Schaltfläche anzuzeigen, die Ihre Hauptnavigation öffnet. Wenn Kundinnen und Kunden auf kleineren Bildschirmen auf Ihr Hauptmenü zugreifen sollen, muss dieser Block enthalten sein. Einen umfassenderen Überblick darüber, wie Theme-Blöcke funktionieren, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken
Dieser Block ist nur für Mobilgeräte und wird benötigt, damit die Hauptnavigation auf Mobilgeräten funktioniert.
Ausrichtungseinstellungen
Abschnitt betitelt „Ausrichtungseinstellungen“Verwenden Sie diese Einstellungen, um die Position des Blocks innerhalb des ihm zugewiesenen Bereichs zu verfeinern. Sie sind besonders nützlich, wenn der Block durch Ihre Layout-Auswahl breiter gestreckt wird, statt seine natürliche Breite beizubehalten.
Wenn Änderungen an der Ausrichtung nur subtil wirken, liegt das meist daran, dass dem Block nicht viel zusätzlicher Platz zur Verfügung steht. Legen Sie zuerst das Layout fest und verwenden Sie dann die Ausrichtung, um die Endposition zu verfeinern.
Layout-Einstellungen
Abschnitt betitelt „Layout-Einstellungen“Verwenden Sie die mobile Layout-Einstellung, um auszuwählen, wo die Menüschaltfläche in der Zeile auf kleineren Bildschirmen sitzt. Eine Position links oder rechts wirkt meist am vertrautesten, während eine zentrierte Position in minimalistischeren Header-Designs gut funktionieren kann.
Ein Layout mit voller Breite gibt dem Block in der Zeile mehr Platz, wodurch die Ausrichtungskontrollen deutlicher hervortreten können. Verwenden Sie dies mit Bedacht, damit der Header mit Ihren anderen mobilen Elementen weiterhin ausgewogen wirkt.
Die Option zum Ausfüllen des verfügbaren Platzes betrifft nur den Zeilenabstand auf dem Desktop. Sie kann helfen, den Platz über die Zeile zu verteilen, wenn dieser Block neben anderen Header-Blöcken steht, blendet die Schaltfläche auf dem Desktop aber nicht ein.
Nutzungshinweise
Abschnitt betitelt „Nutzungshinweise“- Mobilen Zugriff verfügbar halten. Entfernen Sie diesen Block nur, wenn Sie bewusst keinen mobilen Zugriff auf die Hauptnavigation möchten.
- Eine vertraute Position wählen. Eine Position links oder rechts ist für Kundinnen und Kunden im Header meist am einfachsten schnell zu erkennen.
- Breite bewusst einsetzen. Layouts mit voller Breite können beim Abstand helfen, sie können einen schlichten Header aber auch überdimensioniert wirken lassen.
- Ausrichtung zuletzt anpassen. Layout-Entscheidungen haben die größte Wirkung, während die Ausrichtung am besten als abschließende Anpassung funktioniert.
- Beide Viewports prüfen. Prüfen Sie den Header nach Änderungen am Layout oder Abstand sowohl auf Mobilgeräten als auch auf dem Desktop, damit die Schaltfläche dort, wo sie erscheint, weiterhin klar wirkt.
- Benachbarte Aktionen lesbar halten. Wenn andere Header-Elemente dieselbe Zeile teilen, stellen Sie sicher, dass die Menüschaltfläche nicht mit ihnen um Aufmerksamkeit konkurriert.