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

Blöcke verschieben, um Layouts anzupassen

Verschieben Sie Blöcke auf Ihren Seiten, um Layouts anzupassen oder Spalten und Zeilen zu erstellen.

Diese Anleitung ist eine Ergänzung zum Artikel Inhalte mithilfe von Blöcken hinzufügen. Wir empfehlen allen, die neu bei Squarespace sind, diesen Abschnitt zuerst zu lesen.

Hinweis: Du kannst einen Block innerhalb des Seiteninhaltsbereichs verschieben, in dem er hinzugefügt wurde. Es ist nicht möglich, Blöcke zwischen Seiten oder einzelnen Inhaltsbereichen zu verschieben, z. B. von einem Footer in eine Kopfzeile.

Ein Video anschauen

Dieses Video zeigt Version 7.0, gilt aber auch für Version 7.1.

Funktionsweise von Block-Layouts

Bevor Sie Blöcke verschieben, empfehlen wir Ihnen, diese Begriffe zu überprüfen, um mehr darüber zu erfahren, wie unser Block-System funktioniert.

Raster der Inhaltsbereiche

Das Raster im Inhaltsbereich ist ein unsichtbarer Bauplan, der steuert, wo du Blöcke platzieren kannst. In den meisten Bereichen, wie z. B. auf Layout-Seiten und in Blog-Einträgen, unterstützt das Raster bis zu 12 Spalten und eine unbegrenzte Zahl von Zeilen. Für einige Bereiche wie z. B. Footer können andere Einschränkungen gelten.

Blöcke in Bewegung

Wenn du auf einen Block klickst und ihn verschiebst, um seine Position im Raster zu verändern, wird der Block halbtransparent angezeigt.

Graue Boxen

Wenn du einen Block innerhalb eines Text-Bereichs bewegst, erscheint ein graues Kästchen an der Position des Blocks, um dir zu verdeutlichen, wie der Text um den Block herum angeordnet wird.

Hilfslinien

Wenn du einen Block verschiebst, erscheinen Linien, die als Richtlinien dienen, um dir zu zeigen, wo du den Block platzierst. Besonders nützlich sind diese Hilfsmittel bei der Erstellung von Reihen und Spalten.

Beim Verschieben von Blöcken ändern sich diese Hilfslinien und verdeutlichen dir, ob der Block:

  • sich über die gesamte Höhe der Seite erstreckt und somit eine neue Spalte erstellt.
  • sich über die gesamte Breite der Seite erstreckt und somit eine neue Reihe erstellt.
  • der Höhe oder Breite eines anderen Blocks entspricht und sich somit in eine bestehende Reihe oder Spalte einfügt.

Linien-Blöcke und Abstands-Blöcke

Linien-Blöcke und Abstands-Blöcke sind praktische Tools, um Inhalte in Spalten und Zeilen zu trennen.

Da sich Text-Blöcke miteinander verbinden, wenn Sie gestapelt angeordnet werden, können Sie einen Linien- oder Abstands-Block verwenden, um den Text abzutrennen und zu verhindern, dass Blöcke ineinander übergehen. Wenn Sie hierbei Hilfe benötigen, lesen Sie den Abschnitt weiter unten über Text-Blöcke.

Du kannst Linien- und Abstands-Blöcke auch verwenden, um Inhalte vorübergehend zu trennen, während du eine Seite oder einen Inhaltsbereich erstellst. Verwende einen Linien- oder Abstands-Blöcke, um Zeilen zu teilen, und füge dann Blöcke hinzu, um neue parallele Spalten zu erstellen. Wenn der Inhalt angeordnet wurde, entferne die Linien- oder Abstands-Blöcke. Beachte dabei, dass Text-Blöcke nach dem Entfernen des Linien- oder Abstands-Blocks zusammengeführt werden können.

Einen Block verschieben

So verschieben Sie einen Block:

  1. Bewege den Mauszeiger über den Block, den du verschieben möchtest. Dein Mauszeiger erscheint dann als Hand. Wenn keine Hand angezeigt wird, klicke zuerst auf den Block.
  2. Klicken und ziehen Sie den Block, um ihn auf der Seite zu verschieben.
  3. Während Sie den Block verschieben, können Sie sich an den Hilfslinien und Feldern orientieren, um eine geeignete neue Platzierung auszuwählen.
  1. Tippen und halten Sie den Block, den Sie verschieben möchten. Es wird grau und schwebt über dem Inhalt.
  2. Ziehen Sie den Block, um ihn auf der Seite zu bewegen.
  3. Während Sie den Block verschieben, können Sie sich an den Hilfslinien und Feldern orientieren, um eine geeignete neue Platzierung auszuwählen.

Bilder und andere Blöcke im Text schweben lassen

Sie können Blöcke auch in einem Textbereich schweben lassen, sodass der Text um den Block herum angeordnet wird. Dieses Video zeigt Version 7.0, gilt aber auch für Version 7.1.

Dies ist insbesondere für Bilder empfehlenswert, um ein eigenes mehrspaltiges Layout in einem Blog-Eintrag oder auf einer Seite mit Textinhalt zu erstellen.

Klicke und ziehe einen Block über einen Text-Block, um ein solches Layout zu erstellen. Ein graues Kästchen erscheint dort, wo der Block im Text platziert sein wird.

Spalten und Reihen erstellen

Dieses Video zeigt Version 7.0, gilt aber auch für Version 7.1.

Spalten erstellen

Spalten können sich über die gesamte Höhe des Inhaltsbereichs erstrecken oder an einem Block in einer vorhandenen Zeile ausgerichtet werden, um eine Spalte mit passender Höhe zu erstellen. So erstellst du eine Spalte:

  1. Bewege den Mauszeiger über einen Block, den du verschieben möchtest. Dein Mauszeiger erscheint dann als Handsymbol. Wenn keine Hand angezeigt wird, klicke zuerst auf den Block.
  2. Klicken und ziehen Sie den Block, um ihn auf der Seite zu verschieben.
  3. Während Sie den Block bewegen erscheinen Hilfslinien, die die neue Spalte anzeigen, in der der Block positioniert wird.
  4. Befolge die unten aufgeführten Schritte, um die Spalte entweder einer vollen Seite oder einer Spalte mit passender Höhe hinzuzufügen.

Eine ganzseitige Spalte erstellen

Um eine neue Spalte zu erstellen, die sich über die gesamte Höhe der Seite erstreckt, klicke auf einen Block und verschiebe ihn, bis sich die Hilfslinie vertikal über die gesamte Seite erstreckt. So kannst du eine neue Spalte, die die gesamte Seite teilt, erstellen.

full_height_column.gif

Eine gleichhohe Spalte erstellen

Um eine neue Spalte der Höhe eines anderen Blocks anzugleichen, klicke auf den Block und verschiebe ihn, bis die Hilfslinie der Höhe des anderen Blocks entspricht. Dies ist hilfreich, um Blöcke nebeneinander oder über bzw. unter breiteren Blöcken zu platzieren.

matching_height_column.gif

Spaltenbreite ändern

Um Spalten zu erstellen, die alle gleich breit sind, müssen Sie eine der folgenden Spaltenanzahlen verwenden:

  • 1
  • 2
  • 3
  • 4
  • 6
  • 12

Wenn die Anzahl an Spalten eine andere ist, werden die einzelnen Spalten verschiedene Breiten haben. Diese Regel ist auf alle Inhaltsbereiche deiner Website anwendbar, mit Ausnahme von Seitenleisten und einigen Footern.

So kannst du die Breite einer Spalte ändern:

  1. Bewegen Sie den Mauszeiger zwischen zwei Blöcke, bis Sie zwei Pfeile sehen, die nach links und rechts zeigen.
  2. Klicke und ziehe mit der Maus, um die Spalte zu verkleinern.
  3. Dies verändert die Spaltenbreite und die Gesamtgröße beider Blöcke.
  4. Wiederholen Sie den Schritt bei Bedarf in den Bereichen zwischen anderen Blöcken in der Reihe.

Reihen erstellen

Reihen können sich über die gesamte Breite des Inhaltsbereichs erstrecken oder sich einem Block in einer bestehenden Spalte anpassen, um einen Stapel zu bilden. So kannst du eine Reihe erstellen:

  1. Bewege den Mauszeiger über den Block, den du verschieben möchtest. Dein Mauszeiger wird dann zum Handsymbol. Wenn keine Hand angezeigt wird, klicke zuerst auf den Block.
  2. Klicken und ziehen Sie den Block, um ihn auf der Seite zu verschieben.
  3. Beim Verschieben des Blocks werden Hilfslinien angezeigt, die angeben, in welcher Spalte oder Reihe der Block positioniert wird.
  4. Führen Sie die folgenden Schritte aus, um den Block entweder in einer ganzseitigen Zeile oder in einer ausgerichteten Zeile zu platzieren.
Tipp: Bild-Blöcke, Abstands-Blöcke, Karten-Blöcke und Galerie-Blöcke (Karussell) verfügen über ein Zuschneidewerkzeug, mit dessen Hilfe du die Höhe des Blocks anpassen kannst. Mit diesen Blöcken kannst du die Höhe der Reihen auf deiner Seite anpassen.

Eine ganzseitige Reihe erstellen

Um eine neue Reihe zu erstellen, die sich über die ganze Seite oder den ganzen Beitrag erstreckt, klicke auf einen Block und ziehe so daran, dass sich die Hilfslinie horizontal über die gesamte Seite erstreckt.

full_width_row.gif

Eine gleichbreite Reihe erstellen

Um die Breite eines Blocks der Breite eines anderen Blocks anzupassen, schiebe den Block über oder unter den anderen Block, bis die Hilfslinie mit der Breite des bestehenden Blocks übereinstimmt. Anstatt eine ganze Reihe über eine Seite hinweg zu erstellen, stapelt diese Vorgehensweise einzelne Blöcke übereinander.

matching_width_row.gif

Erstellen von Spalten und -Zeilen nur mit Text

Es kann schwierig sein, Text in Spalten oder Reihen einzufügen. Text-Blöcke werden oft zusammengeführt, wenn sie gestapelt werden. Dies kannst du vermeiden, indem du beim Erstellen der Seite einen Abstands-Block verwendest, um Inhalte voneinander zu trennen.

Textspalten

Wenn du Text in Spalten verschiebst, kannst du Inhalte optisch voneinander trennen oder Text mit anderen Blöcken, z. B. Bild-Blöcken, verbinden. So erstellst du Textspalten:

  1. Fügen Sie Ihren ersten Text-Block an einer beliebigen Stelle zur Seite hinzu.
  2. Klicken Sie auf eine Einfügemarke an einer beliebigen Stelle auf der Seite, um einen Abstands-Block hinzuzufügen. Klicken Sie auf den Block neben dem ersten Text-Block, und ziehen Sie ihn.

add_spacer_block.gif

  1. Klicke auf eine beliebige Einfügemarke auf der Seite, um deinen nächsten Text-Block hinzuzufügen. Da sich Text-Blöcke nach dem Platzieren manchmal nur schwer verschieben lassen, klicke auf das Textsymbol und ziehe es direkt aus dem Block-Menü. Es werden Richtlinien angezeigt – so als würdest du einen Block verschieben, der bereits platziert wurde,
  2. Ziehe das Textsymbol in Richtung Abstands-Block, bis die Hilfslinie auf dieselbe Höhe verkleinert wird, lasse es los und füge den Text hinzu.

second_text_block.gif

  1. Wiederholen Sie den Vorgang, um Abstands-Blöcke und Text-Blöcke für die benötigten Textspalten hinzuzufügen.
  2. Wenn du alle Textspalten positioniert hast, lösche die Abstands-Blöcke, sodass nur die Textspalten stehen bleiben.

Textreihen

Gestapelte Text-Blöcke verbinden sich häufig zu einem einzigen Block. Um diese Blöcke voneinander abzugrenzen, empfehlen wir, Text durch einen Linien- oder Abstands-Block zu trennen. Mit einem Linien-Block kannst du Leerräume optisch besser zur Geltung bringen. Und mit einem Abstands-Block kannst du einen Leerraum einfügen.

Spalten und Reihen kombinieren

Bei der Gestaltung deiner Seite kann es vorteilhaft sein, Spalten und Reihen zu kombinieren. Ein typisches Beispiel ist eine Firmenbiografie, auf der du eventuell Text-Blöcke und dazu passende Bild-Blöcke in gleichmäßigen Reihen platzieren möchtest. In diesem Beispiel kombinieren wir drei Bild-Blöcke und drei Text-Blöcke.

So kombinieren Sie Spalten und Zeilen:

  1. Füge drei Bild-Blöcke hinzu, die jeweils in ihrer eigenen Spalte enthalten sind. Folge hierzu den obenbeschriebenen Schritten zum Erstellen von Spalten mit übereinstimmender Höhe.
  2. Füge jetzt unter jedem Bild-Block einen Text-Block ein. Vergewissere dich, dass die Hilfslinie dem darüber stehenden Bild-Block entspricht. Dadurch wird eine neue Reihe innerhalb der vorhandenen Spalte unter jedem Bild erstellt.

text_under_image.gif

Wenn du Titel benötigst, kannst du diese oben zu jeder Spalte hinzufügen. Verwende hierzu zusätzliche Text-Blöcke, die an den Bild-Blöcken ausgerichtet sind.

Fehlerbehebung

Meine Bilder haben verschiedene Größen

Die besten Ergebnisse erzielen Sie, indem Sie vor dem Upload sicherstellen, dass jedes verwendete Bild dasselbe Bildseitenverhältnis aufweist. In den meisten Fällen empfehlen wir, Bilder mit einer Mindestbreite von 1500 Pixeln zu verwenden. Weitere Hilfestellungen zur Anpassung Ihrer Bilder finden Sie hier: Bilder zur Darstellung im Web formatieren.

Mein Layout von Spalten und Zeilen erscheint nicht auf einem Mobilgerät.

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. Die Reihenfolge, in der deine Blöcke angezeigt werden, hängt von der Struktur deiner Reihen und Spalten ab.

Um mehr zu erfahren, gehen Sie bitte auf Seiten und Blockveränderungen auf Mobilgeräten.

War dieser Beitrag hilfreich?
42 von 168 fanden dies hilfreich
Blöcke verschieben, um Layouts anzupassen