Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Wie Blöcke auf Mobilgeräten gestapelt werden

Um deine Website gut lesbar zu gestalten und zu verhindern, dass Besucher die Anzeige verkleinern, vergrößern oder auf deiner Seite scrollen müssen, um deinen Inhalt zu sehen, stapelt Squarespace Blöcke mittels Responsive Design auf Mobilgeräten automatisch vertikal.

Wenn Blöcke nicht so gestapelt werden, wie du es möchtest, kannst du Blöcke mithilfe der Szenarien in dieser Anleitung und diesem Video verschieben. Das Experimentieren und eine Vorschau deiner Website ist der beste Weg, um dein Layout zu verfeinern, bis du ein Design findest, das dir gefällt und auf allen Geräten gut aussieht. 

Video ansehen

Das Video zeigt eine Website der Version 7.0 an, aber das Verhalten von Blöcken und Spalten sind auf Version 7.1-Websites identisch. 

Spalten-Layouts in der mobilen Ansicht

Wenn Blöcke vertikal gestapelt werden und die volle Breite einer Seite einnehmen (ohne Blöcke auf beiden Seiten), werden sie auch vertikal auf Mobilgeräten gestapelt, wobei das Desktop-Layout der Seite beibehalten wird. 

Durch das Hinzufügen von Blöcken links oder rechts von anderen Blöcken werden Spalten erstellt. Wenn eine Seite Spalten enthält, verschiebt Squarespace die zweite, dritte sowie zusätzliche Spalten auf Mobilgeräten unter die erste. Mit anderen Worten: Spalten werden auf Mobilgeräten nicht waagerecht, sondern senkrecht dargestellt.

Zum Beispiel:

  • Wenn sich drei Bild-Blöcke in einer waagerechten Reihe befinden, werden sie auf Mobilgeräten in der entsprechenden Reihenfolge von links nach rechts übereinander gestapelt.
  • Wenn du drei Bild-Blöcke in einer Reihe mit Text-Blöcken unter jedem Bild hast, die das jeweilige Bild beschreiben, wird in der mobilen Ansicht unter jedem Bild-Block der zugehörige Text-Block gestapelt, gefolgt vom nächsten Bild. Im obenstehenden Video kannst du dir ansehen, wie das funktioniert.

Behalte diese Ausnahmen im Hinterkopf:

  • Abstands-Blöcke werden auf allen Websites der Version 7.1 und den meisten Websites der Version 7.0 automatisch auf Mobilgeräten ausgeblendet.
  • Blöcke, die in einem Text-Block schweben (z. B. von Text umgebene Bilder), werden in der mobilen Ansicht über dem Text-Block angezeigt. Wenn in der mobilen Ansicht fälschlicherweise Blöcke über dem Text angezeigt werden, verschiebe den Block, um sicherzustellen, dass er nicht im Text schwebt.

Kompliziertere Layouts in der mobilen Ansicht

In Layouts, in denen einige Bereiche unterschiedliche Spaltengrößen haben als andere, hast du immer noch die Kontrolle darüber, wie die Blöcke auf Mobilgeräten angeordnet werden.

Wenn du Blöcke hinzufügst, siehst du Richtlinien, die zeigen, wie Blöcke angeordnet werden. Läuft eine Hilfslinie über die Länge eines daneben liegenden Blocks, teilt Squarespace damit mit, dass die beiden Blöcke auf allen Bildschirmen zusammen gruppiert werden sollen.

Wenn du dafür sorgen möchtest, dass ein Block mit einem anderen Block gestapelt bleibt, ziehe den Block an die gewünschte Stelle und lege ihn ab, wenn die Hilfslinie (die horizontale Linie) längs über den anderen Block hinweg verläuft.

Im obenstehenden Video kannst du dir ansehen, wie das funktioniert.

move_text_block_under_image_block.png

Weitere Hilfe

  • Um eine Vorschau davon zu erhalten, wie deine Website auf Mobilgeräten angezeigt wird, verwende die Geräteansicht. Da Websites auf jedem Gerät etwas anders aussehen können, empfehlen wir auch, die Ansicht auf deinem eigenen Mobilgerät zu überprüfen.
  • Um ein besseres Gefühl dafür zu erhalten, wie deine Website auf Mobilgeräten angezeigt wird, bearbeite deine Website in der Squarespace-App.
War dieser Beitrag hilfreich?
57 von 358 fanden dies hilfreich