Wie Blöcke auf Mobilgeräten im Klassischen Editor gestapelt werden

Stelle sicher, dass Blöcke auf Mobilgeräten in der richtigen Reihenfolge angezeigt werden, wenn du den Klassischen Editor verwendest.

Zuletzt aktualisiert: 8. August 2024

Im Klassischen Editor stapelt das Responsive Design von Squarespace Blöcke auf Mobilgeräten automatisch vertikal. Dies trägt zur Lesbarkeit deiner Website bei und verhindert, dass Besucher zum Navigieren deiner Inhalte die Anzeige verkleinern, vergrößern oder auf deiner Seite scrollen müssen.

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.

So erlangst du Zugriff auf diese Funktion

In dieser Anleitung geht es um das Verhalten von Blöcken auf Mobilgeräten, die im Klassischen Editor hinzugefügt wurden. Dieser Editor wird auf allen Websites der Version 7.0 und in bestimmten Bereichen von Websites der Version 7.1 verwendet. Wenn du den Kreativen Editor verwendest, kannst du dein Computer-Layout und mobiles Layout unabhängig voneinander anordnen. Wenn du dir nicht sicher bist, welchen Editor ein Bereich deiner Website verwendet, besuche Kreativer Editor, die neueste Squarespace-Funktion zur Bearbeitung von Inhalten.

Video ansehen

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

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.
Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.

Wie Blöcke auf Mobilgeräten im Klassischen Editor gestapelt werden