1-Spalter, 2-Spalter, 3-Spalter, 4-Spalter
Mit Grid-Elementen lassen sich ein 1-4 spaltige Raster mit entsprechender Spaltenanzahl anlegen. Die Breite aller Spalten entspricht zusammengenommen der Gesamtbreite des Inhaltsbereiches einer Seite. Die Verteilung der Spalten kann jederzeit geändert und angepasst werden.
Die vier Symbole mit Spalten werden Ihnen begegnen, wenn Sie ein Raster-Element erstellen möchten. Das fünfte Symbol wird im Inhaltsbereich zu sehen sein.
Reiter Allgemein
Im Reiter Allgemein der Raster-Elemente finden sich die gleichen Felder wie im Überschriftelement. Im Gegensatz zu anderen Elementen können Grid-Elemente nicht im Feld Typ zu einem anderen Raster-Element umgewandelt werden. Dort lässt sich ein Raster-Element lediglich zu anderen Content Elementen anpassen.
Raster-Layout
Um beispielsweise aus einem 2-Spalter einen 4-Spalter zu machen, nutzen Sie im Reiter Allgemein die Option in der Spalte Raster-Layout. Das aktuelle Grid-Element ist hierbei bereits ausgewählt. Zum Ändern des Raster-Elements klicken Sie einfach das Symbol des gewünschten Rasters an oder wählen es im Dropdown-Menü aus. Sie müssen danach die Änderung bestätigen.
Wenn sich bereits Inhalte in den Spalten befanden, kann deren Position im Reiter Raster-Elemente angepasst werden. Erfahren Sie hier mehr zum Reiter Raster-Elemente.
Erweiterungsoptionen
Die Erweiterungsoptionen unterscheiden sich zum Teil je nach Spaltenanzahl des Rasters. Die Breite der Spalten kann angepasst werden. Während die Optionen zur Spaltenhöhe und Ausrichtung der Inhalte gleich sind.
Verteilung der Spalten – 1-Spalter
Ein 1-Spalter kann verschiedene Breiten haben und zusätzlich dazu zentriert werden. Mögliche Breiten in Prozent sind:
100 %, 75 %, 50 % oder 25 %
2-Spalter – Verteilung der Spalten
Bei einem 2-Spalter ist es möglich die Verteilung der Spalten für die Desktop- und die Tablet-Ansicht einzustellen.
Verteilungen in Prozent in der Desktop-Ansicht:
50 % uns 50 %, 66 % und 33 %, 33 % und 60 %, 75 % und 25 % oder 25 % und 75 %
Verteilungen in Prozent in der Tablet-Ansicht:
50 % und 50 % oder 100 %
Mit der Option 100 % erscheinen die zwei Spalten untereinander statt nebeneinander.
3-Spalter – Verteilung der Spalten
Der 3-Spalter bietet die meisten Anpassungsmöglichkeiten für die Spaltenbreiten.
Verteilungen in Prozent in der Desktop-Ansicht:
33 %, 33 % und 33 % oder 50 %, 25 % und 25 % oder 25 %, 50 % und 25 % oder 25 %, 25 % und 50 % oder 15 %, 70 % und 15 %
Verteilungen in Prozent in der Tablet-Ansicht:
33 %, 33 % und 33 % oder 50 %, 50 % und 50 % oder 100 %
Verteilungen in Prozent in der mobilen Ansicht: 50 %, 50 % und 50 % oder 100 %
Verteilungen in Prozent in der mobilen Porträt-Ansicht: 50 %, 50 % und 50 % oder 100 %
4-Spalter – Verteilung der Spalten
Beim 4-Spalter bestehen keine Optionen die Verteilung der Spalten anzupassen.
Die Spalten werden automatisch gleichmäßig ausgegeben, da sie ohnehin sehr schmal sind.
In der mobilen und der Tablet-Ansicht werden jeweils zwei Spalten oder alle vier Spalten untereinander dargestellt.
Spaltenhöhe & Ausrichtung der Inhalte
Ab zwei Spalten bestehen außerdem die Optionen die Spaltenhöhe einheitlich anzugleichen und die Ausrichtung der Content-Elemente zu bestimmen, sofern diese die gleiche Breite haben. Im Dropdown-Menü für die Ausrichtung können Sie zwischen folgenden Optionen wählen:
- Das erste Element strecken
- Das letzte Element strecken
- Elemente an oberer Kante ausrichten
- Elemente an unterer Kante ausrichten
- Alle Elemente zentrieren
- Alle Elemente gleichmäßig verteilen
Inhaltselemente
Sobald Sie Content in ein Raster einfügen, erscheinen diese in der Spalte Inhaltselemente. Sie passen diese direkt an, wenn Sie sich im Bearbeitungsmodus des Raster-Elements befinden oder bearbeiten die Elemente einzeln, so wie Sie es mit Inhalten außerhalb von Rastern tun.
1, 2, 3 und 4-Spalter im Frontend
Auf unserer Vorschau-Seite sehen Sie an vielen Stellen Raster-Elemente im Einsatz. Die 1, 2, 3 und 4-Spalter sind oft die Grundlage für die Darstellung anderer Inhaltselemente.
