Blöcke

Blöcke »Layoutraster-Block

Der Raster-Block ermöglicht es dir, einfach Layouts mit gemeinsamen, durchgängigen vertikalen Rasterlinien für einen Beitrag oder eine Seite zu erstellen und Inhalte in Spalten einzufügen.

Ein Raster besteht aus einer bis vier Spalten, deren Größe und Position über zwölf vertikale Linien individuell angepasst werden kann. Es gibt auch Layoutoptionen speziell für Tablets (acht vertikale Rasterlinien) und Mobilgeräte (vier vertikale Rasterlinien).

Optional können Hintergrundfarben und Abstände eingefügt werden, um Inhalte hervorzuheben.

Du kannst das Layoutraster hinzufügen, indem du im Layout-Abschnitt auf den Button Block hinzufügen klickst. Alternativ kannst du auch einfach schnell /layout eingeben.

Eine detaillierte Anleitung zum Hinzufügen von Blöcken findest du hier.

Bitte beachte, dass es für einige Funktionen erforderlich ist, dass dein Website-Theme den Block-Editor vollständig unterstützt.

Was ist ein Layoutraster?

Ein Raster ist ein Instrument zum Entwerfen von Layouts, das, abhängig vom Gerät auf dem es angezeigt werden soll, also dem responsiven Haltepunkt, eine bestimmte Anzahl an Rasterlinien enthält:

  • Zwölf Rasterlinien für Desktop-Geräte
  • Acht Rasterlinien für Tablet-Geräte
  • Vier Rasterlinien für Mobilgeräte

Das Layoutraster enthält eine bestimmte Anzahl an Spalten (eins bis vier), und jede dieser Spalten enthält die Inhalte, die du dort präsentieren willst.

Die Spalten können mehrere Rasterlinien überspannen – dies wird mit gepunkteten Linien angezeigt – oder voneinander versetzt sein. Dies ist dein Rasterlayout, für das es je nach Anzeigegerät unterschiedliche Einstellungen gibt.

Auf kleineren Geräten wie Tablets oder Mobilgeräten erstreckt sich das Layout üblicherweise über mehrere Zeilen. Diese Funktion wird automatisch aktiviert, wenn du in die Tablet- oder mobile Ansicht wechselst, sie kann aber überschrieben werden, indem du die Rasterwerte änderst.

Responsive Haltepunkte sind ein Thema für Fortgeschrittene. Du kannst das Layoutraster aber auch mit den Standardeinstellungen nutzen, ohne mehr darüber zu wissen.

↑ Inhaltsverzeichnis ↑

Einrichten des Rasters

Wenn du zum ersten Mal einen Layoutraster-Block hinzufügst, musst du die gewünschte Spaltenanzahl angeben:

Dies kannst du später über die Seitenleiste mit Block-Einstellungen wieder ändern.

↑ Inhaltsverzeichnis ↑

Hinzufügen von Inhalten zum Raster

Jede Rasterspalte kann andere Blöcke enthalten. Du kannst Inhalte hinzufügen, indem du auf das +-Icon klickst und einen Block auswählst.

↑ Inhaltsverzeichnis ↑

Änderung der Rastergröße

Zum Ändern der Spaltengröße eines Layoutrasters hast du zwei Optionen:

  • Die Ziehpunkte auf dem Bildschirm
  • Die Seitenleiste mit Block-Einstellungen

Der aktuell ausgewählte responsive Haltepunkt wird am Ende des Rasterlayout-Blocks angezeigt.

Über die entsprechenden Buttons auf der Seitenleiste mit Block-Einstellungen kannst du zwischen den Haltepunkten für Desktop-, Tablet- und Mobilgeräte wechseln.

Hinweis: Insgesamt wird sich der Editor nicht ändern, um den ausgewählten Haltepunkt wiederzugeben.

↑ Inhaltsverzeichnis ↑

Änderung der Rastergröße mit Ziehpunkten

Jede Spalte deines Rasters hat links und rechts einen blauen Kreis. Das sind die Ziehpunkte. Wenn du darauf klickst und den entsprechenden Kreis nach links oder rechts ziehst, ändert sich die Größe des Blocks.

Das Layoutraster verhindert, dass du beim Vergrößern den Rasterbereich überschreitest. Um Platz zu schaffen, musst du deshalb möglicherweise weitere Spalten anpassen.

Mit den Ziehpunkten ist es nicht möglich, das Raster über mehrere Zeilen hinweg zu vergrößern.

↑ Inhaltsverzeichnis ↑

Ändern der Rastergröße mit den Block-Einstellungen

Alternativ zu den Ziehpunkten kannst du das Rasterlayout auch direkt mit der Seitenleiste mit Block-Einstellungen ändern.

Jeder Block weist neben den Optionen in der Werkzeugleiste des Blocks auch spezifische Optionen in der Editor-Seitenleiste auf. Wenn die Seitenleiste nicht angezeigt wird, klicke einfach auf das Zahnrad-Icon neben dem Veröffentlichen-Button.

Du kannst die Werte für jede Spalte direkt ändern:

  • Versetzen – Anzahl der Rasterlinien, die diese Spalte von der vorherigen (oder dem Anfang) versetzt ist
  • Überspannen – Anzahl der Rasterlinien, die diese Spalte überspannt.

Wenn du die Ziehpunkte verwendest, werden diese automatisch angepasst.

↑ Inhaltsverzeichnis ↑

Mehrere Zeilen

Bei Tablet- und mobilen Layouts sind mehrere Zeilen möglich.

Du kannst über die Ziehpunkte für jede Zeile die Größe der Spalten verändern. Wenn du Spalten von einer Zeile in eine andere verschieben willst, musst du die Seitenleiste mit Block-Einstellungen verwenden.

↑ Inhaltsverzeichnis ↑

Rasterregeln

Auch ein Raster kommt nicht ohne Regeln aus. Glücklicherweise gibt es in diesem Fall aber nur eine und die besagt, dass die Gesamtzahl der versetzten oder überspannten Werte für jede Spalte einer Zeile nicht größer sein darf als die Zahl der Rasterlinien für das entsprechende Anzeigegerät.

Auf einem Desktop-Gerät (zwölf Rasterlinien) mit einem dreispaltigen Layout kann jede der drei Spalten vier Rasterlinien ohne Versatz überspannen oder drei Rasterlinien überspannen und eine Linie Versatz haben. Auch möglich wäre, dass eine Spalte zehn Rasterlinien und die beiden anderen Spalten je eine überspannen.

Du kannst selbst entscheiden, wie du das Raster anordnen möchtest. Mit der Regel wird verhindert, dass sich die Spalten überschneiden. Das bedeutet, dass bestimmte Kombinationen aus überspannenden und versetzen Rasterlinien unter Umständen nicht möglich sind, insbesondere bei mehreren Reihen, und dass du Werte wählen musst, die der Rasterregel entsprechen.

↑ Inhaltsverzeichnis ↑

Abstände und Farben

Jede Rasterspalte hat eigene Einstellungen, auf die du ähnlich wie auf die Block-Einstellungen zugreifen kannst. Dort kannst du dann die Hintergrundfarbe und Abstände einfügen. Die Änderungen beziehen sich nur auf die jeweilige Spalte.