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: Sie können 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

In diesem Video wird Version 7.0 verwendet, die Anleitung 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 Inhaltsbereich-Raster ist ein unsichtbarer Bauplan, der steuert, wo Sie Blöcke platzieren können. In den meisten Bereichen, wie Layout-Seiten und Blogeinträgen, unterstützt das Raster bis zu 12 Spalten und eine unbegrenzte Anzahl von Zeilen. Einige Bereiche, wie Footer, können unterschiedliche Einschränkungen haben.

Blöcke in Bewegung

Wenn Sie auf einen Block klicken und ihn verschieben, 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 in der Position des Blocks, um dir zu verdeutlichen, wie sich der Text um den Block herum anordnen wird.

Hilfslinien

Beim Verschieben eines Blocks erscheinen schwarze Linien, die als Hilfslinien bezeichnet werden, um Ihnen zu zeigen, wo Sie den Block platzieren. Diese sind besonders nützlich, wenn Sie Spalten und Zeilen erstellen.

Während Sie Blöcke verschieben, ändern sich diese Hilfslinien und verdeutlichen Ihnen, 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 nützliche Werkzeuge, 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.

Sie können Linien- und Abstands-Blöcke auch verwenden, um Inhalte vorübergehend zu trennen, während Sie eine Seite oder einen Inhaltsbereich erstellen. Verwenden Sie einen Linien- oder Abstands-Blöcke, um Zeilen zu teilen, und fügen Sie dann Blöcke hinzu, um neue parallele Spalten zu erstellen. Nachdem der Inhalt angeordnet ist, entfernen Sie die Linien- oder Abstands-Blöcke. Beachten Sie 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. Fahren Sie mit der Maus über den Block, den Sie verschieben möchten. Ihr Mauszeiger erscheint dann als Hand.
  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

Du kannst Blöcke auch in einem Textbereich schweben lassen, sodass der Text um den Block herum angeordnet wird. In diesem Video wird Version 7.0 verwendet, die Anleitung 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 ausrichten, um eine Spalte mit übereinstimmender Höhe zu erstellen. So erstellen Sie eine Spalte:

  1. Fahren Sie mit der Maus über den Block, den Sie verschieben möchten.
  2. Ihr Mauszeiger erscheint dann als Handsymbol. 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. Befolgen Sie die unten aufgeführten Schritte, um die Spalte entweder einer vollen Seite oder einer gleichhohen Spalte hinzuzufügen.

Eine ganzseitige Spalte erstellen

Um eine neue Spalte zu erstellen, die sich über die gesamte Höhe der Seite erstreckt, klicken und verschieben Sie einen Block, bis sich die Hilfslinie vertikal über die gesamte Seite erstreckt. Auf diese Weise erstellen Sie eine neue Spalte, die die gesamte Seite teilt.

full_height_column.gif

Eine gleichhohe Spalte erstellen

Um eine neue Spalte der Höhe eines anderen Blocks anzugleichen, klicken und verschieben Sie den Block, 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 mit identischer Breite zu erstellen, benötigen Sie diese Anzahl an Spalten:

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

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

Um die Breite einer Spalte zu ändern: 

  1. Bewegen Sie den Mauszeiger zwischen zwei Blöcke, bis Sie zwei Pfeile sehen, die nach links und rechts zeigen.
  2. Klicken und ziehen Sie 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. Um eine Reihe zu erstellen:

  1. Fahren Sie mit der Maus über den Block, den Sie verschieben möchten.
  2. Ihr Cursor erscheint als Handsymbol, mit dem Sie dann den Block anklicken und auf der Seite verschieben können.
  3. Während Sie den Block verschieben erscheinen Hilfslinien, die Ihnen die Spalte oder Reihe anzeigen, in der 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 Sie die Höhe des Blocks anpassen können. Verwenden Sie diese Blöcke, um die Höhe der Reihen auf Ihrer Seite anzupassen.

Eine ganzseitige Reihe erstellen

Um eine neue Reihe zu erstellen, die sich über die ganze Seite erstreckt, klicken und ziehen Sie einen Block, sodass 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, schieben Sie 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

Das Verschieben von Text in Spalten oder Zeilen kann schwierig sein. Text-Blöcke werden oft zusammengeführt, wenn sie gestapelt werden. Sie können dies vermeiden, indem Sie Abstands-Blöcke verwenden, um Inhalte beim Erstellen der Seite zu trennen.

Textspalten

Wenn du Text in Spalten verschiebst, kannst du Inhalte visuell teilen 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. Klicken Sie auf eine Einfügemarke an einer beliebigen Stelle auf der Seite, um den nächsten Text-Block hinzuzufügen. Da Text-Blöcke manchmal schwierig sein können, nachdem sie platziert wurden, klicken Sie auf das Textsymbol und ziehen Sie es direkt aus dem Block-Menü. Wie beim Verschieben eines bereits platzierten Blocks werden Hilfslinien angezeigt.
  2. Ziehen Sie das Textsymbol in Richtung Abstands-Block, bis die Hilfslinie auf dieselbe Höhe verkleinert wird, lassen Sie es los und fügen Sie 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 Sie alle Textspalten positioniert haben, löschen Sie 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. Wenn du Leerräume visuell besser zur Geltung bringen möchtest, benutze einen Linien-Block. Um einen Leerraum einzufügen, benutze einen Abstands-Block.

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ügen Sie drei Bild-Blöcke hinzu, die jeweils in ihrer eigenen Spalte enthalten sind, indem Sie die obenbeschriebenen Schritte zum Erstellen von Spaltn mit übereinstimmender Höhe verwenden.
  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 Sie Titel benötigen, fügen Sie diese oben zu jeder Spalte hinzu, indem Sie zusätzliche Text-Blöcke benutzen, die mit den Bild-Blöcken ausgerichtet sind.

Fehlerbehebung

Meine Bilder haben verschiedene Größen

Die besten Ergebnisse erzielst du, indem du vor dem Upload sicherstellst, dass jedes verwendete Bild dasselbe Seitenverhältnis aufweist. In den meisten Fällen empfehlen wir, Bilder mit einer Mindestbreite von 1500 Pixeln zu verwenden. Weitere Hilfestellungen zur Anpassung von Bildern findest du hier: Bilder für Websites 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?
35 von 144 fanden dies hilfreich
Blöcke verschieben, um Layouts anzupassen