Klicke und ziehe Blöcke an neue Positionen, um Inhalte auf deiner Website neu anzuordnen.

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 zu einem Blogeintrag.

Ein Video anschauen

Dieses Video zeigt den Klassischen Editor.

Einen Block verschieben

Überall dort, wo du Blöcke in Squarespace hinzufügst, kannst du Blöcke verschieben, um das Layout anzupassen. So verschiebst du einen Block:

Tipp:Um deinen Website-Inhalt einem möglichst breiten Publikum zugänglich zu machen, sieh dir die Ressourcen zur Barrierefreiheit bei Squarespace an.

Kreativer Editor-Layouts

Die aktuelle Bearbeitungsfunktion für Blöcke auf Squarespace heißt Kreativer Editor. Er wird auf Websites der Version 7.1 in allen Bereichen unterstützt, in denen du Block-Abschnitte hinzufügst, einschließlich Layout-Seiten, Portfolio-Unterseiten und deines Footers. Sammlungsinhalte und alle Block-Abschnitte, die vor der Veröffentlichung des Kreativen Editors hinzugefügt wurden, verwenden den Klassischen Editor.

Aufgrund des Rastersystems im Kreativen Editor kann das Verschieben eines Blocks dazu führen, dass sich einige Blöcke um ihn herum ebenfalls leicht verschieben. Dies geschieht, um das Gesamtgleichgewicht des Abschnittslayouts beizubehalten. 

Denke daran, dass du im Kreativen Editor die Computer- und mobile Ansicht getrennt festlegst.

Blöcke zentrieren

Um einen Block horizontal zu zentrieren, klicke auf den Block, ziehe ihn in die Mitte des Abschnitts und lass ihn los, wenn eine gelbe Linie vertikal durch die Mitte des Rasters angezeigt wird. Die Größe des Blocks kann sich leicht ändern, um sicherzustellen, dass er sich in der Mitte des Abschnitts befindet.

Blöcke randlos gestalten

Wenn du einen Block außerhalb des Rasters des Kreativen Editors verschiebst, wird seine Größe an den Rand der Inhaltsbreite des Abschnitts angepasst. Dadurch entsteht ein randloser Effekt. Bestimmte Blöcke, z. B. Bild-Blöcke, die auf „Füllen“ eingestellt sind, müssen möglicherweise anders zugeschnitten werden, um den Effekt zu erzielen. 

Inhaltsausrichtung und Überlappung festlegen

Nachdem du einen Block an eine neue Stelle im Kreativen Editor verschoben hast, wird die Werkzeugleiste des Blocks angezeigt.

• Um den Inhalt des Blocks horizontal, vertikal oder in beide Richtungen innerhalb der Ränder des Blocks auszurichten, klicke auf die Ausrichtungssymbole in der Werkzeugleiste des Blocks. Beachte, dass manche Blöcke wie Bild-Blöcke und Button-Blöcke, die auf Füllen eingestellt sind, keine Optionen zur Ausrichtung haben.
• Wenn sich Blöcke überlappen, zeigt die Werkzeugleiste die Symbole Vorwärts bewegen und Rückwärts bewegen an, sodass du festlegen kannst, welcher Block ganz vorne angezeigt wird. Wenn sich viele Blöcke überlappen, musst du möglicherweise mehrmals klicken, damit der Block ganz vorne oder ganz hinten angezeigt wird.
• Um Blockinhalte auf überlappenden Blöcken sichtbarer zu machen, füge Hintergrundfarben zu bestimmten Blöcken hinzu. 

Mehrere Blöcke gleichzeitig anordnen

Markiere mehrere Blöcke, indem du im Abschnittshintergrund klickst und ziehst. Verschiebe oder ordne dann alle markierten Blöcke gleichzeitig an:

• Um mehrere markierte Blöcke gleichzeitig zu verschieben, klicke und ziehe einen der Blöcke. Dadurch werden alle markierten Blöcke gleichzeitig verschoben, wobei ihr aktuelles Layout beibehalten wird.
• Um alle markierten Blöcke gleichzeitig auszurichten, klicke auf den Button Gruppe ausrichten, der in der Symbolleiste erscheint. Wähle dann eine der Ausrichtungsoptionen aus.
• Um alle markierten Blöcke rückwärts oder vorwärts zu verschieben, klicke auf die Buttons Rückwärts bewegen oder Vorwärts bewegen, die in der Symbolleiste angezeigt werden.
• Um die Größe aller markierten Blöcke zu ändern, bewege den Mauszeiger über eines der Quadrate in der Kontur eines Blocks, bis es zu einem Pfeil wird. Klicke dann auf die Blöcke und ziehe sie größer oder kleiner.

Um alle Blöcke in einem Abschnitt des Kreativen Editors gleichzeitig zu markieren und zu verschieben, drücke die Befehlstaste + A oder Strg + A und klicke und ziehe sie.

Klassischer Editor-Layouts

Alle Blockbereiche auf Websites der Version 7.0 verwenden den Klassischen Editor. Er ist auch in einigen Bereichen von Websites der Version 7.1 verfügbar:

• Blogeinträge, Events und zusätzliche Produktinformationen
• Block-Abschnitte, die vor dem Kreativen Editor hinzugefügt wurden

Blöcke verschieben

In den meisten Bereichen, in denen der Klassischen Editor verwendet wird, unterstützt ein unsichtbares Raster bis zu 12 Spalten und eine unbegrenzte Anzahl von Zeilen. Für einige Bereiche, wie z. B. Footer, können andere Einschränkungen gelten.

• Wenn du auf einen Block klickst und ihn verschiebst, um seine Position im Raster zu verändern, wird der Block halbtransparent angezeigt.
• 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.
• Wenn du einen Block innerhalb eines Textbereichs platzierst, wie beim Erstellen eines Textzitats, erscheint ein graues Kästchen an der Position des Blocks, um dir zu verdeutlichen, wie der Text um den Block herum angeordnet wird.

Blöcke platzieren

Wenn du einen Block ziehst, werden Hilfslinien angezeigt, die zeigen, was beim Loslassen des Blocks passieren wird:

• Vertikale Linie in der Höhe des Inhaltsbereichs – Der Block erstreckt sich über die gesamte Höhe der Seite und erstellt eine neue Spalte
• Horizontale Linie in der Breite des Inhaltsbereichs – Der Block erstreckt sich über die gesamte Breite der Seite und erstellt eine neue Zeile
• Linie entsprechend der Höhe oder Breite eines anderen Blocks – Der Block wird zu einer vorhandenen Spalte oder Zeile hinzugefügt, in derselben Höhe oder Breite wie dieser Block

Blöcke in Spalten und Zeilen trennen

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

• Da sich Text-Blöcke oft miteinander verbinden, wenn sie gestapelt angeordnet werden, verwende einen Linien- oder Abstands-Block, um den Text abzutrennen und zu verhindern, dass Blöcke ineinander übergehen. Wenn du hierbei Hilfe benötigst, lies den Abschnitt über Text-Blöcke weiter unten.
• 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.

Mobile Layouts

Wie Blöcke in mobilen Browsern angeordnet werden, hängt davon ab, in welchem Editor sich die Blöcke befinden:

• Kreativer Editor – Die mobilen Layouts und Computer-Layouts sind getrennt. Klicke oben rechts auf das Symbol Mobile Ansicht, um das mobile Layout der Seite anzuzeigen und zu bearbeiten. Das Verschieben von Blöcken im Computer-Layout wirkt sich nicht auf das mobile Layout aus. 
• Klassischer Editor – Es ist nicht möglich, die Computer- und mobilen Layouts separat zu bearbeiten. Das mobile Layout entspricht dem Computer-Layout und die Blöcke werden automatisch neu angeordnet, um sie an kleinere Geräte anzupassen.

Spalten und Reihen erstellen

Deine Website enthält eine Reihe von Optionen zum automatischen Erstellen von Spalten und Zeilen mit gängigen Inhaltstypen. Du kannst im Laufe der Zeit mehr Inhalte hinzufügen, ohne dass du sie manuell neu anordnen musst. Wir empfehlen die Verwendung dieser Optionen für saubere, konsistente Spalten und Zeilen, darunter:

• Auto-Layouts (Version 7.1) – Bilder, Text und Buttons
• Galerie-Abschnitte (Version 7.1) – Bilder und Text
• Galerie-Blöcke – Bilder und Text
• Übersichts-Blöcke – Bilder und Text, die von Sammlungs-Seiten wie Blogs abgerufen werden

Wenn du jedoch Spalten und Zeilen mit anderen Inhaltstypen oder in Layouts erstellen musst, die von den oben erwähnten Optionen nicht unterstützt werden, kannst du Spalten und Zeilen mit Blöcken erstellen:

• Kreativer Editor – Platziere Blöcke und ändere ihre Größe anhand der Rasterhilfslinien für konsistente Spalten und Zeilen. Ordne dann das mobile Layout bei Bedarf in verschiedenen Spalten und Zeilen an.
• Klassischer Editor – Das Erstellen von Spalten und Zeilen ist komplexer. Der Rest dieser Anleitung beschreibt, wie du Spalten und Zeilen im Klassischen Editor manuell erstellst.

Dieses Video zeigt Version 7.0, gilt aber auch für den Klassischen Editor in Version 7.1.

Spalten im klassischen Editor 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. Fahre mit der Maus über den Block, den du verschieben möchtest. Dein Mauszeiger wird dann zum Handsymbol. Wenn die Hand nicht erscheint, 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.

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.

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.

Zeilen im Klassischen Editor 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 die Hand nicht erscheint, 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.

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.

Spalten und Zeilen nur mit Text im Klassischen Editor erstellen

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.

3. 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.
4. 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.

5. Wiederholen Sie den Vorgang, um Abstands-Blöcke und Text-Blöcke für die benötigten Textspalten hinzuzufügen.
6. 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 Zeilen im Klassischen Editor 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.

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 bei Spalten und Zeilen im Klassischen Editor

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. Normalerweise empfehlen wir, Bilder mit einer Mindestbreite von 1500 Pixeln zu verwenden. Weitere Hilfestellungen zur Anpassung deiner Bilder findest du unter 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 deine Inhalte 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.

Weitere Informationen findest du unter Wie Blöcke auf Mobilgeräten im Klassischen Editor gestapelt werden.