Erfolgreich
Einstellungen für Blocklayout
Steuern Sie, wie breit Inhalte in Desktop-, Tablet- und Mobile-Rasterlayouts angezeigt werden.
Verwenden Sie diese Einstellungsgruppe, um zu steuern, wie viel horizontalen Platz ein Inhaltselement innerhalb seines übergeordneten Rasters einnimmt. So können Sie eine stärkere visuelle Hierarchie schaffen, mehr Elemente in einer Zeile unterbringen oder hervorgehobenen Inhalten mehr Raum geben.
Spaltenumfang
Abschnitt betitelt „Spaltenumfang“Die wichtigste Entscheidung ist, wie viele Spalten der Inhalt auf jeder Gerätegröße umfassen soll. Größere Spannen lassen ein Element präsenter wirken und geben Text, Medien oder Aktionen mehr Raum. Kleinere Spannen eignen sich für kompakte unterstützende Inhalte und engere mehrspaltige Layouts.
Der Desktop-Spaltenumfang legt in der Regel die übergeordnete Layout-Absicht fest. Mit Tablet- und Mobile-Spannen können Sie diese Struktur lesbar halten, wenn der verfügbare Platz knapper wird, ohne dass jedes Gerät dieselbe Breite verwenden muss.
Einen umfassenderen Überblick darüber, wie diese Layouts funktionieren, finden Sie in der Shopify-Dokumentation zu Abschnitten und Blöcken
Verhalten auf Tablet und Mobile
Abschnitt betitelt „Verhalten auf Tablet und Mobile“Für Tablet kann entweder eine eigene Spanne verwendet werden oder die Desktop-Spanne übernommen werden. Dieser Fallback ist nützlich, wenn Ihr Desktop-Layout bereits gut skaliert und keine separate Tablet-Anpassung benötigt.
Mobile sollte zuerst im Hinblick auf die Lesbarkeit festgelegt werden. Wenn Text ungünstig umbricht, Schaltflächen beengt wirken oder Inhalte ungleichmäßig gestapelt werden, ist die Mobile-Spanne oft die erste Einstellung, die Sie überprüfen sollten.
Prüfen Sie Tablet und Mobile separat, auch wenn das Desktop-Layout korrekt aussieht. Eine Spanne, die auf einem großen Bildschirm ausgewogen wirkt, kann sich anders verhalten, wenn die verfügbare Breite kleiner wird.
Grenzen des übergeordneten Rasters
Abschnitt betitelt „Grenzen des übergeordneten Rasters“Diese Einstellungsgruppe funktioniert innerhalb der Spaltenstruktur des übergeordneten Layouts. Wenn die gewählte Spanne größer ist als die Anzahl der im übergeordneten Layout verfügbaren Spalten, wird der Inhalt über die gesamte Zeile gestreckt.
Dieses Verhalten ist für Flexibilität hilfreich, kann aber auch beeinflussen, wie Elemente umbrechen. Wenn etwas unerwartet in eine eigene Zeile rutscht, vergleichen Sie seine Spanne mit den verfügbaren Spalten des übergeordneten Layouts, bevor Sie Abstand oder Inhalt ändern.
Wenn die ausgewählte Spanne größer ist als die Spaltenanzahl des übergeordneten Layouts, nimmt der Inhalt die gesamte Zeile ein.
Verhalten bei Mobile-Diashows
Abschnitt betitelt „Verhalten bei Mobile-Diashows“Wenn das übergeordnete Layout auf Mobile als Diashow angezeigt wird, steuert die übliche Mobile-Spanne aus dieser Einstellungsgruppe die endgültige Mobile-Breite nicht auf die normale Weise. Stattdessen folgt das Verhalten des Mobile-Layouts der Mobile-Spalteneinstellung des übergeordneten Layouts.
Wenn die Phone-Layouts nicht Ihren Erwartungen entsprechen, prüfen Sie zuerst die Mobile-Layout-Einstellungen des übergeordneten Elements. Das ist besonders wichtig, wenn Sie eine schmalere oder breitere Mobile-Darstellung erwarten, stattdessen aber eine Diashow-basierte Größenanpassung sehen.
Wenn Sie Hilfe beim Auffinden dieser Einstellungen im Theme-Editor benötigen, sehen Sie sich die Shopify-Dokumentation zum Theme-Editor an.
Nutzungshinweise
Abschnitt betitelt „Nutzungshinweise“- Breite an der Wichtigkeit ausrichten. Geben Sie hervorgehobenen Inhalten eine größere Spanne und halten Sie unterstützende Elemente schmaler, um eine klarere visuelle Hierarchie zu schaffen.
- Zuerst die übergeordneten Spalten prüfen. Wenn ein Element immer wieder in eine eigene Zeile verschoben wird, ist seine Spanne möglicherweise größer als im übergeordneten Layout zulässig.
- Tablet-Überschreibungen gezielt einsetzen. Halten Sie Tablet an Desktop angeglichen, sofern Lesbarkeit oder Abstand nicht eindeutig eine separate Anpassung erfordern.
- Mobile-Klarheit priorisieren. Wählen Sie Mobile-Spannen, die gedrängten Text, ungleichmäßige Schaltflächen und ungünstige Umbrüche vermeiden.
- Jede Viewport-Größe testen. Prüfen Sie Desktop, Tablet und Mobile separat, da dieselbe Spanne je nach Größe unterschiedliche Ausrichtung oder Abstände erzeugen kann.
- Diashow-Layouts separat testen. Wenn die Mobile-Diashow aktiv ist, prüfen Sie vor der Fehlerbehebung beim Breitenverhalten die Mobile-Spalteneinstellung des übergeordneten Elements.