Regionales Hochschulrechenzentrum Kaiserslautern-Landau

Raster-Elemente

Um Seiten zu strukturieren, können mithilfe der Raster-Elemente die Inhalte einer Webseite mehrspaltig gestaltet werden. Wenn auf einer Webseite viele Informationen einheitlich und transparent dargestellt werden sollen, helfen Raster-Elemente bei der Anordnung.

Beispiel

Beispielelement aus dem Frontend: Abgebildet ist die Webseite der TU Kaiserslautern. Weiterhin sind die Fachbereiche in einem vierspaltigen Raster über 4 Zeilen angeordnet.
Beispielelement aus dem Frontend: 4-Spalter als Rasterelement

Hier wurde ein 4-Spalter genutzt, um die verschiedenen Fachbereiche übersichtlich und platzsparend anzuordnen.

Anleitung

  • Anlegen eines neuen Inhaltselements an vorgesehener Stelle
  • Unter dem Reiter Raster-Elemente das gewünschte Layout auswählen
  • ggf. Vergabe einer Überschrift für das Raster-Element
  • Speichern
Beispielelement aus dem Typo3 Backend: Das Fenster zur Auswahl von Inhaltselementen ist abgebildet. Ein roter Kasten wurde um den Reiter Rasterelement und die dazugehörigen Auswahloptionen darunter gelegt.
Beispielelement aus dem Typo3 Backend: Optionen von Raster-Elementen

Nun ist ein Raster-Element vorhanden, welches wiederum mit Inhaltselementen befüllt werden kann.

Dazu können Sie, wie gewohnt Inhaltselemente im Raster-Element selbst anlegen oder von außerhalb welche durch Drag-and-Drop im Raster platzieren.

Beispielelement aus dem Typo3 Backend: In der Bearbeitungsleiste ist ein angelegtes Raster-Element gezeigt. Neben diesem sind auch die darin enthaltenen Inhaltserstellungssymbole mit einem roten Rahmen hervorgehoben. Inhaltserstellung in Rasterelementen
Beispielelement aus dem Typo3 Backend: Inhaltserstellung in Raster-Elementen

Layout Raster-Elemente

Beispielelement aus dem Typo3 Backend und Frontend Die Abbildung ist zweiteilig. Der obere Teil zeigt die Bearbeitungsleiste aus dem Backend. Dort sind zwei Raster-Elemente nebeneinander positioniert. Es sind zudem drei rote Kästchen über den Bearbeitungssymbolen des Raster-Elements und den beiden Inhaltselementen im Raster-Element vorhanden. Im zweiten Teil sind verschiedene Layouts im Frontend abgebildet. Oben das Standard Layout, mittig das formatierte Raster (weißer Kasten um beide Inhaltselemente) und untern das formatierte Rasterinhaltselement (zwei weiße einzelne Kästen).
Beispielelement aus dem Typo3 Backend und Frontend: Layouts der Raster-Elemente

Wenn Sie ihr Raster-Element fertiggestellt haben, können sie dessen Layout festlegen.

Sie können entweder das Layout für das Raster festlegen, oder für die einzelnen Inhaltselemente im Raster.

Wenn Sie das Layout der einzelnen Inhaltsemente verändern, können Sie eine optische Trennung zwischen diesen erreichen.

Beispiele

Beispielelement aus dem Frontend: Es ist ein 1-Spalter Raster-Element abgebildet.
Beispielelement aus dem Frontend: 1-Spalter

1-Spalter

Beispielelement aus dem Frontend: Es ist ein 2-Spalter Raster-Element abgebildet.
Beispielelement aus dem Frontend: 2-Spalter

2-Spalter

Beispielelement aus dem Frontend: Es ist ein 2-Spalter mit Dimensionen von 75-25 Raster-Element abgebildet.
Beispielelement aus dem Frontend: 2-Spalter 75-25

2-Spalter 75-25

Beispielelement aus dem Frontend: Es ist ein 3-Spalter Raster-Element mit den Dimensionen 50-25-25abgebildet.
Beispielelement aus dem Frontend: 3-Spalter

3-Spalter

Beispielelement aus dem Frontend: Es ist ein 4-Spalter Raster-Element abgebildet.
Beispielelement aus dem Frontend: 4-Spalter

4-Spalter

Sie befinden sich in der Selbstschulung und möchten zur Schulungsstartseite, dann klicken Sie auf  TYPO3 im Selbststudium für Einsteiger Teil 1.

Sie befinden sich gerade in der Selbstschulung, dann klicken Sie auf Übung - Raster-Elemente, um damit fortzufahren.

Übung - Raster-Element
Weiterlesen
Günstige Layoutkombinationen
Weiterlesen