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

Änderungen an Seiten- und Block-Layouts auf Mobilgeräten

Mobile Browser sind kleiner (und in der Regel schmaler) als Desktop-Fenster. Um die Lesbarkeit Ihrer Website zu gewährleisten und zu verhindern, dass Besucher Ihre Inhalte durch Auf- und Zuziehen, Zoomen und Scrollen anzeigen lassen müssen, stapelt das Responsive Design von Squarespace Blöcke auf mobilen Geräten automatisch vertikal.

Wenn die Blöcke auf Mobilgeräten nicht so ausgerichtet sind, wie Sie es möchten, können Sie die Blöcke mithilfe der Szenarien in dieser Anleitung und im Video verschieben.

Video ansehen

Um zu sehen, wie dies funktioniert, und um Tipps zur Änderung Ihres Layouts für die beste mobile Anzeige zu erhalten, sehen Sie sich dieses Video an:

Test mit Geräteansicht

Wir empfehlen, Ihre Website in der Geräteansicht zu bearbeiten und zu testen, wie sie auf Ihrem eigenen Gerät aussieht.

Da das Layout eines jeden Menschen unterschiedlich ist, sind das Experimentieren und die Vorschau Ihrer Website der beste Weg, Ihr Layout zu verfeinern, bis Sie ein Design erhalten, das Ihnen gefällt und auf allen Geräten gut aussieht.

Einspaltige Layouts in der mobilen Ansicht

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

Mehrere gerade Spalten in der mobilen Ansicht

Das Hinzufügen von Blöcken links oder rechts von anderen Blöcken erzeugt Spalten auf einer Seite.

Seiten mit mehreren Spalten sind auf Desktop-Browsern großartig, können aber auf mobilen Geräten schwer zu lesen sein. Um den Inhalt zugänglicher zu machen, wird Squarespace die zweite, dritte und weitere Spalten auf mobilen Geräten unter die erste verschieben. Mit anderen Worten, die Spalten werden auf mobilen Geräten von der Horizontalen in die Vertikale verschoben.

Zum Beispiel:

  • Wenn Sie drei Bild-Blöcke in einer horizontalen Reihe haben, werden sie auf dem Handy in der Reihenfolge von links nach rechts übereinander gestapelt.
  • Wenn Sie drei Bild-Blöcke in einer Reihe mit Text-Blöcken unter jedem Bild haben, die jedes Bild beschreiben, wird unter jedem Bild-Block der zugehörige Text-Block in der mobilen Ansicht gestapelt, gefolgt vom nächsten Bild. Sehen Sie sich das Video oben an, um zu sehen, wie dies funktioniert.

Kompliziertere Layouts in der mobilen Ansicht

Bei komplizierteren Layouts, bei denen einige Bereiche andere Spaltengrößen haben als andere, haben Sie immer noch die Kontrolle darüber, wie die Blöcke auf dem Handy angeordnet werden.

Beim Hinzufügen von Blöcken gibt es Hilfslinien, die zeigen, wie die Blöcke angeordnet werden. Läuft eine Hilfslinie über die Länge eines Blocks daneben, teilt Squarespace damit mit, dass die beiden Blöcke auf allen Bildschirmen zusammen gruppiert werden sollen.

Um einen Block mit einem anderen Block gestapelt zu halten, ziehen Sie den Block und lassen Sie ihn fallen, wenn die Hilfslinie (die horizontale Linie) über die Länge des anderen Blocks verläuft.

Sehen Sie sich das Video oben an, um zu sehen, wie dies funktioniert.

Schwebende Blöcke in der mobilen Ansicht

Blöcke, die in einem Text-Block schweben (z. B. von Text umgebene Bilder), werden in der mobilen Ansicht über dem Text-Block angezeigt.

Um mehr über schwebende Blöcke im Text zu erfahren, besuchen Sie Blöcke verschieben.

Hinweis: Wenn nicht genügend Text vorhanden ist, um den Block zu umgeben, wird der Block neben dem Text angezeigt. Wenn Blöcke in der Mobilansicht fälschlicherweise über dem Text angezeigt werden, können Sie dies beheben, indem Sie den Block verschieben, um sicherzustellen, dass er nicht im Text schwebt.

Abstandshalter-Blöcke

Abstands-Blocks werden auf Mobilgeräten bei den meisten Templatesautomatisch ausgeblendet.

War dieser Beitrag hilfreich?
56 von 336 fanden dies hilfreich
Änderungen an Seiten- und Block-Layouts auf Mobilgeräten