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 Raster-Elemente perfekt, um eine klare Gliederung und Ordnung zu schaffen.

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

Verteilungen in Prozent in der Tablet-Ansicht: 50 % | 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 % | 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 % oder 100 %

Verteilungen in Prozent in der mobilen Porträt-Ansicht: 50 % | 50 % | 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 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.

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.

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 mehr Inhalt umfassen und freier gestaltet werden.

Reiter Allgemein

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 im Frontend 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.

Akkordeon-Raster – Inhaltsbereich & 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.

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.

Reiter Allgemein

Wie bei anderen Raster-Elementen finden Sie im Bearbeitungsmodus der Box im 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.

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 im Inhaltsbereich über das Stiftsymbol in den Bearbeitungsmodus eines Inhaltselementes oder nutzen die Liste Inhaltselemente beim Bearbeiten der Box.

Box im Frontend

Sie sehen auf unserer Vorschau-Seite, welche Hintergründe Sie standardmäßig in unserer Website-Base einstellen können und wie Boxen mit Schatten aussehen.

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.

Reiter Allgemein

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 hinzugefügt werden. Wenn Sie mit einem Hintergrundbild den hellen oder dunklen Hintergrund aktivieren, wird dieser über das Bild gelegt (Hintergrundbild erscheint dadurch heller oder dunkler). Wie das im Frontend aussehen kann, zeigt der Screenshot aus unserer Vorschau-Seite

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

  • Laden Sie im Modul Dateiliste das entsprechende Bild hoch. Gehen Sie in den Bearbeitungsmodus des Bereiches zum Feld Erweiterungsoptionen und klicken auf den Button Neue Relation erstellen.
    • Ein Bild ist bereits hochgeladen: Klicken Sie auf den Ordner, in dem sich das Bild befindet.
    • 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 vorhandener Dateien). Wählen Sie das gewünschte Bild von Ihrer Festplatte und klicken Sie auf Öffnen, um die Datei hochzuladen.
  • Klicken Sie auf die gewünschte Datei, die sich in der Liste befindet.

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.

Bereich im Frontend

Wie ein Bereich im Frontend aussehen kann, zeigt der Screenshot aus unserer Vorschau-Seite.

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.