Raster-Elemente dienen der Strukturierung von Seiten. Als Inhaltscontainer enthalten Sie selbst keine Inhalte, können aber mit beliebigen anderen Inhaltselementen befüllt werden. Besonders dann, wenn viele Informationen übersichtlich und einheitlich auf einer Webseite dargestellt werden müssen, eigenen sich Rater-Elemente perfekt, um eben diese klar gegliedert und verständlich anzuordnen.

1-Spalter, 2-Spalter, 3-Spalter, 4-Spalter

Mit Grid-Elementen lässt sich ein 1-4 spaltiges Raster mit entsprechender Spaltenanzahl anlegen. Die Breite aller Spalten entspicht zusammengenommen der Gesamtbreite des Inhaltsbereiches. 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.

Raster-Layout

Im Reiter Allgemein der Raster-Elemente finden sich die gleichen Felder wie im Überschriftenelement. 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 Inhaltselementen anpassen.

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. Die Optionen zur Spaltenhöhe und Ausrichtung der Inhalte sind dagegen gleich.

1-Spalter

Ein 1-Spalter kann verschiedene Breiten haben und zusätzlich dazu zentriert werden. Mögliche Breiten in Prozent:

100 % 75 % 50 % 25 %

2-Spalter

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 % | 50 % 66 % | 33 % 33 % | 66 % 75 % | 25 % 25 % | 75 %

Verteilungen in Prozent in der Tablet-Ansicht:

50 % | 50 % 100 %

Mit der Option 100 % erscheinen die zwei Spalten untereinander statt nebeneinander.

3-Spalter

Der 3-Spalter bietet die meisten Anpassungsmöglichkeiten für die Spaltenbreiten.

Verteilungen in Prozent in der Desktop-Ansicht:

33 % | 33 % | 33 % 50 % | 25 % | 25 % 25 % | 50 % | 25 %
25 % | 25 % | 50 % 15 % | 70 % | 15 %

Verteilungen in Prozent in der Tablet-Ansicht:

33 % | 33 % | 33% 50 % | 50 % | 50 % 100 %

Verteilungen in Prozent in der mobilen Ansicht:

50 % | 50 % | 50 % 100 %

Verteilungen in Prozent in der mobilen Porträt-Ansicht:

50 % | 50 % | 50 % 100 %

4-Spalter

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 und 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 Inhaltselemente in ein Raster einfügen, erscheinen diese in der Spalte Inhaltselemente. Sie passen Inhaltselemente direkt an, wenn Sie sich im Bearbeitungsmodus des Raster-Elements befinden oder bearbeiten die Inhaltselemente einzeln, so wie Sie es mit Inhalten außerhalb von Rastern tun.

Akkordeon

Das Grid-Element Akkordeon unterscheidet sich vom gleichnamigen Maskenelement im Wesentlichen dadurch, dass das Raster mit allen Inhaltselementen befüllt werden kann, während das Mask Element nur Text beinhalten kann. Damit kann ein Raster-Akkordeon zunächst einmal mehr Inhalt umfassen und freier gestaltet werden.

Das erste Symbol  wird Ihnen begegnen, wenn Sie das Inhaltselement Akkordeon erstellen möchten.
Das zweite Symbol wird im Inhaltsbereich zu sehen sein.

Akkordeon-Raster – Backend & Frontend

Jedes Akkordeon Raster-Element, das Sie im Backend anlegen, entspricht einer Zeile im Frontend, die Sie auf- und zuklappen können. Das Akkordeon eignet sich gut dafür eine große Menge an Informationen strukturiert und übersichtlich darzustellen.

Akkordeon – Raster-Layout, Erweiterungsoptionen & Inhaltselemente

Wie bei den 1-4-Spaltern finden Sie auch bei einem Akkordeon nach den Feldern zum Anpassen der Überschrift, die Optionen für das Raster-Layout, Erweiterungsoptionen sowie Inhaltselemente.

Beim Raster-Layout ändert man das Raster-Element in ein anderes Raster (z. B. 2-Spalte oder Box). Soll das aktuelle Element in einen anderen Typen von Inhaltselementen umgewandelt werden, so macht man das im Feld Typ.

Bei den Erweiterungsoptionen kann man lediglich entscheiden, ob das Akkordeon beim Aufrufen der Webseite bereits aufgeklappt sein soll. Standardmäßig ist der Inhalt nicht zu sehen. Die Akkordeonzeile kann mit einem Klick in das Feld/die Zeile aufgeklappt werden.

Im Feld Inhaltselemente befindet sich eine Liste mit allen Inhalten, die sich im Akkordeon befinden.

Box

Boxen dienen dazu Inhalte hervorzuheben bzw. sie von anderen Inhalten abzugrenzen. Als Raster-Elemente geben Sie nur einen Rahmen vor und Können mit nahezu beliebigen Inhaltselementen befüllt werden. Das erste Symbol  wird Ihnen begegnen, wenn Sie das Inhaltselement Box erstellen möchten. Das zweite Symbol wird im Inhaltsbereich zu sehen sein.

Box – Raster-Layout & Erweiterungsoptionen

Wie bei anderen Raster-Elementen finden Sie im Bearbeitungsmodus der Box unter dem Reiter Allgemein die Felder Raster-Layout, Erweiterungsoptionen und Inhaltselemente

Im Raster-Layout ändern Sie ein Grid-Element zu einem anderen. Die Erweiterungsoptionen einer Box bieten die Felder zum Ändern der Hintergrundfarbe und zum Einstellen eines Schattens um die Box. Im zweiten Bild sehen Sie aus unserer Vorschau-Seite, welche Hintergründe Sie standardmäßig in unserer Website-Base einstellen können und wie Boxen mit Schatten aussehen.

Box – Inhaltselemente

Die Inhaltselemente in den Boxen, die im unteren Bild zu sehen sind, erscheinen jeweils im Bearbeitungsmodus jeder Box.

Zum Bearbeiten der Inhalte gehen Sie direkt über das Stiftsymbol in den Bearbeitungsmodus eines Inhaltselementes oder nutzen die Liste Inhaltselemente beim Bearbeiten der Box.

Bereich

Bereiche können mit nahezu beliebigen anderen Inhaltselementen befüllt werden. Im Gegensatz zu Boxen nehmen Bereiche die volle Seitenbreite ein. Für Bereiche können Sie außerdem Hintergrundbilder festlegen. Das erste Symbol  wird Ihnen begegnen, wenn Sie das Inhaltselement Bereich erstellen möchten. Das zweite Symbol wird im Inhaltsbereich zu sehen sein.

Bereich – Raster-Layout, Erweiterungsoptionen & Inhaltselemente

Beim Bearbeiten des Raster-Elementes Bereich finden Sie in der Registrierkarte Allgemein das Feld Raster-Layout. Hier können Sie das aktuelle Raster in ein anderes umwandeln.

Darunter befinden sich die Erweiterungsoptionen. So wie bei der Box kann ein Hintergrund festgelegt werden. Dieser kann hell oder dunkel sein. Standardmäßig ist jedoch transparent eingestellt. Zusätzlich dazu kann ein Hintergrundbild eingestellt werden. Wenn Sie zusätzlich zum Hintergrundbild ein hellen oder dunklen Hintergrund aktivieren, wird dieser über das Bild gelegt. Wie das im Frontend aussehen kann, zeigt der Screenshot aus unserer Vorschau-Seite

Um ein Hintergrundbild einzufügen  gehen Sie wie folgt vor:

  1. a) Laden Sie im Modul Dateiliste das entsprechende Bild hoch. Gehen Sie dann in den Bearbeitungsmodus des Bereiches und im Feld Erweiterungsoptionen auf den Button Neue Relation erstellen
    b) Alternativ klicken Sie ohne ein Bild hochzuladen im Bearbeitungsmodus im Feld Erweiterungsoptionen auf den Button Neue Relation erstellen
  2. a) Das Bild ist schon hochgeladen: Klicken Sie auf den Ordner, in dem sich das Bild befindet und klicken Sie darauf.
    b) Das Bild ist noch nicht hochgeladen: Wählen Sie den Ordner, in den Sie das Bild hochladen möchten und klicken dort auf den Button Dateien hochladen (unter der Liste bereits vorhandender Dateien). Wählen Sie das gewünschte Bild auf Ihrem Computer und klicken Sie auf Öffnen, um die Datei hochzuladen. Klicken Sie auf die Datei, die sich nun in der Liste befindet.
  3. Sie haben nun ein Huntergrundbild hinzugefügt.

Im Feld Inhaltselemente sind alle Inhalte aufgelistet, die sich im Bereich befinden, diese können direkt dort bearbeitet oder über den Inhaltsbereich einzeln angewählt werden.

Sie wollen mehr erfahren?

Alle Informationen zu den verfügbaren Angeboten finden Sie auf den Seiten unserer Website-Base. Sie haben die Möglichkeit eine Webseite zum Fixpreis erstellen zu lassen oder entscheiden sich für ein Website as a Service Paket, mit dem keine weiteren Kosten für Hosting oder Sicherheits- und Funktionsupdates auf Sie zukommen werden.