7.12 "Raster"- wien.at-Werkstatt

Mit einem "Raster" können mehrere Schwerpunkte auf einer Themenseite optimal aufbereitet werden. Diese Funktion steht nur für den Baustein "Mehrspaltiges Layout" zur Verfügung.

Screenshot eines Beispiels für ein Raster mit Markierung von zwei Bausteinen (jeweils zweispaltige Linkliste, die obere davon mit Bildern)

Für jede Rasterzeile muss ein eigener Baustein "mehrspaltiges Layout" angelegt werden. Dieser kann mit/ohne Bild bzw. mit Text/Linkliste gestaltet werden. Wird ein Bild verwendet, dann muss der gegenüberliegende Block ebenfalls ein Bild verwenden.

So funktioniert’s:

  1. Baustein "mehrspaltiges Layout" erstellen
  2. Anzahl der Spalten: 2 (je Block)
  3. CSS-Klasse für Baustein: vie-equalize vie-teaser-grid2
  4. CSS-Klasse für Spalte 1: vie-c50l
  5. CSS-Klasse für Spalte 2: vie-c50r
  6. Innerhalb der Spalte 1 (linker Block):
    • ggf. Bild (Standardeinstellung)
    • Überschrift 2
    • Text bzw. Liste (ohne Aufzählungszeichen)
  7. Innerhalb der Spalte 2 (rechter Block):
    • ggf. Bild (Standardeinstellung)
    • Überschrift 2
    • Text bzw. Liste (ohne Aufzählungszeichen)
Eingabemaske für einen Raster-Block und Angabe der CSS-Klasse

Rasterblöcke mit Text

Bei Rasterblöcken mit Text muss bei der entsprechenden Spalte zusätzlich die CSS-Klasse vie-biggerlink eingegeben werden. Dadurch ist nicht nur der “mehr”-Link klickbar, sondern auch Bild, Überschrift und Text des Rasterblockes.

  1. CSS-Klasse für Spalte 1 (linker Block):
    • Bei Text: vie-c50l vie-biggerlink
    • Bei Liste: vie-c50l
  2. CSS-Klasse für Spalte 2 (rechter Block):
    • Bei Text: vie-c50r vie-biggerlink
    • Bei Liste: vie-c50r

Bei Rasterblöcken mit Listen darf diese CSS-Klasse nicht hinzugefügt werden!

Letzter Rasterblock

Beim letzten Rasterblock der Seite muss in der CSS-Klasse für den ganzen Baustein die Klasse vie-equalize vie-teaser-grid2 last eingegeben werden (dadurch erhält der letzte Block noch eine horizontale Linie) alle anderen CSS-Klassen bzw. die Inhalte der Spalte bleiben gleich:

Eingabemaske für den letzten Rasterblock und Angabe der CSS-Klasse

Bitte beachten Sie, dass die Ansicht im vieW4-Bausteindokument nicht immer jener in der "Vorschau mit Layout" entspricht.

Weiterführende Informationen

Verantwortlich für diese Seite:
wien.at-Redaktion
Kontaktformular